Highlight across table rows - New Standard Theme

Christine_Demps
New Member
5 0 0

I use several tables on my site for size charts and to make multiple columns on a page. My site background is dark purple with light text. The strange thing that is happening is that whrn you mouse obover a table row, that entire row highlights white, obscuring the text. How can I get rid of this highlight? Thank you!

Replies 9 (9)
Jason
Shopify Expert
10438 169 2081

You could add the below css to the bottom of your stylesheet. It won't remove it (as the feature is kind of handy), but will make it match your colour scheme a lot better.

/* change the row highlight colour */
.rte table tr:hover td {
  background-color: rgba(0,0,0,.2);
}

 

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Christine_Demps
New Member
5 0 0

Thank you, Jason.  Which page would it go on?  theme.liquid maybe?  

I have this list of pages in my "Edit HTML/CSS" option.  

 

 

Christine_Demps
New Member
5 0 0

Hello Jason, 

That did not work, and I'm not sure I put the code snippet in the correct place. Can you please advise where that is supposed to go?  Thank you!  

~Christine

Jason
Shopify Expert
10438 169 2081

That code is css so it will go in your stylesheet (in the asset folder). For your theme the file you're looking for is called styles.scss.liquid. Edit that file and place the code at the bottom.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
Christine_Demps
New Member
5 0 0

Figured it out!  Thanks so much!  

CheshtaBose
Tourist
52 0 1

I completely agree with Jason. He provided the best solution regarding your query. This code will provide you a better background color scheme.

http://nationkart.com/
Christine_Demps
New Member
5 0 0

So, in case anyone else is looking to completley eliminate the color-changing highlight on the table rows, I actually found the line in the CSS that makes this happens.  

It is in the style sheet file in the Assets folder: style.scss.liquid

Line 990 (in my "New Standard" theme) I removed this line and it solved the problem entirely.

.rte table tr:hover td { background-color: #e9e9e9 }

This makes the table rows highlight the color that is listed.  It is unnecessary and annoying.  The previously proposed "solution" is just a patch, which still makes the rows change color when moused over, but slightly darker than the background color.  What I found is how to remove that feature altogether, which is actually the best solution regarding my query.  

Thank you to everone who commented and helped.  

Jason
Shopify Expert
10438 169 2081

No probs. Good job on your "solution".

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.
Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.
★ http://freakdesign.com.au ★
NicolasLabelld
New Member
1 0 0

Hi can someone tell me how to do this but also for the columns as well? I want to highlight the columns and rows but can't find anything elsewhere. Can someone revive this thread?