Post Title CSS Customization Not Working

Hi @hypelifemedia,

You’re currently using one of the built-in widget themes, the Cards Compact theme.

Normally you should be able to style any widget the way you tried to. However, as mentioned on the Wiki, these built-in themes are self-contained web components which basically means that CSS rules coming from your theme (or somewhere else) won’t have any effect on them. Hence the reason why your CSS rules are being ignored.

To customize / extend the CSS rules of any of the built-in themes you can use the wpp_additional_theme_styles filter hook:

/**
 * Adds CSS rules to the Cards Compact theme.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name){
    if ( 'cards-compact' == $theme_name ) {
        $additional_styles .= '.wpp-post-title { font-size: 20px; font-weight: 600px; color: rgb(102, 102, 102) }';
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

Add that code snippet to your theme’s functions.php file (or to a site-specific plugin) and report back your results.

I added the hook to my theme’s function.php file but nothing changed on the widget.

Hey @hypelifemedia,

The code snippet itself actually worked:

The problem lies with your own CSS rules:

1. font-size and color are being overridden by the theme’s CSS rules. Use !important to make sure your rules take over (eg. font-size: 20px !important;).

2. font-weight has an invalid property value: 600px. You don’t use the px unit with this CSS property. It should be font-weight: 600 instead.

It works like a charm. Thank you very much!

I added a hover color to the code as well to give it a nice finish.

See code:

/**
 * Adds CSS rules to the Cards Compact theme.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name){
    if ( 'cards-compact' == $theme_name ) {
        $additional_styles .= '.wpp-post-title { font-size: 20px !important; font-weight: 600 !important; color: rgb(102, 102, 102) !important; } .wpp-post-title:hover { color: rgb(255, 0, 228) !important; } ';
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

Thanks for the plugin and the assistance!

• This reply was modified 4 years, 7 months ago by hypelifemedia.
• This reply was modified 4 years, 7 months ago by hypelifemedia.

Don’t mention it and enjoy the plugin!

Hi, it’s me again!

I’ve been getting reviews that the title color on the Popular Post Widget is too dull on the light mode. As a result, I am considering making a change.

I have removed the grey color, letting the plugin uses its default black color for the posts’ titles. However, I let the hover stay pink.

The theme uses an element “.thb-dark-mode-on” when the dark mode is toggled.

I have used it right before the targetted elements when I need to change the look of things on the dark mode.

For instance, I was expecting this line of code to make the titles on Popular Post Widget turn to white when the dark mode is toggle.

/**
 * Adds CSS rules to the Cards Compact theme.
 *
 * @param  string $additional_styles
 * @param  string $theme_name
 * @return string
 */
function wpp_additional_css_rules($additional_styles, $theme_name){
    if ( 'cards-compact' == $theme_name ) {
        $additional_styles .= '.wpp-post-title { font-size: 20px !important; font-weight: 600 !important; } .wpp-post-title:hover { color: rgb(255, 0, 228) !important; } .thb-dark-mode-on .wpp-post-title { color: #FFFFFF !important; } ';
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

However, the “.thb-dark-mode-on .wpp-post-title” is not working.
Please, could you help me with this?

• This reply was modified 4 years, 6 months ago by hypelifemedia.

hi @hcabrera i have the same problem but your code not fix it when add functions.php the console not showing any thing from my code what i should do to change title style
this the code i want to use

   font-family: sstlight!important;
    font-size: 14px!important;
    color: #202224!important;
    text-decoration: none!important;
    text-align: start!important;
    line-height: 22px!important;
    font-weight: 700!important;

• This reply was modified 4 years, 6 months ago by abdelrhman7.
• This reply was modified 4 years, 6 months ago by abdelrhman7.

@hypelifemedia not sure about that one. Will need some time to test to provide an answer so I’ll get back to you as soon as I can.

@abdelrhman7 you’ll need to provide some more details (like which theme you’re using, site’s URL, etc) so I can help.

thanks for quick reply @hcabrera i develop a wordpress theme offline in localhost when i don i can make it online with domain but now i want way to change .wpp-post-title css style.

Fair enough, @abdelrhman7. Then please share more details about how you’re using the plugin. For example -as I mentioned earlier- I’d like to know if you’re using on the built-in themes or not (and which one if you are.)

Thanks for your reply. Looking forward to hearing from you. Thanks.

@hcabrera what the info you want to know?
i want just change .wpp-post-titlestyle like font-color font-familyjust this.

• This reply was modified 4 years, 6 months ago by abdelrhman7.

What I need to know is whether you’re using a widget theme (eg. Cards, Cards Compact, etc) like the OP or not. The solutions I can suggest will largely depend on that, @abdelrhman7.

P.S.: and if you are indeed using a widget theme, I need to know which one too.

@hcabrera my settings
https://drive.google.com/file/d/15fmE5F2rN6NMV5gAFUKd4jub2yjaBVJ6/view?usp=sharing
in widget

@hcabrera
if this working i can add my custom css
https://drive.google.com/file/d/1H5Otn1ZgudHom-7V5QnON4GJSJrx1Dot/view?usp=sharing