[SOLVED] Design help 3.0.3.9 - Product page

ggrant3 wrote: ↑

Wed Jun 05, 2024 4:49 am

OC 3.0.3.9

On the product page, under the item image area are two tabs - "Description" and "Reviews"

I've played around with the stylesheet to change some colors and I want to make some changes to the text and probably the background of those tabs too, to make it easier to see what it says. But I have not been able to find out which part of the stylesheet those tab colors are located. Does anyone know?

Also, in the upper right corner there is a bar that shows the contents of the shopping cart. Again I've been able to change the color but when you hover over it, the text turns black and I can't figure out where I go to change that hover color.

/* Sets text colour of non-active tabs to magenta */
.nav-tabs>li>a {
    color: magenta;
}
/* Sets text colour of currently-selected or active tabs to blue */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: blue;
}

/* Sets the border colour of the tab to black when it is hovered */
.nav-tabs>li>a:hover {
    border-color: #000000;
}
/* Sets the background colour of the tab to pink when it is hovered */
.nav>li>a:focus, .nav>li>a:hover {
    background-color: pink;
}

.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
    background-color: #222222;
    background-image: linear-gradient(to bottom, #333333, #111111);
}

#cart .btn-inverse:hover, #cart .btn-inverse:active, #cart .btn-inverse.active, #cart .btn-inverse.disabled, #cart .btn-inverse[disabled] {
    background-color: #222222;
    background-image: linear-gradient(to bottom, #333333, #111111);
}

ggrant3 wrote: ↑

Wed Jun 05, 2024 4:49 am

But I have not been able to find out which part of the stylesheet those tab colors are located.

softmonke wrote: ↑

Wed Jun 05, 2024 6:16 pm

For the "Description" and "Reviews" tabs, it is using Bootstrap's default CSS style. So you just have to overwrite Bootstrap's default CSS style in your "stylesheet.css" file. Assuming you're using Chrome, you can right-click and click on "Inspect Element" on the tabs to look at the classes/elements that the CSS is targeting and copy them and add them to "stylesheet.css".

For example, to change the text colour of the tabs:

Code: Select all

/* Sets text colour of non-active tabs to magenta */
.nav-tabs>li>a {
    color: magenta;
}
/* Sets text colour of currently-selected or active tabs to blue */
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: blue;
}

And then to change the background colour when hovering over tabs, there are two parts: one is the border of the tab, and one is the background of the tab:

Code: Select all

/* Sets the border colour of the tab to black when it is hovered */
.nav-tabs>li>a:hover {
    border-color: #000000;
}
/* Sets the background colour of the tab to pink when it is hovered */
.nav>li>a:focus, .nav>li>a:hover {
    background-color: pink;
}

For the cart button at the top-right corner, you have to modify this CSS style in "stylesheet.css":

Code: Select all

.btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
    background-color: #222222;
    background-image: linear-gradient(to bottom, #333333, #111111);
}

Make sure to change both background-color and background-image properties. Otherwise, if you don't want a gradient background colour upon hovering, you should remove the background-image property. But do note that this will change all buttons that are using the "btn-inverse" class. To target only the cart button, you should include the ID "cart", like below:

Code: Select all

#cart .btn-inverse:hover, #cart .btn-inverse:active, #cart .btn-inverse.active, #cart .btn-inverse.disabled, #cart .btn-inverse[disabled] {
    background-color: #222222;
    background-image: linear-gradient(to bottom, #333333, #111111);
}