Post Title CSS Customization Not Working

  • Resolved hypelifemedia

    (@hypelifemedia)


    4 years, 7 months ago

    I have been trying to change the posts’ titles in the Popular Post Widget on my website but no result.

    Previously the title CSS customization worked but I just noticed its not working anymore after updating my theme with a light/dark switcher.
    When the website theme is switched to dark, the posts’ titles in Popular Post Widget stays black. =(

    I would like a universal color to work with so that it is readable whether the theme is in light or dark mode.

    I have followed the instructions from https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list but did not prevailed.

    This is what I want:

    .wpp-post-title {
font-size: 20px;
font-weight: 600px;
color: rgb(102, 102, 102)
}

    Your help would be greatly appreciated. Thank you.

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

    The page I need help with: [log in to see the link]

Viewing 5 replies - 16 through 20 (of 20 total)
  • Plugin Author Hector Cabrera

    (@hcabrera)

    Thanks @abdelrhman7, that helped.

    So the problem is you’re using a different theme. OP is using the Cards Compact theme -as previously pointed out- and you’re using the Cardview theme. So, of course, the code I shared with the OP won’t apply to you.

    You need to change the if condition in the code so it checks for the cardview theme name instead of cards-compact. That’s why I was asking you which is the theme you’re using ??

    Anyways, this is what I’m talking about:

    /**
 * 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 ( 'cardview' == $theme_name ) {
        $additional_styles .= '.wpp-post-title { 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; } ';
    }
    return $additional_styles;
}
add_filter('wpp_additional_theme_styles', 'wpp_additional_css_rules', 10, 2);

    If you’re using a caching plugin don’t forget to flush its cache before testing this code.

    thanks you very much @hcabrera , it’s working ????.

    • This reply was modified 4 years, 6 months ago by abdelrhman7.
    • This reply was modified 4 years, 6 months ago by abdelrhman7.
    Plugin Author Hector Cabrera

    (@hcabrera)

    Yes, adding the code to your theme’s functions.php file should do the trick.

    Plugin Author Hector Cabrera

    (@hcabrera)

    @hypelifemedia so I gave your issue some thought and here’s what I’m thinking.

    The issue is that -as explained earlier- WPP’s themes are self contained component which means they cannot be affected by external rules. So I’m guessing that the theme doesn’t know that your body tag has that CSS class, hence the reason why it ignores your custom rules.

    Here’s a workaround for that:

    1. Go to Plugins > Plugin Editor and select WordPress Popular Posts from the dropdown.

    2. Click on assets > themes > cards-compact > style.css to open this stylesheet.

    3. Copy the CSS rules into your theme’s main stylesheet.

    4. Go to Appearance > Widgets > WordPress Popular Posts and set Theme to None.

    5. Check your website to see if these changes were applied correctly. If so, you’ll see that your popular posts list will still look the same as the Cards Compact theme.

    This should allow you to alter how your popular posts list looks without requiring the PHP snippet from before. This also means that the widget will no longer be a self-contained component and so your global CSS rules will affect how the widget looks on your website.

    Thread Starter hypelifemedia

    (@hypelifemedia)

    Solved! Thank you very much.

    Followed all the steps and it worked with the dark mode seamlessly.

    However, the size of the featured images “.wpp-cards-compact li .wpp-thumbnail” appeared smaller so I changed the “max-width” from “100%” to the expected size “90px”.

    I also removed the snippet. I didn’t have to make further changes.
    Now everything is good.

    Thanks again.

Viewing 5 replies - 16 through 20 (of 20 total)
  • The topic ‘Post Title CSS Customization Not Working’ is closed to new replies.

Tags