how to change theme colors

Hi @imran13,

Read here: Styling the List – Themes.

want to resize headers
I inserted the code
nothing changed

https://prntscr.com/sdncw2

.wpp-cards li .wpp-post-title {
margin-bottom: 0.2rem;
font-size: 1rem;
line-height: 1;
}

Hi @imran13,

Just checked your website. What exactly did you do? Where did you insert “the code”? Did you make any changes to it? Because I’m seeing the HTML code of your website and your custom CSS rules are not being printed out so you must have made a wrong step somewhere.

pasted the code into the theme settings.
Via wordpress console.

Don’t know what “theme settings” is to you. Mind sharing a screenshot of that?

https://prntscr.com/sdncw2

It seems you didn’t (fully) read the documentation I shared earlier, @imran13. Here are the important bits:

If you want to customize / extend the CSS rules of a given theme, you’ll need to use the wpp_additional_theme_styles filter hook (read below why.)

For all of you fellow geeks out there: these themes are Self-Contained Web Components which allows WordPress Popular Posts to style them in a way that won’t affect other components on the web page and, more importantly, the themes themselves won’t be affected by global CSS rules either.

This topic was discussed a few days ago on a different topic. Here’s another explanation: Post Title CSS Customization Not Working – Comment. You also want to read this (and make sure you adjust the code according to your needs.)

I have an astra theme.
I pasted the code through the snippet plugin.

screen. https://prntscr.com/se2uf0

nothing changed

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

Hi @imran13,

Two things:

1. You’re using the wrong widget theme name. Change cards-compact to cards as you’re currently using the Cards theme.

2. Chances are that your CSS rules won’t work as is. If so, read suggestion #1 from here.