Support » Plugin: WordPress Popular Posts » Post Title CSS Customization Not Working

  • Resolved hypelifemedia

    (@hypelifemedia)


    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 months, 4 weeks ago by hypelifemedia.

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

Viewing 15 replies - 1 through 15 (of 20 total)
  • Plugin Author Héctor Cabrera

    (@hcabrera)

    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.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    Hey @hypelifemedia,

    The code snippet itself actually worked:

    WPP additional CSS rules

    The problem lies with your own CSS rules:

    Overridden and invalid 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!

    Plugin Author Héctor Cabrera

    (@hcabrera)

    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 months, 3 weeks 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 months, 3 weeks ago by abdelrhman7.
    • This reply was modified 4 months, 3 weeks ago by abdelrhman7.
    Plugin Author Héctor Cabrera

    (@hcabrera)

    @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.

    Plugin Author Héctor Cabrera

    (@hcabrera)

    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 months, 3 weeks ago by abdelrhman7.
    Plugin Author Héctor Cabrera

    (@hcabrera)

    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.

Viewing 15 replies - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.