This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Change font and color for specific line / words

Resolved 5 replies premiumthemetheme-vantage
Chandran V
10 years ago · Last reply by Chandran V 10 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.

Need fast email support? Get SiteOrigin Premium

Replies

5
  1. Magus Staff 10 years, 9 months ago

    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. Magus Staff 10 years, 9 months ago

    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. Chandran V 10 years, 9 months ago

    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. Magus Staff 10 years, 9 months ago

    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. Chandran V 10 years, 9 months ago

    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.

Have a different question or issue?

Start New Thread