Home>Support>Change font and color for specific line / words

Change font and color for specific line / words

By Chandran V, 9 years ago. Last reply by Chandran V, 9 years ago.

Hi,
Could you show me how to target a particular line on a page? Like the line “AIR TRAFFIC CONTROLLERS ASSOCIATION SINGAPORE” below the meta slider? I would like to change the font and color without affecting the rest of the h3.

URL: http://www.atcas.org.sg

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Chandran V

    You can do this with some custom CSS. Open the editor to the PageBuilder row in question. Expand the attibutes tab and add an entry into the Widget Class Box. e.g. myclass.

    Then navigate to Appearance->Custom CSS and add a new entry to target that class

    .myclass h3 {
    color: red !important;
}

    This will then only target the H3 tag in elements that you name as myclass.

    Let us know how you get on

    Magus

  2. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Chandran

    You can change the font by adding font-family:type; to the above making it this

    .myclass h3 {
    color: red !important;
    font-family: "Times New Roman", Georgia, Serif;
}

    More information can be found on Font Families here

    http://www.w3schools.com/cssref/css_websafe_fonts.asp

    Magus

  3. 9 years, 4 months ago Chandran V

    Thank you very much Magus. Just what I wanted. Would you know which websites I can go to to learn such tricks, so that I don’t bother you folks too much?

  4. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Chandran

    The answers above are specific to PageBuilder more information here

    Thread: How do Page Builder row attributes work – row class, cell class and CSS styles

    For CSS information you can visit

    https://css-tricks.com/

    or

    http://www.w3schools.com/css/

    and the best tool you can use is the browser’s built in developer tools. Right click on a page element and select ‘inspect element’ from the dropdown.

    If you need any more help don’t hesitate to open a new thread

    Magus

  5. 9 years, 4 months ago Chandran V

    Many thanks Magus.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More