Return to previous page

Main menu and product page tabs background colour / font / hover colour changes

This topic has 9 replies, 3 voices, and was last updated 6 years, 2 months ago ago by Rose Tyler

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 16, 2019 at 11:43

Hi,

I got below two questions if you could please help, much appreciated.

1) http://144.208.71.24/~wwwlifebiotechco this is my website, the main menu https://prnt.sc/p6q22b , I want to change the hover effects, e.g. background colour change on main menu and sub-menu texts when hover on it, similar like this: https://prnt.sc/p6q3ax , could you please guide me on this, thanks in advance.

2) on the product page http://144.208.71.24/~wwwlifebiotechco/product/nadvita-nad/ see this part: https://prnt.sc/p6q3su , I want to change it to the style similar to: https://prnt.sc/p6q4q5 or, https://prnt.sc/p6q5fl , the purpose is to make this tab texts more obvious and with color / hover color / full width background color or just under that text area.

Thank you.

Kevin

Please, contact administrator
for this information.

#221445 Copied Theme version: Version 5.5 WooCommerce version: Version 3.6.5

8 Answers

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 16, 2019 at 11:48

To add to above question 2) … I want to change it to the style similar to: https://prnt.sc/p6q4q5 or, https://prnt.sc/p6q5fl , ( or, similar to https://prnt.sc/p6q98u)

#221447 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 16, 2019 at 12:01

sorry more to descript above 2), so we need to get a little more colour or design on above product pages. e.g:

– Product description bar, with benefits, ingredients. Have a blue bar here with black black or white font, plus when you click on a word the colour should change to highlight what page you are on. The words to be in Bold or bigger and clearer. and have the background in a colour blue with same blue as price $200 or choose a blue. See following for examples:
https://www.naturesway.com.au/product/nature-s-way-vitamin-probiotic-50s
https://swisse.com/en-nz/products/vitamins-supplements/womens-health/swisse-womens-ultivite-tablets

– The writing content to be in a box to make it stand out i.e. with light grey background. pls. See above naturesway link, –> https://prnt.sc/p6qghk

#221448 Copied

Olga Barlow

Participant

September 16, 2019 at 15:00

Hello,

1) To change the color of the links go to Theme Options > Typography > Menu > 1st level and 3-d level & drop-downs hover color https://gyazo.com/53e339cc2418177aa9a16fa4f99e0bee
To change the bg color go to Theme Options > Header > Menu styling > Dropdown Links Background Color

2) There is no such styles in our theme. You can customize tabs styles using custom CSS if you have CSS skills or Yellow pencil plugin (bundled plugin) of you don’t have CSS skills.

Regards

#221455 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 17, 2019 at 01:40

Thanks, I can’t find that Yello pencil (bundled plugin) in the CMS backend? I also searched new plugin and couldn’t find this plugin…?

#221495 Copied

GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 17, 2019 at 07:56

Thank you… ok so can we only add colour-ed background for the tabs, and change tab text size, then add background colour for the content area, simply like this: https://prnt.sc/p740zc , would you please kindly shed some light here… Much appreciated.. (the Yellow pencil plugin I searched and couldn’t find it…..)

#221501 Copied
Olga Barlow

Participant

September 17, 2019 at 11:34
Hello,

To install Yellow Pencil go to Appearance > Install Plugins.

To customize the tabs with bg-color we added the following code to child theme style.css

.woocommerce-tabs.tabs .tab-content { background-color: #f4f4f4; padding: 20px 30px; } .woocommerce-tabs.tabs.tabs-default .wc-tabs { border: none; background-color: #283465; } .woocommerce-tabs.tabs .tab-title.opened, .woocommerce-tabs.tabs .tab-title, .woocommerce-tabs.tabs .tab-title.opened, .woocommerce-tabs.tabs .tab-title.opened:hover { color: #fff; } .woocommerce-tabs.tabs .tabs-nav li.et-opened, .woocommerce-tabs.tabs .tabs-nav li:hover { background-color: #0070a6; } .woocommerce-tabs.tabs .tabs-nav li { margin: 0; padding: 5px 10px; }

If you want to chaneg the colors update code according to your needs.

Regards
#221510 Copied
GoldWebs “悉尼网站制作专家” 澳洲金网

Participant

September 18, 2019 at 01:06

Brilliant !!! Heaps of thanks !!! The effect works like a champ !
How lucky I’d chosen this theme, truly love it !!

#221550 Copied

Rose Tyler

Support staff

September 18, 2019 at 07:06

Hello,

You’re welcome!
Have a nice day.

Regards

#221557 Copied
Viewing 9 results - 1 through 9 (of 9 total)

The issue related to '‘main menu and product page tabs background colour / font / hover colour changes’' has been successfully resolved, and the topic is now closed for further responses

Main menu and product page tabs background colour / font / hover colour changes

Explore our best WordPress WooCommerce Themes collection