Author Topic: Product tab color and background  (Read 534 times)

Offline user88

  • Jr. Member
  • **
  • Posts: 96
  • Karma: +16/-0
    • View Profile
    • Visit my website
Product tab color and background
« on: January 31, 2021, 09:52:22 PM »
Hi everyone,

On my site, the product tabs are not easily recognized. They kind of get lost in the background, especially my "downloads" tab.

How can I change the tab background and / or text color to make product tabs more identifiable?

Offline Basara

  • Administrator
  • Hero Member
  • *****
  • Posts: 4983
  • Karma: +257/-2
    • View Profile
Re: Product tab color and background
« Reply #1 on: February 01, 2021, 01:18:28 AM »
Hello.
The attribute CSS selectors may help you
Code: [Select]
li > a[href="#review"] {
    background-color: aquamarine;
}

Offline user88

  • Jr. Member
  • **
  • Posts: 96
  • Karma: +16/-0
    • View Profile
    • Visit my website
Re: Product tab color and background
« Reply #2 on: February 17, 2021, 03:56:59 PM »
Hi Basara,

I looked for that code in my style.css for my theme and couldn't find it. Should I add this as a new line in the style.css of my theme file? Or does it go elsewhere?

Offline user88

  • Jr. Member
  • **
  • Posts: 96
  • Karma: +16/-0
    • View Profile
    • Visit my website
Re: Product tab color and background
« Reply #3 on: February 26, 2021, 03:21:12 PM »
Hi,

If anyone knows how to change the background color in product page tabs (Description / Reviews / Related products / Downloads), I would appreciate if you would explain me how or at least point me to the right file and code that modifies those tabs. I haven't been able to figure it out.

Thanks

Offline llegrand

  • Hero Member
  • *****
  • Posts: 1676
  • Karma: +481/-4
    • View Profile
Re: Product tab color and background
« Reply #4 on: February 26, 2021, 05:05:19 PM »
look in the
/storefront/view/default/stylesheet/bootstrap.css

locate this sections -  change the background color


nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;

 

Powered by SMFPacks Social Login Mod