Return to previous page

Some links blend with white background - by scorleo

This topic has 21 replies, 3 voices, and was last updated 8 years, 6 months ago ago by Max Mullins

scorleo

Participant

May 24, 2017 at 18:41

Hi,

Where is the link color attribute? I use white background for my pages and some of the links are not visible esp. on cart page http://www.uhrohmuh.com/cart/. Both Calculate Shipping and Checkout links are invisible.

I also have similar issue on product page, the tab that’s selected turns the text in white color so the selected tab text is not visible.

Thank you!

#164072 Copied

20 Answers

Max Mullins

Participant

May 24, 2017 at 19:49

Most of the links in our theme are white-grey by default. Please add following code modifying the color into the themeoptions->styling-> custom css:
.cart_totals a{color:pink}
.cart_totals a:hover{color:pink}

Regards
Max Mullins

#164077 Copied

scorleo

Participant

May 25, 2017 at 02:03

Hi Max,

Thank you!

I applied the same principle on Shipping Calculator link:

.shipping-calculator-form .button a{color:pink}
.shipping-calculator-form .button a:hover{color:pink}

The only problem is after clicking the link and moving the cursor away the text disappears.

Separately, I also have issues with the tab text that are on single Product pages, the active tab does not display the text.

Thanks!

#164101 Copied

Amzy Leel

Participant

May 25, 2017 at 04:27

after clicking the link and moving the cursor away the text disappears.
– Add following css so it won’t disappear when the cursor go away
.shipping-calculator-button { color: red; }

tab text that are on single Product pages, the active tab does not display the text.
– Add following css to make it visible
.tabs .tab-title.opened { color: #1e1e1e; }

#164103 Copied

scorleo

Participant

May 25, 2017 at 12:29

Thanks Amy but unfortunately it’s not working. The issue I have is with Shipping Calculator link so my entries are as follows:

.cart_totals a{color:red }
.cart_totals a:hover{color:black}
.cart_totals {color:red }

The core issue I’m having with shipping calculator is the text fades away once Shipping Calculator link is clicked.

For tabs when I enter the suggested line, I see a warning icon, saying,’Don’t use adjoining classes’, and it’s not working.

#164131 Copied

Max Mullins

Participant

May 25, 2017 at 13:31

Hello Please try add following code into the custom.css:
.cart_totals a:focus, .shipping-calculator-button:focus{color:red;}

Regards,
Max Nullins

#164141 Copied

scorleo

Participant

May 25, 2017 at 13:58

Thanks Max.

What about tab text that’s active? Amy’s suggested line is not working.

#164153 Copied

Max Mullins

Participant

May 25, 2017 at 14:30

To prevent your next question about links for product on the top of the page: i will dare to suggest you following code:
.content-page table.cart .product-details a:hover{color:red}
Concerning the tabs please add this code into the custom.css:
.tabs-after_content .tabs .tab-title:hover{color:red}

Regards,
Max Mullins

#164160 Copied

scorleo

Participant

May 25, 2017 at 16:11

Thanks Max!

Implemented both and I see the changes. However the active tab’s text is not visible when the cursor moves from the text, I need attribute update when the cursor is not over it.

In addition, I’m also noticing similar issues in other links, for instance the menu links fade away when selected. I also noticed similar behavior when a link is selected from category list, the active selection category link is not visible.

#164173 Copied

Max Mullins

Participant

May 25, 2017 at 16:48

Hello @scorleo

1. The visited tabs gains aditional class “.active”. Please add following line in Child theme style.css:
.tabs-after_content .active .tab-title {color:red!important;}
2.Please provide us with screenshot about selected elements you would like to paint.

Regards,
Max Mullins

#164178 Copied

scorleo

Participant

May 25, 2017 at 20:34

Thanks!

Here’s one on the menu –> http://prntscr.com/fc32tp.
Select any product on Carrier Oil, you’ll noticed the missing text for the active product.

Here’s the second one -> http://prntscr.com/fc33n6

For second item, select any link under Essential Oil, once the page opens you’ll notice the selected link that’s faded away/blended with background page.

Thank you!

#164190 Copied

Max Mullins

Participant

May 26, 2017 at 12:19

Hello,`@scorleo
Sorry for the late reply.
Here is the code for top menu links:
#menu-main-menu-1 .current-menu-item a {color:black}
and for categories:
#woocommerce_product_categories-10 .cat-item a:hover{color:red;}

Regards,
Max Mullins

#164231 Copied

scorleo

Participant

May 26, 2017 at 13:05

Thanks Max!

Top menu problem solved.

Category link that’s active is still not visible when the link does not have focus or the cursor is not over it.

Thank you!

#164239 Copied

Max Mullins

Participant

May 26, 2017 at 15:50

Hello,
Please use thisline instead of previous for categories:
#woocommerce_product_categories-10 .current-cat a{color:red}

Regards,
Max Mullins

#164260 Copied

scorleo

Participant

May 26, 2017 at 23:47

Thanks a ton Max and Amy!

I think all the links are good now on white background. I’m posting following information for others, in case they run into similar issue, all they have to do is choose the color of their choice:

.cart_totals a{color:red}
.cart_totals a:hover{color:black}
.cart_totals a:focus{color:red}
.shipping-calculator-form .button a{color:pink}
.shipping-calculator-form .button a:hover{color:black}
.shipping-calculator-form .button { color: pink; }
.tabs-after_content .tabs .tab-title:hover{color:green}
.tabs-after_content .active .tab-title {color:red!important;}
.content-page .cart .product-details a:hover{color:green}
#menu-main-menu-1 .current-menu-item a {color:black}
#woocommerce_product_categories-10 .current-cat a{color:red}
#woocommerce_product_categories-10 .cat-item a:hover{color:green;}

#164286 Copied

Max Mullins

Participant

May 28, 2017 at 14:17

Thank you @scorleo.

Looking forward for new treads.

Regards,
Max Mullins

#164314 Copied

scorleo

Participant

June 1, 2017 at 13:08

Hi Max,

I thought I was done but stumbled upon one more area I hadn’t tested before. When browsing under product category, the category links have the same issue. Active link is not visible and when hovering cursor over the links they also fade away.

Many thanks in advance!

#164782 Copied

scorleo

Participant

June 1, 2017 at 13:47

In addition, the sub-category text is also faded –> http://prntscr.com/fendpy

Thanks!

#164790 Copied

Max Mullins

Participant

June 1, 2017 at 14:26

Hello @scorleo

Please test this line code in child theme style.css:
.archive .widget_product_categories.sidebar-widget ul li a:hover{color:#1b1818!important}
.archive .shop-full-width .categories-mask mark, .archive .category-grid .categories-mask h4 {color:#1b1818}
.archive .product_list_widget .product-title a{color:#1b1818}

Regards,
Max Mullins

#164795 Copied

scorleo

Participant

June 1, 2017 at 16:35

Hi Max,

It’s partly fixed.

Couple of scenarios that’s problematic:

Sc 1: Click on A-C Essential Oils under Essential Oils, shows link in the product category but not the menu http://prntscr.com/fepkpl

Sc 2: After completing sc 1, click Organic from bottom of the category list, both links fade away –> http://prntscr.com/fepm2f

Thanks!

#164806 Copied
Max Mullins

Participant

June 1, 2017 at 17:26
Hello @scorleo
Here is the code for the categories widget and menu currently selected items:

1.#menu-main-menu-1 .item-design-dropdown .nav-sublist-dropdown ul > li.current-menu-item > a{color:black} 2. #woocommerce_product_categories-10 .product-categories .current-cat a{color:black}

Regards,
Max Mullins
#164811 Copied
Viewing 21 results - 1 through 21 (of 21 total)