magento custom theme

Question

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.

Answer 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.

Answer 2

您可以从magento扩展名[ 1 ]下载空白主题。它只是线框。您可以根据需要扩展主题。它与magento 1.4版本兼容。

Answer 3

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.

Moody

Answer 4

As first rule let me advice you, never change the default theme!

If you need to modify your theme you'll need to do 2 things

1) register your css by using XML 2) create a folder with your css and activate your theme

there's a cool video here https://tutsplus.com/tutorial/magento-up-and-running/ where you can learn more about the specifics

good luck!

Answer 5

Since I can't see the design, all I can tell is there's a nice video about Magento Theming in Tutplus, it basically teach you how to move blocks from one container to another and how to set your theme folder and style the theme.

Here you have another Magento Tutorial

Answer 6

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/....

Thanks Magento Development