Home>Support>Headline Widget Customization

Headline Widget Customization

By Patrick Boyle, 10 years ago. Last reply by Andrew Misplon, 10 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I was trying to customize the font sizes for the header widget on my site homepage. This is how I’m editing the widget: Appearance>Home Page>SiteOrigin Headline>Widget Styles>CSS Styles.

I inspected the element in Chrome and extracted the following code:

.entry-content h1 {
  font-size: 30px;
}
.entry-content h3 {
  font-size: 16px;
}

I copied the code into the CSS Styles box but it doesn’t change the font sizes. When I copy it into Appearance>Custom CSS it does work. Is there a reason it doesn’t work inside the widget editor?

Thanks for the great theme…I was very happy to pay for it!

URL: http://www.patboyle.me/

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

  1. 10 years, 6 days ago Andrew Misplon
    Hi, I Work Here

    Hi Patrick

    Thanks for your support.

    The CSS Styles field you’re using is only for declarations like font-size: 15px. If you inspect the source you’ll see that field outputs declarations into an inline style=”” tag. As a result it’s not possible to use CSS rules in that field.

    If you’re interested in the fields available under Attributes, please, check out my brief intro here:
    Thread: How do Page Builder row attributes work – row class, cell class and CSS styles

    The easiest way to customise the Headline widget is to insert the following at Appearance > Custom CSS:

    /* Vantage Headline Widget */

.widget_headline-widget h1 {
padding-top: 20px;
margin: 0;
font-size: 26px;
line-height: 36px;
text-transform: uppercase;
color: #444444;
letter-spacing: 1px;
}

.widget_headline-widget h3 {
padding-bottom: 20px;
margin: 0;
font-size: 14px;
color: #666666;
font-weight: 200;
}

    Edit as required.
    You can remove the declarations you don’t need to edit.

    Hope that helps.

  2. 10 years, 6 days ago Patrick Boyle

    Andrew, thanks for the quick response…what you described makes sense. The only change I had to make was to replace “.widget_headline-widget” with “.sow-headline” since I was using the SiteOrigin Widget Bundle not the Vantage Headline Widget.

    Is there a substantial difference between the two widgets? Would you recommend one over the other?

    Thanks,

    Pat

  3. 10 years, 6 days ago Andrew Misplon
    Hi, I Work Here

    Ahh right, nice one.

    The SiteOrigin Headline widget is just a bit newer. It’s also not tied to Vantage, it comes with the Widgets Bundle so if you switch themes it’ll maintain. I’d recommending sticking with it.

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