I’ve been picking apart Magento as time has allowed since its release two weeks ago, and I really wanted to release one of the first publicly available design themes. After some hard work (and believe me, there’s more to come) I’ve managed to crank out version 0.1 of Tealo, which is the first available theme for Magento. By available, of course I mean downloadable, so go snag your copy here! (or download a zip instead of a tarball)
Main Features of This Release:
* Custom Logo and Favicon (for kicks)
* Functional/Visible Skip Link (refresh and hit tab once to view)
* Account/Cart Links Integrated Into the Main Navbar
* Modern, JS-Free Horizontal Navigation Slide-Downs
* An Appealing Color Scheme (at least I think so)
* Company Name, Address and Phone Number in Header
* Arrow With Contoured Drop Shadow on Nav Rollover (fancy, eh?)
Now, as with Magento’s first release, understand that this theme is kind-of a preview release, and there is quite a bit more work to be done on it. I haven’t touched the #main section a whole lot. Needing more time and inspiration for that. Magento’s default CSS is still somewhat messy, everywhere. Also, with the style of navigation used, it can be limiting on the number of products you have. You cannot have more than probably 11 subcategories/products per category unless you shrink the nav font size a bit. Still, it’s not perfect in it’s current state, but over time I expect to improve it into a wonderful and inspiring theme. I’m not going for extreme innovation points here, just a couple fancy things to start with. For now, the purpose was to take control of Magento and see where it would take me. In the mean time, here’s a roadmap of what’s to come:
* Clean Up Magento’s Default CSS, Strip Unused Styles
* Style the module boxes inside the #main section
* Clean Up Cart/Account Links in Nav (requires core controller changes)
* Distinguish Between Categories and Account/Cart Links in Nav by
* Adding Simple Icons to Cart/Account Links in Nav
* Restructure XHTML as time allows to provide a simpler, lighter starting point for other layouts
* Fix Cross Browser (read: IE) Bugs and Make Refinements
* Skin the Admin Panel to Match
* Update Theme as Magento Changes and Matures
Feel free to share your comments, constructive criticism, and any suggestions!
Here are my few points in this early development-phase:
* Rather use the colors that Magento has picked for links, etc in the indeed very good top-menu (the a:hover color almost cant be seen)
* I see you have expanded the total width of the store, at least in the header. The total width should fit a 1024x768 resolution
For Magento: Maybe it would be a good idea to have a setting in the Magento Configuration to set the “Default store-width to either “1024x768”, “800x600”, etc).
* Modify the hading so that the Categories dont get mixed up in the “My Account”, “Log in”, etc. buttons - as they have totally different functions. Maybe two rows, I dunno.
aFFi, the CSS gave me quite a fight. It didn’t want to accept the link color styles for all three tiers of navigation individually. Testing my method outside of M worked fine, so there must be some CSS scrambled in somewhere that’s thwarting my process here…
Regarding the navigation, I agree it is difficult to distinguish between the categories and account links (a resolution for which is something I originally included on the roadmap). My current idea includes adding some custom icons to help them standout. But regarding stores with more than 8 categories, these links may get in the way if they remain in the navigation. I think they’re fine for version 0.1 though.
If anyone has successfully installed Tealo in their store (you can do it temporarily by performing the following instructions) I would love to see it. Here are the steps:
1. Via SSH (or SCP) upload tealo.tgz to the server and untar it in Magento’s root folder. The theme and skin folders should go to:
app/design/frontend/default/tealo/ ... and ... skin/frontend/default/tealo/ ... respectively. A favicon.ico file should also replace the default M favicon.
2. Go to your admin panel, and go to System > Configuration and click Design in the sidebar. For each text field called Default, Layout, Template and Skin, and “tealo” (in lowercase, without quotes). Don’t forget to Save Config.
3. You’re done! (Hopefully) ... Paste your link here!
You can always go back to your theme later without messing anything up. That’s the idea anyway. Note: The previous statements are not approved by the FDA. Tealo is not intended to diagnose, treat or cure any diseases of the mind, body or creativity.... Just teasin’
A zip file is now available in case you cannot untar.
Do your categories in the top area have to appear like this?
See the snapshot of how they appear into one of my machines
(MsIE v.6, 1280x1024, 32bit on an IntelPIII with MsWin98,
admittedly a dinosaur of a computer but…
millions of them are still out there in this planet, ready to buy from your template
In the mean time, here’s a roadmap of what’s to come:
...
* Fix Cross Browser (read: IE) Bugs and Make Refinements
Yep, haven’t had time to get to that yet (among other things). I will probably clean out the CSS files first, to make sure I can pinpoint the culprit of any bugs. Also, I will need to implement a little js to get the slide-downs to work in IE 6. Also, the third tier doesn’t work in IE7. No worries, I’ll get it taken care of.
I can’t design everything in 8-10 hours (which is about how long it took me to create version 0.1 once I found my footing with the design methodology)
I also wanted to approach the module redesign a bit differently, and wanted to give it more thought. So, I decided not to wait any longer in posting the theme. My main goal in this version was to redesign the elements outside the main content: header, navbar, footer, backgrounds, boarders, skip link, etc. And get a feel for moving around some of the blocks. The modules will be a while yet. I also want to make sure that everything I do is portable. I don’t want to have everyone hacking their controllers and models. That’s part of the reason I kept it simple for now.
I have tried to install the template but it´s giving this error after I untar the file:
Warning: require(app/Mage.php) [function.require]: failed to open stream: Permission denied in /home/produced/domains/producedinholland.nl/public_html/index.php on line 26
Fatal error: require() [function.require]: Failed opening required ‘app/Mage.php’ (include_path=’.:/usr/local/php5cgi/lib/php’) in /home/produced/domains/producedinholland.nl/public_html/index.php on line 26
I think what is happening is that your /app/ and /skin/ directories were replaced altogether, which can happen with various methods of untarring. I’m going to get with Moshe and determine some standards for theme packaging, publishing and installation.
I have updated the files so that they will not overwrite any directories. This requires you to move them to their proper location and (optionally) rename the folders. A README is included that contains further instructions. Also, the zip file now includes the tar file to simplify the download (at a slightly increased file size of 2MB). For speed, the tar file can be downloaded by itself at about 1MB for those who wish to do so. Give it another go and you should be fine.
Here’s another Atta’boy.
Seriously, nice job, interesting concept with the drop downs nav and CSS only.
this type of nav would be just the ticket for some stores I bet.
Off topic, does the cart run if JS is off or not functioning for some reason, just curious?
HI
It is nice template. Here is a little issue with the color scheme what is select an item from main menu and then go to second level menu the color of the item for MOUSEOVER is very light that is why it is hard to read. Either make the background dark or mouseover color dark.
Again it is a nice theme
Qumer, thanks for the compliments. I haven’t had a lick of time to make changes to the template since I first released it. I will probably make changes soon, but I’m unsure when I will have some spare time to do so.
I thought the same thing, it’s these types of little tweaks that individual users might be best in making, that way each site using the skin will have just a slight bit of it’s own personality and choice regarding the color scheme imo.
Nice work but no offence, You have changed only header and footer.
