magento custom theme

I am a newbie in magento. I want to have a theme with a black background header with my logo, a dark grey image in the footer with some text on it and in the middle a black coloured area that is blank.

Can someone suggest me how should I start. Right now I was using the default theme and changing the styles.css and header and footer html files. But somehowe its not working the way I want it to be and will this be the right way.

Please help me out.
Thanx in advance.

6 thoughts on “magento custom theme”

  1. You better read all the tutorials about themes and templates, it’s quite a lot to learn to get everything under your own control.
    What you could do is to search for free themes/templates in the Extensions database, install them and test them to find one that’s close enough. Then redesign the part you need to change.

    Oh, BTW, if the cache management is activated you might not see the changes.

  2. You can download a blank theme from magento extensions[1].It is just a wireframe.You can extend the theme as you like.It is compatible with magento 1.4 version.

  3. Hello the changes you want to do in magento custom theme development are just few css changes in /skin/frontend/package/themename/css/

    to do changes in header and footer you just place the images in /skin/frontend/package/themename/images/ and do your changes in styles.css

    and for body part you need to place blocks properly, i mean you need to create some static blocks and place it in XML layout update section of CMS pages. and for custom changes you need to create custom blocks as in format of .phtml files and then need to give reference in XML files, mainly catalog.xml files is being used for the reference, just check /app/design/frontend/package/themename/layout/catalog.xml you will understand how blocks and phtml files are referenced there, and you must create phtml files in /app/design/frontend/package/themename/template/….

    Magento Development

  4. Well, im no magento whiz kid but this is what ive understood after working on some custom themes. Ill try and make it as simple as possible.

    But ofcourse, it goes without saying: read themeing tutorials.. it really helps in the long run.

    Normally in every theme, every page is basically divided into three sections : the header section, the page section and the footer section.

    Note: it is always better to create ur own custom the interface and theme and copy header.phtml or footer.phtml (with all container folders) to it for editing.

    The header section is populated by the header.phtml file which can be found under app/design/frontend/interfacename/themename/template/page/html/header.phtml

    The header.phtml contains a main div within which you can position another div for your logo.

    The styling of the header.phtml and the divs contained within it is done through styles.css contained within skin/frontend/interfacename/themename/css/styles.css

    QUESTION1: For getting a black header you can change the color of the main div in header.phtml and make sure it stretches to 100%. This obviously is done putting css code in styles.css

    QUESTION2: Middle black coloured area: an overall color of black can be added to the website by adding black color to the body tag (using styles.css ofcourse). The header will be visible above it.

    QUESTION3: FOOTER image:

    The footer is generated by footer.phtml under app/design/frontend/interfacename/themename/template/page/html/footer.phtml

    Apply a background image using css to the main div in footer.phtml through styles.css and you should be good to go.


Leave a Reply

Your email address will not be published. Required fields are marked *