Title: Post Title CSS Customization Not Working Last modified: April 30, 2020 --- # Post Title CSS Customization Not Working * Resolved [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * (@hypelifemedia) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/) * 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](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 6 years, 5 months ago by [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/). * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fpost-title-css-customization-not-working%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/?output_format=md) [→](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/?output_format=md) * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12758210) * Hi [@hypelifemedia](https://wordpress.org/support/users/hypelifemedia/), * You’re currently using one of the [built-in widget themes](https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list#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](https://github.com/cabrerahector/wordpress-popular-posts/wiki/6.-Styling-the-list#browser-support) 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](https://github.com/cabrerahector/wordpress-popular-posts/wiki/3.-Filters#wpp_additional_theme_styles): * ``` /** * 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](https://www.isitwp.com/create-wordpress-site-specific-plugin-easy-guide/)) and report back your results. * Thread Starter [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * (@hypelifemedia) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12762240) * I added the hook to my theme’s function.php file but nothing changed on the widget. * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12764751) * Hey [@hypelifemedia](https://wordpress.org/support/users/hypelifemedia/), * The code snippet itself actually worked: * ![WPP additional CSS rules](https://i0.wp.com/i.postimg.cc/X7rM28fx/wpp-additional- rules.png?ssl=1) * The problem lies with your own CSS rules: * ![Overridden and invalid CSS rules](https://i0.wp.com/i.postimg.cc/7P2Phwcq/wpp- additional-rules-override.png?ssl=1) * **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: 600**px**. You don’t use the `px` unit with this CSS property. It should be `font-weight: 600` instead. * Thread Starter [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * (@hypelifemedia) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12766140) * 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 6 years, 5 months ago by [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/). - This reply was modified 6 years, 5 months ago by [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/). * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12766263) * Don’t mention it and enjoy the plugin! * Thread Starter [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * (@hypelifemedia) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12774974) * 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 6 years, 5 months ago by [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/). * [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/) * (@abdelrhman7) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12780443) * hi [@hcabrera](https://wordpress.org/support/users/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 6 years, 5 months ago by [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/). - This reply was modified 6 years, 5 months ago by [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/). * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12780516) * [@hypelifemedia](https://wordpress.org/support/users/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](https://wordpress.org/support/users/abdelrhman7/) you’ll need to provide some more details (like which theme you’re using, site’s URL, etc) so I can help. * [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/) * (@abdelrhman7) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12781083) * thanks for quick reply [@hcabrera](https://wordpress.org/support/users/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 [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12781402) * Fair enough, [@abdelrhman7](https://wordpress.org/support/users/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.) * Thread Starter [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * (@hypelifemedia) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12781460) * Thanks for your reply. Looking forward to hearing from you. Thanks. * [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/) * (@abdelrhman7) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12793407) * [@hcabrera](https://wordpress.org/support/users/hcabrera/) what the info you want to know? i want just change `.wpp-post-title`style like `font-color` `font- family`just this. - This reply was modified 6 years, 5 months ago by [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/). * Plugin Author [Hector Cabrera](https://wordpress.org/support/users/hcabrera/) * (@hcabrera) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12793424) * 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](https://wordpress.org/support/users/abdelrhman7/). * **P.S.:** and if you are indeed using a widget theme, I need to know which one too. * [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/) * (@abdelrhman7) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12793582) * [@hcabrera](https://wordpress.org/support/users/hcabrera/) my settings [https://drive.google.com/file/d/15fmE5F2rN6NMV5gAFUKd4jub2yjaBVJ6/view?usp=sharing](https://drive.google.com/file/d/15fmE5F2rN6NMV5gAFUKd4jub2yjaBVJ6/view?usp=sharing) in `widget` * [abdelrhman7](https://wordpress.org/support/users/abdelrhman7/) * (@abdelrhman7) * [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/#post-12793603) * [@hcabrera](https://wordpress.org/support/users/hcabrera/) if this working i can add my custom css [https://drive.google.com/file/d/1H5Otn1ZgudHom-7V5QnON4GJSJrx1Dot/view?usp=sharing](https://drive.google.com/file/d/1H5Otn1ZgudHom-7V5QnON4GJSJrx1Dot/view?usp=sharing) Viewing 15 replies - 1 through 15 (of 20 total) 1 [2](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/?output_format=md) [→](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/?output_format=md) The topic ‘Post Title CSS Customization Not Working’ is closed to new replies. * ![](https://ps.w.org/wordpress-popular-posts/assets/icon-256x256.png?rev=1232659) * [WP Popular Posts](https://wordpress.org/plugins/wordpress-popular-posts/) * [Frequently Asked Questions](https://wordpress.org/plugins/wordpress-popular-posts/#faq) * [Support Threads](https://wordpress.org/support/plugin/wordpress-popular-posts/) * [Active Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/wordpress-popular-posts/unresolved/) * [Reviews](https://wordpress.org/support/plugin/wordpress-popular-posts/reviews/) ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [Themes](https://wordpress.org/support/topic-tag/themes/) * 20 replies * 3 participants * Last reply from: [hypelifemedia](https://wordpress.org/support/users/hypelifemedia/) * Last activity: [6 years, 5 months ago](https://wordpress.org/support/topic/post-title-css-customization-not-working/page/2/#post-12809282) * Status: resolved