Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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.

Link to comment
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.

Link to comment
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.

Link to comment
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!).

Link to comment
Share on other sites

  • 1 year later...

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

  • 2 months later...

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

  • 2 weeks later...

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

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

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

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

  • 8 months later...

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

BlackBarAboveSearch.JPG

GreetingBar.JPG

FooterBackground.JPG

NavigationGuideBar.JPG

Link to comment
Share on other sites

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

:blink:
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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...