♥raiwa Posted November 20, 2018 Share Posted November 20, 2018 add in user.css: .cm-header-logo { background-color:#000; } of course replace #000 by the color you wish. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
stratula Posted November 20, 2018 Share Posted November 20, 2018 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted November 20, 2018 Author Share Posted November 20, 2018 The changes have nothing to do with browser just make sure you are clearing your cache in chrome. Link to comment Share on other sites More sharing options...
♥14steve14 Posted November 21, 2018 Share Posted November 21, 2018 If clearing your browser cache does not work you host may have some form of caching on your server that may need clearing. REMEMBER BACKUP, BACKUP AND BACKUP Link to comment Share on other sites More sharing options...
♥JcMagpie Posted November 21, 2018 Author Share Posted November 21, 2018 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. Link to comment Share on other sites More sharing options...
stratula Posted November 23, 2018 Share Posted November 23, 2018 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! Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 15, 2019 Share Posted February 15, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted February 15, 2019 Author Share Posted February 15, 2019 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 Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 15, 2019 Share Posted February 15, 2019 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. Link to comment Share on other sites More sharing options...
multimixer Posted February 15, 2019 Share Posted February 15, 2019 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 My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 15, 2019 Share Posted February 15, 2019 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; } Link to comment Share on other sites More sharing options...
multimixer Posted February 15, 2019 Share Posted February 15, 2019 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 My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 15, 2019 Share Posted February 15, 2019 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"> Link to comment Share on other sites More sharing options...
♥JcMagpie Posted February 15, 2019 Author Share Posted February 15, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted February 15, 2019 Author Share Posted February 15, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted February 15, 2019 Author Share Posted February 15, 2019 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! Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 15, 2019 Share Posted February 15, 2019 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. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted February 15, 2019 Author Share Posted February 15, 2019 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 Link to comment Share on other sites More sharing options...
Hotclutch Posted February 16, 2019 Share Posted February 16, 2019 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. Link to comment Share on other sites More sharing options...
ArtcoInc Posted February 16, 2019 Share Posted February 16, 2019 @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 Link to comment Share on other sites More sharing options...
sunshynecraftsbeads Posted February 16, 2019 Share Posted February 16, 2019 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.