Post title transition versus text-decoration

Hi @mediaeditor,

Right now the best way to customize widget theme’s CSS rules is via the wpp_additional_theme_styles filter hook. This way, any customizations made to the widget theme will survive plugin updates.

In your specific case, to have your popular posts links behave the same way as your regular links (transition, color, etc.) add the following code snippet to your theme’s functions.php file:

/**
 * Style Popular Posts links.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name){
    $additional_styles .= 'a { text-decoration: inherit; transition: color 0.2s; } a:hover { text-decoration: inherit; color: #ff4f00; }';
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

Thanks, Héctor, thanks for your prompt reply!

Just after posting about my issue, I managed to tweak the theme’s css of the plugin, so it is working as I want it to.

I’m using a child theme and I copied and pasted the snippet in the functions.php. I tried the snippet after setting the theme’s css back to default, but it didn’t work, unfortunately.

I’m not a developer just a WordPress enthusiast, so I don’t really mind to tweak the theme’s css to achieve the style I want.

I saved the code this time around, so hopefully, I’m “update-safe”.

That’s odd. Try restoring the theme’s CSS rules back to default again and when you do please leave a comment here and I’ll have a look @mediaeditor.

OK, @hcabrera. I’ll give it another try.
The theme’s CSS is back to default and have added the snippet to the child theme’s functions.php

Standing by!

Thanks @mediaeditor!

Alright, seems we only need to be a bit more specific so our custom CSS rules take over. Have a look:

/**
 * Style Popular Posts links.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name){
    $additional_styles .= '.wpp-list li a { text-decoration: inherit; transition: color 0.2s; } .wpp-list li a:hover { text-decoration: inherit; color: #ff4f00; }';
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

Notice that how instead of assigning our custom CSS rules to all a tags we’re now specifying that it should be all a tags in .wpp-list li. Now the browser should override the styles applied by the stylesheet, using the ones from the code snippet.

Master @hcabrera, it worked! You have really made my day. Thank you so very much!!