Sam-AUST Posted November 27, 2015 Share Posted November 27, 2015 Has anyone seen a tutorial published anywhere with a guide to changing the box colours and footer background etc in the bootstrap version of oscommerce? I'm happy with the layout, I just want to change the colours to suit my theme and to fit with the logo better but I have zero knowledge of css. With bootstrap oscommerce being so popular now I thought there'd be a page about it somewhere but I've had no luck finding one. Oooh, also the blue around the welcome text, how to change that as well. Link to comment Share on other sites More sharing options...
♥Tsimi Posted November 27, 2015 Share Posted November 27, 2015 @@Sam-AUST As far I know there is no "guide" or "tutorial" for customizing osC BS. Your catalog side in the osC BS version contains css files one is the bootstrap.css or bootstrap.min.css then there is the custom.css and the user.css. You want to apply any changes to the user.css only. Don't touch the other css files. As you already mentioned, Bootstrap is css based and requires some knowledge in that area. It is not really difficult, Bootstrap has many stuff pre-defined and you just need to use certain classes to show/activate those functions/features. For example what you call boxes is displayed in osC BS using the "panel" class. Now we need to look how such a panel is created. This here is your basic panel (sample code taken from the Bootstrap official site) <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div> now we look at the css to see where it gets its color from. .panel-default { border-color: #ddd; } .panel-default > .panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd; } now let's give the boxes a red header background with red borders. For that you need to add the following to your user.css .panel-default { border-color: #ff0000; } .panel-default > .panel-heading { color: #fff; background-color: #ff0000; border-color: #ff0000; } (* #fff; stands for white and #ff0000; stands for red. For more info regarding css color codes look here.) So know when you reload your shop page you should have all boxes red colored. Be aware that all boxes that use the "panel-default" class will have that red color. The blue background for the welcome message that you mentioned uses the alert alert-info class. Now we could do the same as we did with the boxes but that would change the alert-info class which is used in various places in the shop. So what we could do is add a new class to it and give it a new css definition. Let's look at the code that generates that message part. (index.php around line 264) <div class="alert alert-info"> <?php echo tep_customer_greeting(); ?> </div> now we add a new class to it in this case "test". This is what we call a core code change which is usually not recommended but adding a class like this now is rather a small change and can be accepted. <div class="alert alert-info test"> <?php echo tep_customer_greeting(); ?> </div> now again inside the user.css add this code .test { color: #000; /* color for the text */ background-color: #b1ffb1; border-color: #007600; } now refresh your page and you should see a light green background with dark green border. As you can see css is very simple and thanks to Bootstraps pre-defined classes you can nicely customize your shop. Here a couple of useful links that might help you in near future. Color codes Bootstrap Official Site Tips and Tricks for Bootstrap stuff (*the custom button part might be useful.) There are so many more helpful sites out there, just search using google. Or if you need something specific just search like this "how to change xxxx in Bootstrap" and then you should get some good results. And if all should fail you can always post here in the forum there are a couple of css cracks here that sure can help you out. Link to comment Share on other sites More sharing options...
baulie38 Posted November 27, 2015 Share Posted November 27, 2015 A little hint, in Firefox go to Tools > Web Developer > Inspector and yo can see on the right site the css classes. These you can change easily in the user.css. Link to comment Share on other sites More sharing options...
♥kymation Posted November 27, 2015 Share Posted November 27, 2015 You can also use one of the many online Bootstrap theme generators to create a theme with your colors. Then you just replace the existing theme CSS file with your new one, or use Theme Switcher to change the theme. Regards Jim See my profile for a list of my addons and ways to get support. Link to comment Share on other sites More sharing options...
MrPhil Posted November 28, 2015 Share Posted November 28, 2015 As mentioned before, it's best to make your changes in user.css so that they're not overwritten on the next osC update. You need to use the same "selectors" (e.g., a class name such as .panel-default), but only need to enter the property/ies (e.g., border-color) that you're changing (actually, overriding what was set before). Every other property will be inherited from what was set before. If you find that too many things on-screen change colors when you add a suggested entry to user.css, you would have to dig deeper, which requires either more complex selectors to narrow down which element the change will apply to, or if that is not possible, to make a core code change to add a new class (as suggested previously) or even a new "id". It is preferable not to make core code changes, but to make a complex selector (e.g., a chain of class names as direct descendants), and this will require somewhat advanced CSS skills (start learning!). Link to comment Share on other sites More sharing options...
Sam-AUST Posted November 28, 2015 Author Share Posted November 28, 2015 Thank you so much for your responses, much appreciated =) Link to comment Share on other sites More sharing options...
austcoll Posted September 24, 2017 Share Posted September 24, 2017 Hi All, Can some one please tell me how I can change the Sale Price color from black to red in DS Edge? perhaps in user.css, but what exactly I have to do? Cheers Mitchell Link to comment Share on other sites More sharing options...
MrPhil Posted September 24, 2017 Share Posted September 24, 2017 You need to examine the page HTML (in your browser), and determine a unique selector path (ids, classes, elements) that marks the element you want to change. Let's say, it has an id="SalePrice" in the element. Then in user.css, #SalePrice { color: red; } The hard part is finding a selector path that doesn't hit unwanted elements. Link to comment Share on other sites More sharing options...
Omar_one Posted September 24, 2017 Share Posted September 24, 2017 @austcoll adding .productSpecialPrice { color: red; } in user.css we done the job Get the latest Responsive osCommerce CE (community edition) here . Link to comment Share on other sites More sharing options...
austcoll Posted September 24, 2017 Share Posted September 24, 2017 Hi I added that but nothing happened, still black Cheers Link to comment Share on other sites More sharing options...
Omar_one Posted September 24, 2017 Share Posted September 24, 2017 @austcoll try clearing up the browser cache Get the latest Responsive osCommerce CE (community edition) here . Link to comment Share on other sites More sharing options...
austcoll Posted September 24, 2017 Share Posted September 24, 2017 i did many times but perhaps it happens after a couple of hours. Thank you again Link to comment Share on other sites More sharing options...
terrielee Posted December 4, 2017 Share Posted December 4, 2017 I am new to Bootstrap and I was wondering what I am supposed to do to activate the user.css. Nothing that I add to this file shows any alterations to my site. I am testing Responsive 2.3.4 GOLD in Xampp, just in case there is something there that may cause a problem. Cheers! Link to comment Share on other sites More sharing options...
terrielee Posted December 4, 2017 Share Posted December 4, 2017 Never mind. It appears to be a browser problem. The browser point blank refuses to refresh but when opened in another browser the changes show. Thanks. Link to comment Share on other sites More sharing options...
MrPhil Posted December 4, 2017 Share Posted December 4, 2017 In most browsers, Ctrl+F5 will force a page refresh (complete reload). You were probably using a cached CSS file. Link to comment Share on other sites More sharing options...
tornrawks Posted December 12, 2017 Share Posted December 12, 2017 I was going to start a new thread, but thought this was a better place as it is already dealing with the CSS over-rides we can do with user.css I've got most of the changes I think I want/need. There is one I really cannot figure out....I am hoping someone much more knowledgeable can jump in and help me. It is in the shipping selection....specifically the table-striped / and table-hover area. Due to my background image, I don't want the alternating shipping choices to have the transparent/clear background. I want them all to have the white background. The "clear" ones turn that way on mouse-over/hover but I can't figure out what to put in my user.css as I can't pinpoint the hover/non-hover background color part that I need. Thank you! Link to comment Share on other sites More sharing options...
♥John W Posted December 12, 2017 Share Posted December 12, 2017 If you only want to do this in the checkout_shipping page then look for this code in checkout_shipping.php, and it should be around line 239. If you don't want the hover or the striped, change it. However, it may confusing to your shoppers if it doesn't hover. It's best if you have a test site to experiment with. <table class="table table-striped table-condensed table-hover"> I'm not really a dog. Link to comment Share on other sites More sharing options...
tornrawks Posted December 12, 2017 Share Posted December 12, 2017 It's not that I mind the hover...I'm trying to set the background (not being hovered) to a constant value for ALL shipping methods.....then I need to set the hover color to be a variation. I just can't get the tags right for the user.css for this purpose. Doing it without any core changes is also a goal. Link to comment Share on other sites More sharing options...
♥John W Posted December 12, 2017 Share Posted December 12, 2017 You can do a lot of customization with the bootstrap customizer. I modified a lot using it, but it will be site wide. Here's the tables on it. https://getbootstrap.com/docs/3.3/customize/#tables I'm not really a dog. Link to comment Share on other sites More sharing options...
tornrawks Posted December 12, 2017 Share Posted December 12, 2017 39 minutes ago, John W said: You can do a lot of customization with the bootstrap customizer. I modified a lot using it, but it will be site wide. Here's the tables on it. https://getbootstrap.com/docs/3.3/customize/#tables Alright. I over-complicated it all obviously. Thanks for the link. All I had to do was define .table-striped { background-color: white; } is user.css - I don't see anywhere else on the site where this causes an issue...yet at least. Solved. Thanks again :) Link to comment Share on other sites More sharing options...
AAWISDOM Posted August 26, 2018 Share Posted August 26, 2018 I am new to Bootstrap CSS. Does anyone know the selector names to change: 1. "header blackbar above search" (I wanna put a background image to it) 2. "navigation guidebar" (I wanna put a background image to it) 3. "greeting visitorsbar" (I wanna put a background image to it) 4. "footer background" (I wanna put a background image to it)? I attached images to clarify what I am talking about. My site URL: https://aaw.link/plaza/aaw-public/index.php Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 26, 2018 Share Posted August 26, 2018 You just need to fins the relavent section in your browser tools and extract the css you need. Only make changes to user.css. This is a full list of the sections you asked for only add the parts you need to change. Greeting footer footer-extra Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 26, 2018 Share Posted August 26, 2018 Not able to post all css so see attached file css.txt Link to comment Share on other sites More sharing options...
tgely Posted August 26, 2018 Share Posted August 26, 2018 https://www.bootstrap-live-customizer.com/ osCommerce based shop owner with minimal design and focused on background works. When the less is more.Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store. Link to comment Share on other sites More sharing options...
♥JcMagpie Posted August 26, 2018 Share Posted August 26, 2018 removed Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.