I purchased a computer that cost less than $100. I have been hearing so much about the Raspberry Pi lately, that I finally decided to purchase one. It’s something that I really needed – I just have to figure out why. Although the Raspberry Pi was created for a different purpose, this is a true Geek toy.
Checkout My New Site - T-shirts For Geeks
I’m still working on the Magento theme for my upcoming t-shirt site. I recently started updating the footer. It took some time to figure out how to add/remove the footer links as well as add other items such as a newsletter block. I thought I could update a single file, but it wasn’t that simple.
Checkout My New Site - T-shirts For Geeks
For the last couple of days, I have been trying to move the search bar under the navigation bar. This is my 3rd iteration of a Magento theme for my t-shirt site. I liked my first theme when it was created, but that was 7-8 months ago. I started working on a new design about a month ago (used Inkscape and Photoshop). After I converted the design into a Magento theme (a couple of weeks ago), I decided to go into a different direction – procrastination at it’s best. While creating this new theme, I spent a couple of days trying to move the search bar under the navigation bar. It was actually quite easy.
Checkout My New Site - T-shirts For Geeks
I’m building a webstore using Magento. I’ve used osCommerce in the past, but with this new store, I wanted to try a different e-commerce package. While creating the Magento theme, I could not figure out how to change/remove the the menu items on the top links on the site (My Account, Wishlist, Checkout, Login). It was actually quite easy.
Checkout My New Site - T-shirts For Geeks
Well, it’s not actually the second day. I have been working on creating the t-shirt business for quite some time – albeit inconsistently. I started creating the t-shirt designs (mostly words) about 9 months ago. While designing, I spent a couple of months trying to find a domain name that I liked that wasn’t already taken (nearly impossible). And once I found a name, I began working on the website design and e-commerce development (Magento). And then I fell out of love with my domain name choice, so I began to work on another project (MobilePebbles.com). Now I’m back working on the t-shirt business (thus, day 2).
Checkout My New Site - T-shirts For Geeks
One of my first purchases for my t-shirt business were t-shirt templates for my website. I initially purchased the Ultimate Mockup Template Collection 2 from Go Media. This collection contains Photoshop Mockup Templates for Men’s Polo, Men’s crew neck, ladies crew neck, Pullover hoodies, Ringer Tees, ladies tank tops, and Men’s longsleeve. I used the mockups to create the color options for each t-shirt design. After creating the t-shirt color options, I decided that I wanted to display a folded t-shirt for the initial display of each design (on the home page, category pages, etc). But a folded t-shirt was not part of the Ultimate Collection.
Checkout My New Site - T-shirts For Geeks
I recently decided to start an apparel company for geeks. My initial products will be t-shirts, so I had to learn a bit about the t-shirt business. I spoke with a cousin, Marc Clark, about all aspects of the t-shirt business (he designs/sells t-shirts, bow-ties, and foxtails). He gave me invaluable advice as to what the focus of my research should be – t-shirt quality, printing options, and t-shirt tags.
Checkout My New Site - T-shirts For Geeks
As part of the Mobile Theme Generator, I had to create a Photo Gallery in order to display the header images. As stated in previous post, I created the Mobile Theme Generator using Django and jQuery Mobile. Although there are probably plenty of Django-based Photo Gallery apps, I thought that it would be easier to integrate a custom Photo Gallery into a generator, so I decided to build it myself.
Checkout My New Site - T-shirts For Geeks
While developing the Mobile Theme Generator, I decided to allow the user to display a menu above the content. After the site was launched, I decided to create a plugin with the menu functionality. With the gpMobileMenu plugin, you have the ability to dynamically display menus on your site using jQuery Mobile’s Listview. I also enhanced the functionality so that the menus can be displayed above the content, split-view mode, or within a container.
When a user clicks on the menu icon, the menu will be displayed. The menu icon can be placed anywhere on the page. Although the menu icon uses jQuery Mobile’s data-theme, attribute, it is actually a 15-color sprite.
Use the icon_data_theme option to set the color of the icon menu.
icon_data_theme: ‘c’ |
The data-themes colors are:
a – black
b – light blue
c – grey
d – white (default)
e – yellow
f – orange
g – red
h – navy blue
i – lime green
j – purple
k – pink
l – brown
m – gold
n – dark green
o – dark grey
Use the icon_position option to place the icon on the left or right.
icon_position: ‘right’ |
The default position is left. When this option is set, the plugin will add either the ui-btn-right or ui-btn-left class to the menu icon.
The menu items should be contained within a JSON object. Use either the menu_items (static) option or the menu_items_url (dynamic) option to load the menus. Use the menu_items_url to load the menu items ajaxally. The JSON object can contain a few options. The most common:
url: The url of the menu item (when clicked).
label: The display text.
{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"} |
In addition, you can set the following options:
isDivider: Use this option if you want the menu item to be a divider (not a link). The plugin will set the menu item with jQuery Mobile’s data-divider-theme attribute so that it can be style separately.
{"isDivider": "true", "label": "My Menu"} |
In order to style the data-divider-theme, use the menu_data_divider_theme option. The default for this option is ‘b’.
menu_data_divider_theme: ‘a’ |
dataAjax: Use this option to set the data-ajax attribute for the menu item. The default is ‘false’.
{"url": "#mycontent", "label": "GrasshopperPebbles", “dataAjax”: “true”} |
callFunc: Use this option if you want to call a Javascript function when user clicks on a menu item (The url option will not be used). To pass parameters to the function use the params option. The parameters will be sent to the Javascript function as an array.
{"callFunc": "bobMarley", "params": [{"param":"song"}, {"param": "jammin"}], "label": "Bob Marley Lyric"} |
ajaxCall: Use this option to make an Ajax call when the menu item is clicked. When using this option, you must also supply an ajaxCallSuccess option. This is the Javascript function that should be called when the ajax call is successfully completed.
{"ajaxCall": true, "url": "/assets/js/jquerymobile/gpmobilemenu/get_data.php", "ajaxCallSuccess": "showLyric", "label": "Ajax Call"} |
To style the menu items, use the menu_data_theme option. This will set jQuery Mobile’s data-theme attribute to the menu items. You can change the style using jQuery Mobile’s Theme Roller. The default value for this option is ‘a’.
menu_data_theme: 'c' |
The gpMobileMenu will display menus using 3 separate modes:
Above Content: The menu will display above your content. This is the default option.
$(document).ready(function(){ $('#gs-widget-tabs-cntnr').gpMobileMenu({ icon_data_theme: 'e', menu_items: [{"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}] }); }); |
Split View: The menu will display on the left of the content (the content will be pushed to the right, partially off of the screen). With the split-view option, you have the option of displaying the menu using animation by setting the animate_transition option. This option is set to false by default.
$(document).ready(function(){ $('#gs-widget-tabs-cntnr').gpMobileMenu({ mode: 'split-view', icon_position: 'right', menu_data_theme: 'c', animate_transition: true, menu_items: [{"isDivider": "true", "label": "My Menu"}, {"url": "http://grasshopperpebbles.com", "label": "GrasshopperPebbles"}, {"url": "https://twitter.com/lesgreen", "label": "Follow Me"}, {"url": "http://www.facebook.com/lesgreen", "label": "Facebook"}] }); }); |
Slide: The menu will slide into down into view. You control where the menu should display. Just create the menu container anywhere in your template and set the menu_cntnr option to the id
of you menu container. You don’t have to style the container because it will get replaced with another container.
$(document).ready(function(){ $('#gs-widget-tabs-cntnr').gpMobileMenu({ mode: 'slide', menu_cntnr:'my-slider', icon_position: 'right', menu_data_theme: 'b', menu_data_divider_theme: 'a', menu_items_url: '/assets/js/jquerymobile/gpmobilemenu/menu.php' }); }); |
The menu items can be set with additional jQuery Mobile style attributes.
menu_inset: By default, the menu items will set with the data-inset attribute set to ‘true’.
menu_mini: By default, the menu items will be set with the data-mini attribute to set ‘true’.
menu_corners: By default, the menu items will be set with the data-corners attribute set to ‘false’ (no curved corners).
Although the plugin was created to be used with jQuery Mobile, the plugin can be used without it by setting the jquery_mobile option to ‘false’. Without jQuery Mobile’s styling, you will have to style the menus yourself. The following are some basic styling:
#gp-mobile-menu-icon.ui-btn-right { float:right; margin-top: 6px; margin-right:10px; } #gp-mobile-menu-items li { height:30px; border-bottom:solid thin white; } #gp-mobile-menu-items li a { display:block; text-decoration:none; height:30px; background-color:#000000; color:#ffffff; } |
That’s it. The gpMobileMenu can be downloaded from github. Demos can be found on the demos section of my site. Enjoy.
Checkout My New Site - T-shirts For Geeks
I used jQuery Mobile to create the UI for the Mobile Theme Generator. One of the processes that had to be frequently coded was setting the state of the jQuery Mobile checkbox. Because of the many classes associated with displaying a mobile checkbox, the code was more involved that I first anticipated.
To set checkbox state to ‘on’:
var c = $('#mycheckbox'); $(c).attr({'checked': true, 'data-icon': 'checkbox-on'}).siblings('label').removeClass('ui-checkbox-off').addClass('ui-checkbox-on'); c = $(c).siblings('label').children('span').children('span')[1]; $(c).removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on'); |
I first set the “checked” attribute to true and also set the “data-icon” attribute to ‘checkbox-on’.
I changed the class for the checkbox label from ‘ui-checkbox-off’ to ‘ui-checkbox-on’.
I then get the sibling label for the checkbox so that I can get the second ‘grand-child’ of the label. I change the class of the span from ‘ui-icon-checkbox-off’ to ‘ui-icon-checkbox-on’.
<div class="ui-checkbox">
<label for="mycheckbox" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-off ui-btn-up-a">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Menu Items Mini:</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"> </span>
</span>
</label>
<input type="checkbox" name="mycheckbox" id="mycheckbox" data-mini="true">
</div> |
That’s it. Of course, to turn it back off, I just to change to classes back (and removed the ‘checked’ attribute).
Checkout My New Site - T-shirts For Geeks
DevoutGeek.com
