Making Color changes to your site

[♥raiwa 922]

add in user.css:

.cm-header-logo {
	background-color:#000;
}

of course replace #000 by the color you wish.

 

[♥stratula 3]

These changes in the user.css are not display in google chrome but it does in ie explorer.

I tried also some of the changes from JcMagpie and it has the same result, not in chrome but in ie explorer it does.

[♥JcMagpie 1,220]

The changes have nothing to do with browser just make sure you are clearing your cache in chrome.

Edited November 20, 2018 by JcMagpie

[♥14steve14 441]

If clearing your browser cache does not work you host may have some form of caching on your server that may need clearing.

[♥JcMagpie 1,220]

For those that struggle to make changes using css, this add-on my be of some use. It allows you to change most colours in admin.

 

 

 

[♥stratula 3]

For any change in user.css the chrome cache has to be cleared.

...slowly i get used to the latest CE ☺️

Thank you all for help!

Edited November 23, 2018 by stratula

[sunshynecraftsbeads 4]

On 8/27/2018 at 1:07 AM, JcMagpie said:

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.

 

 

 

Hi,

I am currently working with version  2.3.4.1 CE.

I attempted changing the color of my "view" & "buy" buttons. In my user.css I did it exactly how it was posted here but for some reason it did not work. All I really did was change the color code (see below). I cleared my cache just in case that was the problem but I am still stuck with the grey & green buttons.

.btn-success {
 background-color: #395c82;
border-color: #395c82;
}

.btn-success:hover {
    background-color:#3399f3;       
    border-color: #3399f3;
}

 

Did I miss something ? Any advise would be greatly appreciated and thank you for your post.

[♥JcMagpie 1,220]

best to post or pm link to allow check.

just made change to you buy button and it worked fine.

check the css you are using for errors also you may need to add

 

 

Edited February 15 by JcMagpie

[sunshynecraftsbeads 4]

27 minutes ago, JcMagpie said:

best to post or pm link to allow check.

just made change to you buy button and it worked fine.

check the css you are using for errors also you may need to add

 

 

 

27 minutes ago, JcMagpie said:

best to post or pm link to allow check.

just made change to you buy button and it worked fine.

check the css you are using for errors also you may need to add

 

 

Hi Zahid,

I am using a the user.css that was recommended for making changes. It was blank prior to me adding the code mentioned above so I thought it would work. If I go to my website www.sunshynecraftsbeads.com ,   I can right click and change the colors buttons in the Inspect Element to see what the new color looks like but that does not work when I am trying to change the button codes as a whole.

You said "  check the css you are using for errors also you may need to add "

Is there another css I should me making the changes to &/or is there something I need to add ?

 

Thanks again.

[♥multimixer 325]

Try to add following additional to the rules you added

.btn-success,
.btn-success:hover{
  background-image:none;
}

Edit

Looking further, the reason for the problem is following link to a css file that comes after the link to the user.css file in your template_top.php

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

Why you have this is something only you know, I believe however that user.css should be the last one linked in order to overwrite any previous rules

Edited February 15 by multimixer

[sunshynecraftsbeads 4]

9 minutes ago, multimixer said:

Try to add following additional to the rules you added

.btn-success,
.btn-success:hover{
  background-image:none;
}

 

Hi George,

This is what it looks like now in my user.css. Unfortunately that did not work either though but thank you for your time. Maybe I just need to change my website to green lol.

.btn-success {
 background-color: #395c82;
border-color: #395c82;
}

.btn-success,
.btn-success:hover{
  background-image:none;
}

.btn-success,
.btn-success:hover{
  background-image:none;
}

 

[♥multimixer 325]

Look at my edit on previous post please

18 minutes ago, multimixer said:

Looking further, the reason for the problem is following link to a css file that comes after the link to the user.css file in your template_top.php

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

 Why you have this is something only you know, I believe however that user.css should be the last one linked in order to overwrite any previous rules

 

[sunshynecraftsbeads 4]

10 minutes ago, multimixer said:

Look at my edit on previous post please

 

Sorry you are much quicker than I. I am sorry you had to send the message twice. The code that you mentioned must be from when I added the theme switcher add on to my website. I am using the "spacelab" theme. I just upgraded to the 2.3.4.1 CE version a while back and have very few add ons on it to date so this must be the problem. Should I remove the theme switcher add on then?

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

[♥JcMagpie 1,220]

As has been pointed out already you have an issue with your code.

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

CSS is for "cascading style sheets" in that one overrule's the last and as your user.css is not the last any changes you are making are being overwriten.

your custom.css and user.css should be the last 2 in the list of sylesheets.

Edited February 15 by JcMagpie

[♥JcMagpie 1,220]

Or if you must have it some other way  you can do this ,

.btn-success {
 background-color: #395c82 !important;
border-color: #395c82 !important;
}

but best to put sheets in correct order.

Edited February 15 by JcMagpie

[♥JcMagpie 1,220]

Try this,

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

but why you have 2 ext/bootstrap/css/bootstrap.min.css  is odd!

[sunshynecraftsbeads 4]

7 minutes ago, JcMagpie said:

Try this,

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

but why you have 2 ext/bootstrap/css/bootstrap.min.css  is odd!

Nothing has worked so I have removed the theme switcher and the button colors are now blue. Now I will make the appearance of my website manually versus using themes.

Thank you for your help. It is greatly appreciated.

[♥JcMagpie 1,220]

You may like to take a look at this, it allows you to make color changes inside admin.

https://apps.oscommerce.com/buzoF&jcm-color-brand-v1-0&p=4

[Hotclutch 129]

11 hours ago, sunshynecraftsbeads said:

Hi,

I am currently working with version  2.3.4.1 CE.

I attempted changing the color of my "view" & "buy" buttons. In my user.css I did it exactly how it was posted here but for some reason it did not work. All I really did was change the color code (see below). I cleared my cache just in case that was the problem but I am still stuck with the grey & green buttons.

.btn-success {
 background-color: #395c82;
border-color: #395c82;
}

.btn-success:hover {
    background-color:#3399f3;       
    border-color: #3399f3;
}

 

Did I miss something ? Any advise would be greatly appreciated and thank you for your post.

Trying to change button colours by editing user.css is not the best way to go. Bootstrap CSS is complex for the average user, and you need to make a lot of changes in a lot of places to pull it off, which have not been mentioned here BTW. 

Since you were trying to change the button colour to blue (#395c82), the simplest way is to use a class already defined, btn-primary. After that, it is better to define a custom button class and use it where you want to. Then you can still use the btn-success class if needed.

 

[ArtcoInc 289]

@sunshynecraftsbeads

21 hours ago, sunshynecraftsbeads said:

Nothing has worked so I have removed the theme switcher and the button colors are now blue. Now I will make the appearance of my website manually versus using themes.

A couple of things ...

1) Which version of osCommerce are you running? All recent versions of the Community Edition (up through Frozen) are running Bootstrap v3. Only the newest experimental 'Edge' version(s) are running Bootstrap v4.

2) I tried to look up the Spacelab theme you say you are/were using. Is it the one offered by Bootswatch? If so, did you make sure that you downloaded the correct version for the version of Bootstrap you are running on your shop? According to their site, their theme is tuned for Bootstrap v4, with versions available for Bootstrap v2 and v3.

3) As others have pointed out, if you want to be able to use your user.css file to make adjustments to your site, it needs to be the LAST .css file called. So, if the instruction to install the Spacelab theme said to do this:
 

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

you will have the problem that others here have described. The user.css file MUST be called last. To resolve that, you need to move calling the Spacelab .css file to BEFORE your user.css file:

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<link href="custom.css" rel="stylesheet">
<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

Or, as you have already done, you can drop the Spacelab theme all together.

HTH

M

[sunshynecraftsbeads 4]

2 hours ago, ArtcoInc said:

@sunshynecraftsbeads

A couple of things ...

1) Which version of osCommerce are you running? All recent versions of the Community Edition (up through Frozen) are running Bootstrap v3. Only the newest experimental 'Edge' version(s) are running Bootstrap v4.

2) I tried to look up the Spacelab theme you say you are/were using. Is it the one offered by Bootswatch? If so, did you make sure that you downloaded the correct version for the version of Bootstrap you are running on your shop? According to their site, their theme is tuned for Bootstrap v4, with versions available for Bootstrap v2 and v3.

3) As others have pointed out, if you want to be able to use your user.css file to make adjustments to your site, it needs to be the LAST .css file called. So, if the instruction to install the Spacelab theme said to do this:
 

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<link href="custom.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">

you will have the problem that others here have described. The user.css file MUST be called last. To resolve that, you need to move calling the Spacelab .css file to BEFORE your user.css file:

<link href="ext/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<link href="custom.css" rel="stylesheet">
<link href="ext/bootstrap/spacelab/bootstrap.min.css" rel="stylesheet">
<link href="user.css" rel="stylesheet">

<script src="ext/jquery/jquery-3.3.1.min.js"></script>

Or, as you have already done, you can drop the Spacelab theme all together.

HTH

M

Hi,

1. I am currently working with version  2.3.4.1 CE.

2. The Spacelab theme is one of the theme included with the theme switcher 1.5.4 addon with about 8 other themes. Yes, updated the Bootstrap version to work with the latest Edge release. This should still work with any previous version of Edge, but I haven't tested them all.

3. I have removed the theme switch addon as previously noted because this seemed to be the css problem as pointed out to me.

JcMagpie  provided me with a link so I am going to look into that and see what I can do with my site.

 

Thank you for responding and thank you for your advise & imput.