change color of the modules

[ecat53]

I'm a newbie and I'm lookign around the possibility of this CMS
I want to change the color of each module in the prestashop default theme.
How can I do it' I believe I need to go in global.css but I can't find where.

Thank you

[Reena]

Having same problem..

Is there anyone to assist??

[Reena]

Hi there,

You can change the color of the headers of the modules. That you can find in global.css.
Search for each block you like the color of header to change and change the color.

For now i haven't found how to change the color of the modules as yet..still searchen..

Greets..

[Reena]

Found something..

You can install firebug and look up which class is used. Than you can search for this class in the global.css and change the color.
See the excample.

Greets..

[Reena]

Fire bug is used with Firefox

[qasrani]

Can you please suggest in bit more detail what color you want to change? Some things can be done more easily while some need extra modification or addition of extra code. So please be more specific or if possible use screenshot to explain what you mean. We will be glad to offer any help.

[Reena]

I want to change the background color of the module categories, the search block module, viewed products module, cart block, new products block and the specials module(see in the screenshot).

The homestyle that i want to use is blue.

Each module is divided in two parts. I mean if you look at the categories module you have a upper part with the header that has a dark grey color and a lighter color which contains the categories.
Is it possible to give the upper part of a module(the background) a different color(#139fc1) and the lower part where the categories are a different color(e.a #e6f4f8) also background?

I have put a screenshot, hope you can follow.

Thanks

[qasrani]

Each of these block has 3 parts, header or title, middle and very small footer too. Header has a color which you can change. Background and footer could be found in prestashop/theme/img folder. It is bit tricky but I remove all these background images for solid color. You can change these pictures or colors using any graphics editor program and uploading to same folder with same name again.

Ironically, except 2-3, all other modules change at the same time. When you change e.g catagories module, most of others will automatically change. So be careful when modifying.

I hope you get my point. Still, message if you do not understand some point. I will be glad to help

[Reena]

Yess thank you it worked!! :coolsmile:

Here my result.

[qasrani]

Good good, I am happy that you got the idea and made it to work.

[pb4sc]

Hi Quasrani,

Tell me if I am getting this right.

There are 3 images to the blocks. The header, BG, and footer. So far I have been able to follow your instructions, and change the header color with gimp. :-) What about the BG and footers?? I tried one BG and now it looks like the background is a light shade of gray, and white. Can I not change the BG and footer with my image editor??

Thanks for the great tip, and your help

pb4sc

[qasrani]

Hi, Qasrani here

Yes, you are right. There are three images with header, block background and footer. All these use floating colors or colors which have different shade on top and it keeps on getting different shade to bottom.

If you have noticed, some blocks have the same color of header which you changed, in the same way you can see the image files which have bg in their name, for example table_bg or form_bg etc, you can try to edit. I am not sure as I got rid of them on my both sites as my graphics expert did not liked the idea of changing shades of background. Footers are also files containing footer word in their name. Try playing with them You surely can change the color of background and footer if you think it is worth trying

You are so welcome. Keep us updating please how your work is going on?

[youstar]

id like to chance the background on a theme, how do i do that then?

[qasrani]

Edit the global.css file located in themes folder. There on line number 16, there is start of body tag. Inside this tag, you can make changes to whole background including background picture and colors.

[youstar]

can you make a quick walkthrough, because i dont know what to put in the global.css to change the background

[shacker]

Hi. the modules have a background image (in the header, content and footer). Use this PDS sources to change the imeges of the headers and content, and replace the original images in IMG folder.

http://www.prestashop.com/forums/viewthread/19914/themes/psd_graphics_for_prestashop__free

[pb4sc]

Youstar,
Get firefox, the firefox web developer tool and firebug. Do a google search for each. I used firebug to find the areas I wanted to change. In the Web developer tool there is a .css editor. I made the changes and saved them. Then I uploaded my changed global.css file to my Host, and replaced the original global.css file. It takes a little practice, but it works. Thats how I made my changes

pb4sc

[qasrani]

If you still need help, please say it, I will put step by step detail on how to do these changes

[youstar]

yes please

[qasrani]

Changing color of modules includes two parts:

1. Changing colors of three pictures of each module (header, background and footer of that module
2. Changing text color, style and font etc.

For ease of application, most of backgrounds and headers and footers are same in most of modules.

For step 1, you go to img sub-folder located in theme folder. There check all headers, footers and backgrounds and change the ones you like.

Here are some sample names:

block_footer_myaccount.jpg

This file is picture for block myaccount and its nature is footer

block_header_myaccount

This file is picture for block myaccount and its nature is header.

block_category_item_bg

This file is for block category and it is background part of module.

Let me know if you are clear up to this point. If you are clear and successful, I write more about changing text size, form and type etc for modules.

[ladivito]

nice instruction......thanks ~