[SOLVED]How can I change background color outside main page shell

[GlennD]

Can someone explain how to change the background color OUTSIDE of the main page shell using Prestashop v1.5.3.1 please?

 

I have looked at other threads in relation to this topic, one of them being here:

 

http://www.prestasho...ter-page-white/

 

The above link does not explain how to do what I require, that is, in the above case the background image can be seen behind the slider, page banner and all other page content in the main shell (as seen in the YouTube video).

 

There is also another suggestion in the same thread at post #11 by Holspeed to edit:

Line 41 of global css to #page {background: #examplecolor} which i tried - this also changed colors of certain parts of the page within the main page shell - again - not what I require.

 

My apologies if this question has indeed been answered prior to this however i am still working out the navigation within this forum.

 

I have included an image of what I require:

 

 

Would appreciate suggestions.

Edited March 22, 2013 by GlennD (see edit history)

[tdr170]

You will need to edit the global.css file and change two section,.

Global.css can be found in the ..themes/default/css folder

 

First change the page so that it remains white like belowat line 41:

 

change this:

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page {}

 

 

To this:

 

/* ************************************************************************************************

struture

************************************************************************************************ */

#page {background:#fff}

 

 

 

 

Then find this section and change the background color to your choice at line 56.

You can use a HTML color or any standard color such as black, blue, red, green.

If you use a name for the color as above remove the # from in front, if you use a HTML color you must use the # in front.

If you do a search for HTML colors you will find many charts with the colors # you can use.

 

background:#fff

background:white

 

 

/* ************************************************************************************************

generic style

************************************************************************************************ */

body{

font:normal 11px/14px Arial, Verdana, sans-serif;

color:#222;

background:#fff

}

 

 

Need more help just ask.

Edited March 22, 2013 by tdr170 (see edit history)

[GlennD]

Perfect!

 

Thankyou very much for your assistance tdr.

 

The only thing that I don't like when changing this to a solid background color (for example black) is that the log in link and modules (I think these are modules) like Categories, Manufacturers and Contact us sit flush against the edge of the main shell.

 

Is there anywhere i can alleviate that problem, maybe by experimenting with padding, margin somewhere and if so in what file (there are so many!)

 

Maybe I should save that for another thread?

Edited March 22, 2013 by GlennD (see edit history)

[tdr170]

I finally had the time to play with this, try the settings posted here you may need to play with the settings a little.

 

Global.css

 

#left_column {padding-left:5px;width:185px}

#center_column {width:560px}

#right_column {width:185px}

#footer {margin-left:1px;width:978px}

Edited March 24, 2013 by tdr170 (see edit history)

[GlennD]

Hey thankyou very much again for your time and patience - appreciate it.

 

Global.css

 

#left_column {padding-left:5px;width:185px}

#center_column {width:560px}

#right_column {width:185px}

#footer {margin-left:1px;width:978px}

 

The above code worked perfectly. The only thing the code didn't reposition as I would have liked is the Cart login which I would also like to move in just a touch so it is not sitting hard against the background color.

 

 

I understand that these two things are unrelated when it comes to positioning. What should I look for in the global.css file that I would need to play with to accomplish this?

 

I am finding the concept of modules, blocks, hooks etc..and what relates to what CSS and so forth and so on a little hard to comprehend at the moment. i have downloaded the Prestashop Designer Guide PDF which I will try to get some ideas from. If you could also recommend any other good learning guides for people like myself who do have experience with HTML, CSS and PHP (although I'm not really to confident with the latter) about what files are actually related to what and what CSS is pointing to which part of what page it would be very helpful.

 

I would much rather learn the ins and outs of the software myself if possible, that is, rather than turning up here at the forums with questions I really should be able to solve myself if I knew where to look.

 

Just as an example, I would like to use border-radius to give modules a nice rounded look, however it is the association between the files that has me scratching my head a little.

 

Ty again tdr, hitting the Like this button now!

Edited March 25, 2013 by GlennD (see edit history)

[tdr170]

For this you will need to add margin-right:10px as below. (blockuserinfo.css)

(whatever number positions things where you want)

 

 

#header_user_info {

clear:both;

float:right;

margin-top:10px;

padding:0;

font-size:12px;

margin-right:10px

}

 

No worries we all had to learn somehow.

Edited March 25, 2013 by tdr170 (see edit history)

[tdr170]

Here is a copy of the code I used to make borders/header backgrounds have radius corners.

This also works for Full width banners as I have on my site.

The only issue I found is that not all Browsers support this feature IE mainly.

This code gives a top radius, you can also just add more if you want the bottom radius as well.

 

 

 

border-top-left-radius: 10px;

border-top-right-radius: 10px;

-moz-border-top-left-radius: 10px;

-moz-border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

[GlennD]

Wow - very quick resonse mate

 

Login now siiting as required by adding margin-right:10px to #header_user_info{ in blockuserinfo.css as suggested.

 

Here is a copy of the code I used to make borders/header backgrounds have radius corners.

This also works for Full width banners as I have on my site.

The only issue I found is that not all Browsers support this feature IE mainly.

This code gives a top radius, you can also just add more if you want the bottom radius as well.

 

 

 

border-top-left-radius: 10px;

border-top-right-radius: 10px;

-moz-border-top-left-radius: 10px;

-moz-border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

 

It seems that sometimes IE are a little slow to implement change but that's browser wars (another topic for another forum - can be very annoying but some things we just to have to wear.

 

Is the border-radius code above added to the global.css file (if so where?) or do you need to add it to individual css files as required?

 

If I am starting to understand correctly, and maybe I'm not, but it seems that with the login the css was added to the block itself. Does this mean that if I want to make changes to the manufacturers block for example, I would then need to do this via blockmanufacturers.css (if there is indeed a file with that name)?

 

As I said before - is there any guide out there that has a list of the associations required to make changes to individual blocks/modules? Would appreciate any links or information on how you went about learning what related to what - or is this a learn yourself/ trial and error type of process for everyone?

[GlennD]

Just got the blocks sorted with the border radius - I guess i'll just keep using trial and error to figure out adding it to the main page banner etc and Google around to see what else i can find to try to make more sense of what files to edit under certain circumstances. .

 

Don't know how many times I can say it but thanks again for the assistance - I know you're probably very busy helping many people so I really do appreciate the input.

[tdr170]

Some are in the global.css and others are part of the module for the most part trial and error is all you can do.

No problem glad to help.

[Taiowas]

Hi,

This thread about the color change has everything worked out great.

But I find the block userinfo.css which is not described in post 6th

Where is this file so that I can also changeable. Because it looks so modest.

I use PS 1.5.5

 

Sorry for the bad english

 

Best regards

 

Olly

[vekia]

path to the file:

modules/blockuserinfo/blockuserinfo.css

[Taiowas]

Thank you

[vekia]

so, does everything work well now? allied changes to that file?

[Taiowas]

Hi vekia!

 

Yes everything is now running as it should.

I've found the file and have the changes made ​​without any problems.

Thank you for your help!

 

Best regards

Olly