Post by Mathewbuer » Tue Nov 15, 2011 8:57 pm

is it possible to change the default template background colour to another colour ?

Active Member

Posts

Joined
Mon Feb 07, 2011 8:24 am

Post by wernerrenrew » Tue Nov 15, 2011 9:41 pm

Hi,

Open this file in your favorite texteditor.
catalog/view/theme/your-theme/stylesheet/stylesheet.css
Find line 6 color: #000000;

Try changing it to color: #CCC;

Regards Werner
Last edited by wernerrenrew on Wed Nov 16, 2011 6:39 am, edited 1 time in total.

User avatar
Active Member

Posts

Joined
Thu Oct 27, 2011 9:48 pm
Location - Netherlands

Post by uksitebuilder » Tue Nov 15, 2011 10:30 pm

Werner that wil change the text colour.

There is no default background colour set by OpenCart on he body

90% of the time it will be white unless someone changes there default settings for the browser or windows theme etc (i believe)

Anyway back on topic

edit your stylesheet.css file as mentioned above

after

body{

add

background: #ccc /* or whatever colour you wish */

Note in doing so you will see the background colour in between various modules etc of the site

to remedy this, you should also add a background colour to the #container{ style section

ImageImageImageImageImage

For Friendly Professional Support - Click Here


User avatar
Guru Member

Posts

Joined
Thu Jun 09, 2011 11:37 pm
Location - United Kindgom

Post by wernerrenrew » Tue Nov 15, 2011 10:54 pm

Lol you are right doing one thing to many i gues ::)

Ofcourse it should be change background-color: #FFFFFF;
To background-color: #CCC;

Note: v1.5.1.3 does set the background color on the body tag

Thanks

Regards Werner

User avatar
Active Member

Posts

Joined
Thu Oct 27, 2011 9:48 pm
Location - Netherlands

Post by roozaimee » Sat Nov 26, 2011 12:18 pm

Hi guys,

I followed your instructions,
yes the background's colour changed, but only partial....
quarter bottom only...
wonder why, I just change the colour code, is there any else I should alter?

im using 1.5.3.1...

initially like this :

html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background: #000 url(../image/bg.png) repeat-x;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;

change to:

html {
overflow: -moz-scrollbars-vertical;
margin: 0;
padding: 0;
}
body {
background: #FFFFFF url(../image/bg.png) repeat-x;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
body, td, th, input, textarea, select, a {
font-size: 12px;

please advise....

regards

Newbie

Posts

Joined
Sat Nov 26, 2011 12:12 pm

Post by wernerrenrew » Sat Nov 26, 2011 6:12 pm

Hi,

You will need to identify all the containers from wich you want to change the background color.

I think you also need to remove or edit the background image this image ../image/bg.png is the reasonm why the top part of your store hasn't changed yet.

Regards Werner

User avatar
Active Member

Posts

Joined
Thu Oct 27, 2011 9:48 pm
Location - Netherlands

Post by Cyberwoolf » Sun Nov 27, 2011 1:00 am

If you download web developer plugin for firefox: https://addons.mozilla.org/en-US/firefo ... developer/

You can see what css is being used in a specific area.. once it's installed, press ctrl+shift+y then click on the area you want to see the css for.

New member

Posts

Joined
Wed Jul 27, 2011 8:43 am

Post by roozaimee » Sun Nov 27, 2011 3:21 pm

You will need to identify all the containers from wich you want to change the background color.

I think you also need to remove or edit the background image this image ../image/bg.png is the reasonm why the top part of your store hasn't changed yet.

Regards Werner
yeah, I removed the ""../image/bg.png"", whole page change colour,
except the information box at the bottom, cant find its column in the stylesheet.
Cyberwoolf wrote:If you download web developer plugin for firefox: https://addons.mozilla.org/en-US/firefo ... developer/

You can see what css is being used in a specific area.. once it's installed, press ctrl+shift+y then click on the area you want to see the css for.
I installed it, but no idea how to use it... I might need to find reference/tutorials learn how to use it..

____________________________________________________________________________________________
Thanks guys...

owh one more thing,
How to change colour of the font? currently it's white... cant find in the stylesheet as well..
If I want to change font type, just simply type the name of the font?

Best Regards

Newbie

Posts

Joined
Sat Nov 26, 2011 12:12 pm

Post by Cyberwoolf » Thu Dec 01, 2011 3:44 am

roozaimee wrote: I installed it, but no idea how to use it... I might need to find reference/tutorials learn how to use it..
Thanks guys...

owh one more thing,
How to change colour of the font? currently it's white... cant find in the stylesheet as well..
If I want to change font type, just simply type the name of the font?
After you've installed it (and activated it), press ctrl+shift+y (or You can also goto tools> web developer > css > view style information ). Once you've done that, you should get a red box when you mouseover some text (or the area you want to see the style information). Then click and a little dialog will show up with the stylesheet location and the classes.

Font type and font color are 2 different things. If you can't figure out what area it's in, search your css file for either: #fff or color: #fff. This will locate the color :-)

New member

Posts

Joined
Wed Jul 27, 2011 8:43 am

Post by keiron1992 » Sun Jul 22, 2012 6:45 am

Tweaked my CSS with your help. Thanks guys :) My site: http://www.clickbuyget.com

New member

Posts

Joined
Fri Oct 22, 2010 12:02 am
Location - Birmingham, West Midlands, Uk
Who is online

Users browsing this forum: No registered users and 16 guests