WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Link colour and font in footer widgets (4 posts)

  1. webadeptuk
    Member
    Posted 11 months ago #

    Hello,

    When I make a link in a text widget in the footer it turns white and is a much smaller font than the other text.

    How do I make the links just in the footer widgets coloured #5A5A5A in size 14px (or the same size as the rest of the text)?

    Thanks in advance.

  2. acub
    Member
    Posted 11 months ago #

    Add this code to your Custom CSS Panel in Customizr admin page:

    #footer .footer-widgets a{
    color: #5A5A5A;
    }

    The size of the text in footer widgets is 14px by default. If it's different in your case some other rule is affecting it. Please provide a link and I'll tell you which one and how to override it.
    However, a general rule for increasing font size in footer widgets would be:

    #footer .footer-widgets {
    font-size: larger;
    }

    However, depending on each widget's styles, font sizes might vary from one to another, and you'd have to apply rules through specific CSS selectors to apply to only one of them.

  3. webadeptuk
    Member
    Posted 11 months ago #

    Thanks for your help, the code for the colour change worked perfectly.

    As for the size... I can't actually send a link as it's not live and can only be accessed on my computer. I have worked out that it is being affected by the text at the very bottom (where it says back to the top, developed by... etc) The links are the same size as this text (11px i think) and when I try to increase the links up to 14px, it increases the size of that text too. I want to keep the very bottom text at 11px. Could you help me with just this info?

    Thank you!

  4. acub
    Member
    Posted 11 months ago #

    #footer {
    font-size: 14px;
    }
    #footer .colophon{
    font-size: 11px;
    }

    Play with the numbers until you get it the way you want (#footer .colophon affects the text outside the widget areas, while the #footer affects everything else). Also, remove the

    #footer .footer-widgets {
    font-size: larger;
    }
    declaration I suggested above.

Reply

You must log in to post.

About this Theme

About this Topic