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

@JcMagpie @Hotclutch @raiwa  Hi all there,

Thanks for this post, it is really helpful.... although it is about the colour change with css, not sure if it is ok to ask also about the position.
In my case example, i have the video on header section with text set up as center, with advise I use firefox inspect element and found that breadcrum and the header all under .view and set as center.
I like the text on header video stay in the center, but if with the current css setting, the breadcrum bar with text "HOME icon / catalog" will also stay as center, which I need it to be left align...

Not sure yet how to save the change from the the inspect element tool and save it to user.css yet cause need to figure out how it works for div within div and custom class first...

How can I assign a new custom .view for seperated breadcrum and header video part?

image.png.dd226a5f183de83dedbaa3f07a21d76f.png

=========================================================================


<div 1 center>
   <div 2 left>
     <div 3 right>
        <div 4 left>
       </div>
    <div>
  <div>
<div>

if i have the code in <div 4> set as left, will it stay as left or it will be center as <div 1 center>? If it will be in center, how can i make change so it stay as left for only breadcrum area?
Many many thanks!  Lyn

Edited by ce7

Share this post


Link to post
Share on other sites

You should be able to do all this with css, If the header css is causing the breadcrum to center then thats a problem with the header video code! find the <center> hard coded in the video code and remove it and make sure the video is using a new classs or has it's own id, then set the center using that new class or id in user.css

It would be much easer if you just post link then the code can be checked.

To save changes from the inspect element simply copy the updated css into your user.css.


 

Share this post


Link to post
Share on other sites

Try simply adding the (text-align: left; ) to your user.css this should work without having to touch any other code.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #b2dbe7;
    border-radius: 4px;
    text-align: left;

 

Edited by JcMagpie

 

Share this post


Link to post
Share on other sites
On 8/28/2018 at 2:42 PM, raiwa said:

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.

Colors are a special case. It is generally recommended that you explicitly set both the foreground and background colors together, so you don't get surprised by black-on-black or other unreadable combinations. That is, if you set one, set the other, too, just to be sure.

Regarding getting dinged for accessibility issues, you should watch out for color combinations that could cause problems for people with color blindness (e.g., green text on a light gray background). Also watch out for contrast problems (as we get older, we tend to need higher contrast). Also never, never, never mix red and blue -- your eye can't focus on both at once, and this causes eyestrain.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get (stable) Frozen or (unstable) Edge. See also the naming convention and the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites

To help better understand some of the css in CE you need to see the css in a readable format. Only make changes in your user.css.

This is custom.css

/* DO NOT CHANGE THIS FILE -------------------------------------------------- */


/* TO OVER-RIDE ANY ASPECT OF THIS CSS, AMEND THE user.css FILE ------------- */

li.newItemInCart,
li.newItemInCart A {
    color: #a94442;
}

.form-control {
    margin-bottom: 5px;
    display: inline;
}

.page-header h1 del {
    font-size: 0.5em;
}

.productHolder {
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 4px;
    -webkit-transition: border .5s ease-in-out;
    -o-transition: border .5s ease-in-out;
    transition: border .5s ease-in-out;
}

.productHolder:hover {
    border: 1px solid #428bca;
}

.productHolder h2 {
    font-size: 1.3em;
}

.item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    border: none;
}

.item.list-group-item img {
    float: left !important;
    margin-right: 10px !important;
}

.grid-group-item {
    margin-bottom: 20px;
}

.grid-group-item .list-group-item-text {
    display: none;
}

p.lead del {
    font-size: 0.5em;
}

#bodyContent .img-responsive,
#columnLeft .img-responsive,
#columnRight .img-responsive {
    margin-left: auto;
    margin-right: auto;
}

.stepwizard {
    margin-top: 20px;
}

.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 100%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-index: 0;
}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
    width: 33%;
}

.btn-circle {
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
    line-height: 1.428571429;
    border-radius: 15px;
}

.pagenav {
    position: relative;
    top: -25px;
    left: 3px;
    height: 40px !important;
}

.pagenumber {
    margin-bottom: 7px;
}

.reviews blockquote p {
    font-size: 0.8em;
}

.text-left-not-xs,
.text-left-not-sm,
.text-left-not-md,
.text-left-not-lg {
    text-align: left;
}

.text-center-not-xs,
.text-center-not-sm,
.text-center-not-md,
.text-center-not-lg {
    text-align: center;
}

.text-right-not-xs,
.text-right-not-sm,
.text-right-not-md,
.text-right-not-lg {
    text-align: right;
}

.text-justify-not-xs,
.text-justify-not-sm,
.text-justify-not-md,
.text-justify-not-lg {
    text-align: justify;
}

@media (max-width: 767px) {
    .text-left-not-xs,
    .text-center-not-xs,
    .text-right-not-xs,
    .text-justify-not-xs {
        text-align: inherit;
    }
    .text-left-xs {
        text-align: left;
    }
    .text-center-xs {
        text-align: center;
    }
    .text-right-xs {
        text-align: right;
    }
    .text-justify-xs {
        text-align: justify;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .text-left-not-sm,
    .text-center-not-sm,
    .text-right-not-sm,
    .text-justify-not-sm {
        text-align: inherit;
    }
    .text-left-sm {
        text-align: left;
    }
    .text-center-sm {
        text-align: center;
    }
    .text-right-sm {
        text-align: right;
    }
    .text-justify-sm {
        text-align: justify;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .text-left-not-md,
    .text-center-not-md,
    .text-right-not-md,
    .text-justify-not-md {
        text-align: inherit;
    }
    .text-left-md {
        text-align: left;
    }
    .text-center-md {
        text-align: center;
    }
    .text-right-md {
        text-align: right;
    }
    .text-justify-md {
        text-align: justify;
    }
}

@media (min-width: 1200px) {
    .text-left-not-lg,
    .text-center-not-lg,
    .text-right-not-lg,
    .text-justify-not-lg {
        text-align: inherit;
    }
    .text-left-lg {
        text-align: left;
    }
    .text-center-lg {
        text-align: center;
    }
    .text-right-lg {
        text-align: right;
    }
    .text-justify-lg {
        text-align: justify;
    }
}

.footer {
    background: #eee;
    border-top: 2px solid #ddd;
}

.footer .footerbox {
    padding: 10px 10px 0px 10px;
}

.footer-extra {
    background: #111;
    color: silver;
    line-height: 3;
}

.footer-extra A {
    color: silver;
}

.footer h2 {
    padding: 0;
    margin: 0;
    font-size: 1em;
    letter-spacing: 0.1em;
    color: rgb(142, 11, 0);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.contact {
    border-left: 1px solid #ddd;
}

.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    right: 25px;
    margin-left: -1.5px;
}

.timeline > li {
    margin-bottom: 20px;
    position: relative;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li:before,
.timeline > li:after {
    content: " ";
    display: table;
}

.timeline > li:after {
    clear: both;
}

.timeline > li > .timeline-panel {
    width: calc( 100% - 75px);
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
}

.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}

.timeline > li > .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    right: 0px;
    margin-left: -25px;
    background-color: #999999;
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p .timeline-body > ul {
    margin-bottom: 0;
}

.timeline-body > p + p {
    margin-top: 5px;
}

.timeline-body blockquote {
    font-size: 1em;
}

.navbar-no-corners {
    border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-left: none;
    border-right: none;
}

.navbar-no-margin {
    margin-bottom: 0 !important;
}

.searchbox-margin {
    margin-top: 10px;
    margin-bottom: 10px;
}

.form-control-feedback {
    padding-right: 2%;
}

@media (max-width: 767px) {
    .navbar-text {
        padding-left: 15px!important;
    }
}

.row.list-group {
    display: flex;
    flex-flow: row wrap;
}

.row.list-group.container:after,
.row.list-group.container:before,
.row.list-group.row:after,
.row.list-group.row:before {
    content: normal
}

.row.list-group {
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
}

@media only screen and (max-width: 768px) {
    .row.list-group {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
}

.filter-list {
    height: 20px;
    margin-top: 10px;
}

@media (min-width: 767px) {
    .filter-list {
        width: 300px;
        float: left;
        margin-left: 10px;
        margin-right: 10px;
    }
}

 


 

Share this post


Link to post
Share on other sites

Hi all,

It is me coming back again. Before I uninstalled my current video header module and install JcMagpie's few great addons, i play with css and try to get more understanding how it works. I used the inspect tool and adjust 3 modules (Hotline module/ Shop by price module/ Search module)  on header section, here is the adjusted result:

 /* BOF this is Shop by price Grey text font-area */
.input-group-addon {
	    padding: 14px 14px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
        border-right-color: rgb(204, 204, 204);
        border-right-style: solid;
        border-right-width: 1px;
    border-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
}
/* EOF this is Shop by price Grey text font-area */
	
/* BOF this is Shop by price Drop Down area */
.form-control {
	    display: block;
    width: 100%;
    height: 34px;
    padding: 14px 10px;
    font-size: 18px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
        border-top-color: rgb(204, 204, 204);
        border-right-color: rgb(204, 204, 204);
        border-bottom-color: rgb(204, 204, 204);
        border-left-color: rgb(204, 204, 204);
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/* EOF this is Shop by price Drop Down area */
	/* BOF this is Search bar area */
.form-control {
	    display: block;
    width: 100%;
    height: 53px;
    padding: 14px 10px;
    font-size: 18px;
    line-height: 1.8;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
/* EOF this is Search bar area */

I can change the button, font size, and search drop down size, but i just can not change their vertical position, I want to make them align with breadcrum bottom container, but can't find the way to do it.....

If ignored the position question, just with the style modification, I thought I copy this and past it on user.css file, it should update the website but it doesn't seem doing any change. Did I do anything wrong?

There are 3 css file that been read for the website within inspect tool:

===========================================
bootstrap.min.css
user.css:33  (not sure what the number mean in inspect tool...)
style.css (this is the one for header video style)
===========================================
I read other post said that should not touch any bootstrap css files, instead update to user.css, it doesn't change anything in my case, not sure why?
And if any other extra css like style.css here, do i go to update style.css or i also update with user.css?

Many thanks!  Lyn

Edited by ce7

Share this post


Link to post
Share on other sites

You need to find the right class controling these, Also you will need to give them a new class or ID or you will change all buttons, css is cascading so make sure you only call the same class once in your user.css or you will simpy over write each time and hence see no change. Also once you make a change you ned to clear your browser cache or you may not see the changes.

Positioning of the buttons and other stuff is down to playing with the order and width in admin. You can only fit so much on one line( one line is only 12 wide do you can have 2 at 6 wide or 3 at 4 wide and so on.

image.png.ea3fe07b80d32f7d48b8115dd5f375ad.png

/* BOF this is Shop by price Grey text font-area */
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #1f60ed;
    text-align: center;
    background-color: #95f092;
    border: 1px solid #ccc;
        border-right-color: rgb(204, 204, 204);
        border-right-style: solid;
        border-right-width: 1px;
    border-radius: 4px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
	}
	
/* first button  you need to give this a new id or all will change*/	
	button.btn.btn-info.hidden-xs {
    background-color: red;
}

/* Skype button  you need to give this a new id or all will change*/
.btn-info {
    color: #fff;
    background-color: #5bde65;
    border-color: #46b8da;
}

 


 

Share this post


Link to post
Share on other sites
1 hour ago, SRobertson said:

This looks like a foreign language to me.

😊 But of course it will, after all it’s in the queens English!


 

Share this post


Link to post
Share on other sites
14 hours ago, SRobertson said:

And this is why I hire a web designer... This looks like a foreign language to me.

I wish I had your money to pay someone to make basic colour changes to my site. I may not be able to code, but I can do the basics.


REMEMBER BACKUP, BACKUP AND BACKUP

Before installing the official version of oscommerce first look at a responsive version here

It's very easy to over complicate what are simple things in life

Share this post


Link to post
Share on other sites

Each module has its own unique css class which you can use to change the background color or any other style.

Have a look into the template file, the header logo even has 2:

cm-header-logo storeLogo

use them to define a customized class in user.css

 

Edited by raiwa

Share this post


Link to post
Share on other sites

@raiwa

..but how can i change the background here?

<div id="storeLogo" class="col-sm-<?php echo $content_width; ?> cm-header-logo storeLogo">
  <?php echo '<a href="' . tep_href_link('index.php') . '">' . tep_image('images/' . STORE_LOGO, htmlspecialchars(STORE_NAME)) . '</a>'; ?>
</div>

 

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

×