How can i modify font-size for widgets

#1 · July 26, 2021, 5:38 pm

Hello there.

When I add “recent posts” or “recent topics” in the sidebar through widgets, it works well. I love this plugin.
But, I think the font of the topic is too small, and the title above is too big. which really gives me a headache. I tried to modify the widgets.css in skin to adjust the font-size, but it didn’t to work.
Where should I modify it?

Thanks a lot

#2 · July 27, 2021, 5:57 am

Hey @xdxray,

I would advise you to insert your custom CSS directly into the custom CSS Section in the Customizer of WordPress:

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

Need professional help with Asgaros Forum? Book an appointment with us at domra Web Solutions for setup and customization services. Learn more about our Toolbox for Asgaros Forum plugin to enhance your forum experience.

#3 · July 14, 2022, 9:17 am

Quote from qualmy91 on July 27, 2021, 5:57 am

Hey @xdxray,

I would advise you to insert your custom CSS directly into the custom CSS Section in the Customizer of WordPress:

https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/

I am not a programmer and I too would need to understand how to enlarge the text.

I managed to enlarge the title of the widget (POST RECENTI SU AGORA’) with these lines of code, but the text underneath is too small.

.widget-title {
font-size: 14px !important;
font-weight:bold !important;
}

Would any programmers be able to help me?

#4 · July 15, 2022, 5:23 pm

@stanza101cdh-it, to change the size of the post title/link (capitalized in your example) and the excerpt, you can just use the selector .asgarosforum-widget, as in:

.asgarosforum-widget {
    font-size: 1.5em;
}

To also change the size of the author and date, you must get more specific:

.asgarosforum-widget .post-author,
.asgarosforum-widget .post-date {
    font-size: 1.5em;
}

Here’s a tip: Use your browser’s developer tools, the part labeled “Inspector” or something like that. There will be a selection button. Press that, then any element that you click on will show the classes (which you can use as CSS selectors) used for that element. You can edit the CSS directly in the Inspector to temporarily experiment with different CSS and see the result.

Ethereal has reacted to this post.

#5 · July 16, 2022, 4:27 pm

@jim

Thank you so much!!!
I have done several trials and arrived at a solution that I am 100% satisfied with!
You cannot understand how much help you have given me! Thank you for taking the time to help me, truly appreciated.