size of the font in widget

  • Author
  • #1310976



    is it possible to change the size/colour of font in my widgets using CSS?

    Thank you!

    The blog I need help with is



    Yes, you can change the CSS using the Custom Design upgrade.

    Here’s an example to get you started:

    .widget-title {
      color: #b12930;
      font-size: 15px;

    If you’re brand new to CSS, first read the two sticky posts on this forum for helpful tips and info:




    Thank you. This is exactly what I needed – I can work out the details myself. I am quite new to CSS but spend a lot of time on internet learning it. My problem though is that I do not know where to find the proper names of selectors. Is there perhaps a guide to selectors somewhere?



    You should learn to use a developer extension, such as Firebug in Firefox or Web Inspector in Safari.



    :) Yes I installed Firebug yesterday but at the moment it is overwhelming me. I thought that perhaps there is an easier way. I understand there is not. Thank you – I will try to work it out then :)



    Naturally it’s overwhelming at first – that’s way I didn’t say “use”, I said “learn to use”. But it’s the best way, as it allows you to examine each element, see what selector targets it and what rules are applied to it, and even try out changes.

    Your idea of a list of selectors is problematic, among other reasons because each theme calls things its own way (not necessarily an obvious way), and because the selectors themselves don’t tell you how things are styled. (For example, suppose you see two side-by-side elements, and there’s some blank space between them: knowing what the selectors of these elements are can’t tell you where the space comes from; is it padding to the left element? margin to the left element? padding or margin to the right element? padding or margin to an element inside or outside the one you see? padding or margin inherited from another element? no padding or margin, just space because the one element is set to float left and the other set to float right? or an invisible image?)

    If you don’t mean just a list of selectors but the selectors as well as the rules that are applied to them, you mean the stylesheet of the theme. The sylesheets of all the free themes are available here (click name of theme then click “style.css”):
    But again there are various problems with this if you aren’t very experienced.

    Now, re Firebug, check the screenshot:
    Usually you set the left column to HTML and the right to Style, so you see structure left, CSS right. If you click the “Inspect element” tool then hover over an element on the actual blog page, a blue rectangle will enclose the element (as around the header on the screenshot). If that’s the element you want, you click on it. Same things when you hover over a tag in the HTML column. You can also click the grey triangles to reveal subsections. In the Style column you can change values and/or add or remove properties and values.



    thank you justpi! It is a well of precious information for me. I have actually copied everything you have written here in a separate document not to lose it and study it once I am wiser. :)

    I was not aware of the selectors being theme specific. In this case a list is not doable indeed. If I knew what I am getting myself into starting a blog I would think thrice. Well, I will try my best to understand the Firebug then. :)

    The link to stylesheets is also greatly appreciated – this is what I wanted to get to know as well :) Wow! SO much work in front of me.
    At the moment when I saw the Firebug screenshot I just burst out laughing as I do not understand one pixel of it :D

    Thank you once again. It is a pity you don’t blog anymore. I am a frequent visitor on your blog as well.



    You’re welcome.

    Yes, if you except a few standard things, selectors are theme specific, and as I said the names aren’t always obvious. (My favorite example: can you tell what “glass-bottomblock” is?)

    I was also baffled when I first tried to use Firebug: you’ll get used to it little by little.

    (And I haven’t stopped blogging.)



    Oh that’s good news. I have misread the note on your blog. Now I can see that you have only disabled commenting on older posts :)

    I have just included a link in my gravatar widget using your guide :)

    You are doing a great job. Thanks for that.



    I have no idea what glass-bottomblock is :) Is it something a beginner will actually understand?



    Of course you have no idea what glass-bottomblock is, and nobody will understand what it is by the name alone. It’s the name the lunatic who designed a certain theme decided to give to the footer. Why on earth call the footer anything other than footer?



    HAHAHAHA It has really killed me! I am still laughing! :D

The topic ‘size of the font in widget’ is closed to new replies.