Remove underline from social media icons in blog posts

Greetings…for the first question, the code that adds the underline is this:

.colors-custom .entry-content a, 
.colors-custom .entry-summary a, 
.colors-custom .widget a, 
.colors-custom .site-footer .widget-area a, 
.colors-custom .posts-navigation a, 
.colors-custom .widget_authors a strong {
    -webkit-box-shadow: inset 0 -1px 0 hsl( 0, 50%, 6% );
    box-shadow: inset 0 -1px 0 hsl( 0, 50%, 6% );
}

You will need to cancel that out with some custom CSS:

.colors-custom .entry-content a, 
.colors-custom .entry-summary a, 
.colors-custom .widget a, 
.colors-custom .site-footer .widget-area a, 
.colors-custom .posts-navigation a, 
.colors-custom .widget_authors a strong {
    -webkit-box-shadow: none;
    box-shadow: none;
}

For your second question, do this:

.products li h3:hover {
    text-decoration: underline;
}

Hello,

thanks for the reply.

I couldn’t find the lines you mention in the twentyseventeen style.css sheet or template parts -> post or template parts -> footer widgets.

I tried adding the colors-custom code and the products hover code to my style.css sheet using the custom CSS editor with no effect.

The closest I got to finding the code for wiedget author were the lines on hover effect, pasted below, but when I changed the webkit-box-shadow and box-shadow to none there was still no effect:

/* Hover effects */

.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
	-webkit-box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 1);
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
	-webkit-box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 1);
	text-decoration: none;
	-webkit-transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, -webkit-box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out;
	transition: color 80ms ease-in, box-shadow 130ms ease-in-out, -webkit-box-shadow 130ms ease-in-out;
}

.entry-content a:focus,
.entry-content a:hover,
.entry-summary a:focus,
.entry-summary a:hover,
.widget a:focus,
.widget a:hover,
.site-footer .widget-area a:focus,
.site-footer .widget-area a:hover,
.posts-navigation a:focus,
.posts-navigation a:hover,
.comment-metadata a:focus,
.comment-metadata a:hover,
.comment-metadata a.comment-edit-link:focus,
.comment-metadata a.comment-edit-link:hover,
.comment-reply-link:focus,
.comment-reply-link:hover,
.widget_authors a:focus strong,
.widget_authors a:hover strong,
.entry-title a:focus,
.entry-title a:hover,
.entry-meta a:focus,
.entry-meta a:hover,
.page-links a:focus .page-number,
.page-links a:hover .page-number,
.entry-footer a:focus,
.entry-footer a:hover,
.entry-footer .cat-links a:focus,
.entry-footer .cat-links a:hover,
.entry-footer .tags-links a:focus,
.entry-footer .tags-links a:hover,
.post-navigation a:focus,
.post-navigation a:hover,
.pagination a:not(.prev):not(.next):focus,
.pagination a:not(.prev):not(.next):hover,
.comments-pagination a:not(.prev):not(.next):focus,
.comments-pagination a:not(.prev):not(.next):hover,
.logged-in-as a:focus,
.logged-in-as a:hover,
a:focus .nav-title,
a:hover .nav-title,
.edit-link a:focus,
.edit-link a:hover,
.site-info a:focus,
.site-info a:hover,
.widget .widget-title a:focus,
.widget .widget-title a:hover,
.widget ul li a:focus,
.widget ul li a:hover {
	color: #000;
	-webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
	box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 3px 0 rgba(0, 0, 0, 1);
}

/* Fixes linked images */
.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #fff;
	box-shadow: 0 0 0 8px #fff;
}

Sorry for late reply…been gone all day.

Anyway, you won’t find that in the theme’s own stylesheet. The code I posted would be copied and added to the Additional CSS tab in the customizer, or child theme’s stylesheet (if using a child theme).

Thanks! Works perfectly.

I thought that changing the CSS in the childtheme stylesheet in Appearance -> editor was the same as Additional CSS tab in customizer but turns out they are not. For some reason it didn’t work when adding it to child theme stylesheet, but it does when using Additional CSS tab.

Thanks again for your help.

Hmm sorry… I just updated to woocommerce 3.0.0 and it broke the fix for adding hover effect in the shop product titles.

In fact all the styling for product titles has changed (colour, font, size).

I have tried this code in the Additional CSS tab but it doesn’t make any changes… Any ideas on how to fix this again?

.products li h3:hover {
    text-decoration: underline !important;
}
h3 {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: black !important;
}

Looks like they went from h3 to h2 tags. So change the h3 to h2

Thanks it works ?? thought I did try to change them to h2 and h1 before posting but it wasn’t updating in the live preview. Anyway, thanks again!