Jump to content
Latest News: (loading..)
JcMagpie

Making Color changes to your site

Recommended Posts

Posted (edited)

This question is asked many times. Its not easy for someone who is not into the code to find the bits they need. So to try and help I'll post the changes I have used. These are purly extracted from a stock install of CE. Only make changes in you user.css.  I have put the full css in a readable format into seperate files that are attached. Most people will only need the short user.css listed below.

This should cover most thing.

To change color of index background use

element.style {
    background-color: #ad1313;
}


To change color of panel background use
.panel-default {
    border-color: rgb(221, 221, 221);
}

.panel {
    margin-bottom: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-radius: 4px;

To change color of panel on index use    
    
    
.thumbnail {
    display: block;
    margin-bottom: 20px;
    line-height: 1.42857;
    background-color: rgb(255, 255, 255);
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(221, 221, 221);
    border-image: initial;
    border-radius: 4px;
    transition: border 0.2s ease-in-out 0s;
}    
    
    
    


To change color of navbar use
.navbar-no-corners {
    border-left: none;
    border-right: none;
    border-radius: 0px !important;
}

.navbar-inverse {
    background-color: rgb(34, 34, 34);
    border-color: rgb(8, 8, 8);
}

.navbar {
    border-radius: 4px;
}

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
}

To change color of breadcrumb use

.breadcrumb {
    margin-bottom: 20px;
    background-color: rgb(245, 245, 245);
    padding: 8px 15px;
    list-style: none;
    border-radius: 4px;
}

To change color of panels use.


.panel-default {
    border-color: rgb(221, 221, 221);
}

.panel {
    margin-bottom: 20px;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 1px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    border-image: initial;
    border-radius: 4px;

 


To change color of customer-greeting use.

.alert-info {
    color: rgb(49, 112, 143);
    background-color: rgb(217, 237, 247);
    border-color: rgb(188, 232, 241);
}

 


To change color of footer and its text use.

.footer{background:red;border-top:2px solid #000;}
.footer .footerbox{padding:10px 10px 0px 10px;}
.footer h2{padding:0;margin:0;font-size:1em;letter-spacing:0.1em;color:rgb(222,222,0);text-shadow:1px 1px 1px rgba(255,255,255,0.6);border-bottom:1px solid #000;padding-bottom:10px;margin-bottom:10px;text-transform:uppercase;}

To chnage color of footer nav-pills and its text use.

.nav{padding-left:0;margin-bottom:0;list-style:none;}
.nav>li{position:relative;display:block;}
.nav>li>a{position:relative;display:block;padding:10px 15px;}
.nav>li>a:focus,.nav>li>a:hover{text-decoration:none;background-color:#A63737;}
.nav-pills>li{float:left;}
.nav-pills>li>a{border-radius:4px;}
.nav-pills>li+li{margin-left:2px;}
.nav-stacked>li{float:none;}
.nav-stacked>li+li{margin-top:2px;margin-left:0;}
.container-fluid:after,.container-fluid:before,.nav:after,.nav:before,.row:after,.row:before{display:table;content:" ";}
.container-fluid:after,.nav:after,.row:after{clear:both;}


To change color of footer extra and its text use.

.footer-extra{background:#A63737;color:#A63737;line-height:3;}
.footer-extra A{color:#A63737;}

Navbar.css

bodyWrapper.css

body-sans-header.css

columnLeft.css

Footer.css

Footer Extra.css

user.css

full user.css

Edited by JcMagpie
Add full user.css

 

Share this post


Link to post
Share on other sites

It's not necessary to put down so much markup. eg if you want to change the breadcrumb background color, only put this down in your user.css

.breadcrumb { background-color: black }

or

.breadcrumb { background-color: black; color: white }

 

above changes the background color and font color.

Also try to keep the Bootstrap classes, and define new classes for custom requirements. eg. If you want to change an alert-info, don't change the styling of alert-info, rather define a new class like this:

<div class="alert alert-custom" role="alert">This is a test alert</div>

then add to your CSS

.alert-custom { color: #004085; background-color: #cce5ff; border-color: #b8daff }

and better still, if you want to optimize, inline the style on the page(s) required, like this in the header:

<style>
.alert-custom { color: #004085; background-color: #cce5ff; border-color: #b8daff }
</style>

 

Share this post


Link to post
Share on other sites

Yes your right I just did a quick cut and paste so people had the css used in the stock to see what could be changed.

As to new classes 😂 been down that road and it did not go down well 😁 but never mind.

 


 

Share this post


Link to post
Share on other sites

Some people are still finding it hard to find what part needs to be changed.I was answering in PM but it's better discussed on the forum as it may help others.

Questioner was struggling to find how to change the hover colour on elements.

The hover is just another layer that need to be changed. So if you have a button say, success (your buy button) that is green #2B642B , it will have another color a bit diferent when you hover over it say light green #63ba63.

so lets say we have that button, this sets or changes its main color. (The color: #fff; is for the text on the button.)

.btn-success {
    color: #fff;
    background-color: #2B642B;
    border-color: #00b3db;
}

Now this sets or changes the hover color.

.btn-success:hover {
    color: #fff;
    background-color:#63BA63;       
    border-color: #285e8e;

Thats it, it's the same for any elament that changes when you hover over it with your mouse.

 

 

 


 

Share this post


Link to post
Share on other sites

If you do not wish to change color (text color), there is no need to include it in the stylesheet. In your example the core bootstrap.css already has it defined in white color.

Only the definitions which you wish to change need to be included in the stylesheet in user.css to overwrite the bootstrap core definitions.

Following this rule in a consequent way will keep your user.css smaller and save page load time.

Share this post


Link to post
Share on other sites
Posted (edited)

When it comes to making changes you can be as bold as you like! Try this.

.navbar-inverse {
    background: linear-gradient(#8F0808 0%, #F70505 100%);
}

and you get,

image.png.eed00463d2bc50692107dc1e99ceac33.png

so no need to stick to boring flat colors you can go wild if you like. This shows how to use the gradiant https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

with a few lines in user.css you can make your page look very individual. To chnage the very bottom footer extra use this,

.footer-extra {
    background: linear-gradient(#8F0808 0%, #F70505 100%);
}

To chnage the box tops to match use this,

.panel-default > .panel-heading {
        background: linear-gradient(#F70505 0%, #8F0808 100%);
 }

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites

The text in the navbar, footer extra, and box's in columns can be chaged using this ( all set to white ),

/* change text in navbar footer extra and box's on index page all set to white */

.navbar-inverse .navbar-nav > li > a {
    color:#ffffff;
}
 
.navbar-brand {
color: #ffffff;
}
.navbar-brand {
color: #ffffff;
}

.fa-shopping-cart {
color: #ffffff;
}

.navbar-text {
color: #ffffff;
}

.navbar-inverse .navbar-text {
    color: #ffffff;
}

.navbar-inverse .navbar-brand{
    color:#ffffff;
}    

.footer-extra {
    color: #ffffff;
}

.footer-extra A {
    color: #ffffff;
}    

.panel-default > .panel-heading {
    color: #ffffff;
}

.panel-heading > a {
color: #ffffff;
}


 

Share this post


Link to post
Share on other sites

These are the last few color changes, I personaly don't like changing the background from the stock white. It has too many issues as so many other items use the stock white.

Also changing nav and nav-pills will cause problems as they are used in several different containers and you will need to isolate them to stop affecting other areas.

 

/* welcome guest colors */
.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
}

/* breadcrumb */
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #b2dbe7;
    border-radius: 4px;
}

body {
  background-color: #f5f7f7;
}

.panel-body {
    background-color: #f9f9f9;
}

.thumbnail {
    background-color: #f9f9f9;
}

.footer {
    background: #f9f9f9;
}


 

Share this post


Link to post
Share on other sites

A word of caution when choosing colours for your website. Google looks for accessibility issues on websites and it may affect you ranking if you are found to be using colours that make it difficult for people to see your content. Things to consider is colour combinations , contrast and text colour and size. Remember just because you can see it fine does not mean other will. Google has some good guide lines you can follow.

https://developers.google.com/web/fundamentals/accessibility/


 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×