Latest News: (loading..)
Sam-AUST

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

15 posts in this topic

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

Share this post


Link to post
Share on other sites

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.

wai4u2my likes this

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

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

Tsimi likes this

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.

Share this post


Link to post
Share on other sites

@austcoll  adding

.productSpecialPrice  {
  color: red;
}

in user.css we done the job

Edited by Omar_one

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

In most browsers, Ctrl+F5 will force a page refresh (complete reload). You were probably using a cached CSS file.

burt and Tsimi like this

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