Custom font change for Avid template

  • Author
    Posts
  • #1388813

    zeissler
    Member

    Hi — me again!

    I’ve figured out via the forums how to use CSS code to switch from all caps to initial caps for Heading 1 through Heading 6 on the Avid template, but I’m trying to change the default all caps to initial caps on text in the Link Format, when it’s displayed in the post timeline.

    If you go to my homepage at http://exploratorius.us/, then simply scroll down to August 5th in the timeline, you’ll see what I mean. It’s all caps in the timeline, but I’ve got the text configured differently within the actual post.

    Can that be changed?

    Thank you for your assistance!

    The blog I need help with is exploratorius.us.

    #1388914

    Hi there,

    Give this CSS a try:

    .post-container a {
        text-transform: capitalize;
    }

    Here goes a CSS tip for you: To change how an HTML element appears on your page, you need to target it using a CSS selector. A selector is usually an id or a class specified for the element in its HTML tag. A lot of times, you can also target an element by referring to its container – meaning the HTML element that contains the element you want to change.

    For example, if you take a look at your page’s source code (by hitting Ctrl+U in a number of browsers, for example), you’ll see that that link is contained by a <section> tag with class “post-container”. You can target the links ( tags) within the “post-container” section with “.post-container a”. Here is a good resource on how to find CSS selectors: https://dailypost.wordpress.com/2013/07/25/css-selectors/

    Hope that helps :)

    #1388915

    zeissler
    Member

    Wow — I wasn’t expecting a response that fast! It works, too — thank you very much!

    Here’s a follow-up question — is there a way to match the font size of the other titles on the timeline? I looked at the source code, but could not decipher where the Link Format makes the call to the font size.

    #1388919

    Hi @zeissler,

    You can actually try replacing the CSS bit I gave you before, with this one:

    .format-link a {
        font-size: 1.2rem;
        text-transform: capitalize;
    }

    Please, see if it does the trick with the font sizes :)

    #1388920

    zeissler
    Member

    Too awesome — you’re the best! Thank you so much, you can mark this one as resolved.

    #1388925

    You are welcome, @zeissler :)

The topic ‘Custom font change for Avid template’ is closed to new replies.