Home>Support>Add a New Font Style in Vantage

Add a New Font Style in Vantage

By Noel Moore, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi,

When editing TEXT, the options available are p, h1, h2, h3, h4, h5 and h6. How can I add an additional new style option which I can access and apply when typing in Visual Editor?

Thanks, Noel.

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, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Noel

    Thanks for reaching out.

    This question is unfortunately a little beyond what we’re able to assist with. I’m not sure if you can extend the Black Studio TinyMCE (Visual Editor) widget. It’s something you could perhaps ask Marco on their support page:

    https://wordpress.org/plugins/black-studio-tinymce-widget/

  2. 9 years, 3 months ago Noel Moore

    Hi Andrew – lets try this from another angle!

    When adding TEXT using Visual Editor, how can I modify the font (colour, size etc.) without it universally affecting every instance of that style (e.g. style) across the complete website? In other words, can I create an new Font Style and use that style when entering text?

    Thanks, Noel

  3. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Sure. The easiest way I can think of is as follows:

    1. Appearance > Custom CSS. Setup your text class:

    .my-custom-class {
color: #cccccc;
font-size: 16px;
}

    Then edit the Visual Editor widget in question and click the Attributes tab top right and insert your class name into the first field, minus the period:

    my-custom-class

    my-custom-class can be changed to any class name you’d like.

    Hope that helps.

  4. 9 years, 3 months ago Noel Moore

    Thanks Andrew – that was really helpful and it worked.

    However, the style is applied to ALL text in the Visual Editor Box. Is it possible to apply the style to a paragraph ONLY?

    Thanks, Noel

  5. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Definitely. Pretty similar, just remove the class from Attributes and insert it using the Text tab of the widget:

    <p class="my-custom-class">Text etc.

    OR if you want to get a little ninja with it. Leave things exactly as they are and go to Appearance > Custom CSS and change your class to:

    .my-custom-class p:nth-of-type(2) {
color: #cccccc;
font-size: 16px;
}

    Where 2 is the second paragraph in the cell. Ref: http://www.w3schools.com/cssref/sel_nth-of-type.asp. Might not be suitable but pretty cool stuff either way.

  6. 9 years, 3 months ago Noel Moore

    Thanks Andrew – very clear instructions and it worked perfectly.

    Thanks again, Noel

  7. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Awesome :) Glad to hear that did the trick.

    All the best. Cheers for now.

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