Need help? Check out our Support site, then


Custom font change for Avid template

  1. 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.

  2. fabianapsimoes
    Staff

    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 :)

  3. 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.

  4. fabianapsimoes
    Staff

    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 :)

  5. Too awesome -- you're the best! Thank you so much, you can mark this one as resolved.

  6. fabianapsimoes
    Staff

    You are welcome, @zeissler :)

Topic Closed

This topic has been closed to new replies.

About this Topic