Need help? Check out our Support site, then


Widget Font Size Customization

  1. Hi All,

    I'd like to make the font size of one widget smaller. Is that possible with Grisaille?

    I found a few vague ideas pointing to CSS on the forums, but I'm unsure how to proceed. I read the basics article, but I still don't understand how to change only one font. Do I copy the whole CSS sheet from the original theme or just one part? Or not at all?

    Thanks all.

    The blog I need help with is mctheglobe.com.

  2. Hi, When working with CSS here at WordPress.com, the best thing to do is to add to the Custom CSS, only what you are changing rather than pasting the entire CSS. This makes it much easier to keep track of what you have added or changed, and your custom CSS will be loaded after the original and will override the original.

    You can target individual widgets to change only that particular widget styling. Basically you need to look at the HTML source code (view source in your browser) and then use the specific widget ID. Let us know which widget are you wanting to style and we can help you with that.

  3. Thank you!

    I would like to make the "recent" widget heading and text smaller. If that's possible, I'd like to make post headings smaller without affecting the categories as well.

    When I inspect the code, I see HTML and CSS. How do I identify the widget's ID? Is it in the HTML or CSS sections?

  4. Pretty interesting, I just copied some of the CSS and changed the font sizes, now the headings are sized correctly.

    However, I'm having trouble changing the size of the text inside widgets. When I copy the part I think is the CSS for that (copied below), changing the font size affects all the text on the page. How do I change only the text inside the widget?

    .wf-active body {
        font-size: 2em;
    }
  5. Yes, a font size setting in a body selector can actually change and control a good number of textual elements in a design. In this case, you have to build a more specific selector to target only the text widgets. Looking at the source code, I see the inner div in the text widget, where the content is, has a class of "textwidget" so I would suggest using the following, which will target only the content of the text widget, not the title or anything else. Edit the size as you desire.

    .textwidget {
        font-size: 0.9em;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic