Jump to content
Latest News: (loading..)
Sam-AUST

Anyone know of a guide with the code to change box colors in Bootstrap Oscommerce?

Recommended Posts

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.

Edited by Sam-AUST

Share this post


Link to post
Share on other sites

@@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.

Edited by Tsimi

When you ask for help/support:

  • Always state your osCommerce version
  • If possible, list up installed add-ons
  • 3rd party templates are not supported in the forum

Latest osC: osCommerce CE (Community Edition aka. Edge)

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!).


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Edge" release

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :)

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

×