Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Thoughts on design, css, and templates for megento. 
 
JesseStewart
Sr. Member
 
Avatar
Total Posts:  82
Joined:  2008-02-18
Salt Lake City, Utah
 

I’ve been working with version 1 and I have some thoughts on the way the css is put together for the default theme and what would make a good blank theme.

The idea behind a blank theme is having a starting point for new designs. As a designer I don’t want my site to look like the default theme at all, but that really requires going through a very long boxes.css to find the elements and make the change.

I have already tried to do this and found that it is a big task to separate that which is necessary and that which is purely aesthetics. A lot of page elements use an image as a background, these would need to be changed to use html elements by default so that without being styled, they are still displayed and functional.

These are just my thoughts and I would love to hear yours. Thanks.

I would love to help with this endeavor and would like some help from someone maybe a bit more experiences with magento.

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

I fully agree, the templating documentation could use quite a bit of work.  That is quite understandable given the fast pace of development but the designer’s guide just doesn’t cut it.  Having a barebones template to work with and just the essential CSS would be a godsend and that is what I am working on right now.  I created a theme under default called “skeleton” and started stripping out all but the essential files.  I was left with:

App->Design
default/
skeleton/
layout/
page.xml
locale/
en-US/
translations.csv
template/
page/
1column.phtml
html/
head.phtml
header.phtml
footer.phtml

Skin
default/
skeleton/
images/
css/
styles.css
js/
scripts.js

Now something to note in the CSS and the JS is that I just got rid of all of the existing styles as I am intent on building up my own.  One problem I have run into that I have worked around is that my CSS and JS does not get loaded from the stripped down page.xml.  Instead I have to do calls within the head.phtml itself.  This will pull it put I am sure there is a better way.  This will create a very basic but still functioning site minus the catalog.  I still need to figure out what calls those use and then re-implement that in a stripped down fashion.  The whole point of this exercise is so that I can understand better what is going on and also so that I do not have to work around odd CSS quirks from existing style sheets.  I have a rather complicated design and unfortunately what is currently in there is not at all what will work for me.  I am making good progress but since I just started with this I hope to have this mostly done in a week.

-Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
Charles
Member
 
Avatar
Total Posts:  73
Joined:  2008-03-27
Belgium
 

My best guess why the JS and CSS are not loaded, is because the page.xml refers to the 3-columns.phtml

<default>
        <
block type="page/html" name="root" output="toHtml" template="page/3columns.phtml">

            <
block type="page/html_head" name="head" as="head">
                <
action method="addJs"><script>prototype/prototype.js</script></action>
                <
action method="addJs"><script>prototype/validation.js</script></action>
                <
action method="addJs"><script>scriptaculous/builder.js</script></action>
                <
action method="addJs"><script>scriptaculous/effects.js</script></action>
                <
action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
               ....

The head.phtml doesn’t quite help either.
Could we copy-paste the 3columns-block and refer to the other templates ?

 
Magento Community Magento Community
Magento Community
Magento Community
 
alistek
Sr. Member
 
Total Posts:  293
Joined:  2008-04-02
Normal, IL
 

I noticed that too but even after I changed it to 1column.phtml it still wouldn’t work quite right.  There is something fundamental I am not understanding about the layouts.  Anyone care to enlighten a bit more.

-Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
iPhony
Member
 
Avatar
Total Posts:  37
Joined:  2007-09-01
 

My take is as follows:

I understand designers like to do things their own ways but in the case of magento I think it is critical to first understand the architecture before modifying essential files all over the place.
Why don’t you just take baby steps and check just the css, then go one level up and change the layout etc…

I actually like the concept of theme on magento as it helps you build on top of the default theme and really only have to produce the files that you want updated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
JesseStewart
Sr. Member
 
Avatar
Total Posts:  82
Joined:  2008-02-18
Salt Lake City, Utah
 
iPhony - 02 April 2008 03:59 PM

My take is as follows:

I understand designers like to do things their own ways but in the case of magento I think it is critical to first understand the architecture before modifying essential files all over the place.
Why don’t you just take baby steps and check just the css, then go one level up and change the layout etc…

I actually like the concept of theme on magento as it helps you build on top of the default theme and really only have to produce the files that you want updated.

I completely agree with iPhone. I think the way they set everything up is wonderful and I have a solid understanding of how the system works with the exception of a few areas. I feel that a starting point to follow these instructions would prevent having to go backward before you can go forward. While slicing any laying out my design, I found that i was removing as many styles as i was adding or changing.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top