Home>Support>Customizing headings on individual widgets

Customizing headings on individual widgets

By Alda, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hello,

Is there a way to customize the font styles on individual widgets? I was unhappy with the default font of the headings in the sidebar widgets so added a code to custom.css to change those, but I don’t necessarily want the same thing to apply to the page builder widgets. I see that there is a way to edit attributes on the widgets – would it work to add code in there? If yes, could someone give me the code for that?

Also, is there a way to customize the Vantage big headline widget – there seems to be a default all-caps font, and it is centred. Can that be changed? – Or should I start a new thread for that?

Thank you!

Alda

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

  1. 8 years, 11 months ago Alda

    Addendum: I just figured out that the font in the Big Heading widget is determined by the same code I have in the custom.css for the sidebar widgets. It would be helpful to know how to style that font as well. Thanks.

  2. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Alda

    The Vantage Headline widget can be customised as follows:

    /* 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;
}

    You could restrict the CSS changes you added for your sidebar by adding specificity. So say for example you had:

    h3.widget-title {
color: red;
}

    You could change that to:

    #secondary h3.widget-title {
color: red;
}

    We’ve added #secondary and now only our sidebar widget titles are changed.

    Hope that helps.

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

    For the Headline widget, here are the values that text-transform will accept:

    http://www.w3schools.com/cssref/pr_text_text-transform.asp

  4. 8 years, 11 months ago Alda

    Thank you Andrew!

  5. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure :)

  6. 8 years, 11 months ago Alda

    Hi again Andrew … I am only now getting to working on this and realize I totally blundered this question. :)

    In actual fact, the code I added (which I had used to customize my previous theme) changed the headings on the page builder widgets, but NOT my sidebar widgets. This is the code:

     .panel-grid-cell h3 {
  color: #555555;
  font-size: 1em;
  font-variant: small-caps;
  letter-spacing: 2px;
  line-height: 1.385em;
  margin-bottom: 0.692em;
}

    What I would like is for the titles in my sidebar and, in fact, SOME page builder widgets (like the one that appears on my front page on the right where the sidebar normally is – it currently has the font I would like) to be in the small-caps font, but not necessarily ALL page builder widget headings.

    http://aldasigmunds.com/

    I know this may be a little ambitious for a novice like myself (I may know where to find the CSS custom stylesheet in my settings, but that’s about as far as my skills extend) … but is there a way to do this? If so, could you explain as though you were speaking to a six-year-old?

    Thanks so much.

    Alda

  7. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Sure :) You could do this using row styles. OR widget styles.

    Rows: Edit the row, click Attributes top right, enter a class in the first field:

    my-class-name

    Choose any class name. No starting period here.

    Then at Custom CSS target away:

    .my-class-name h3.widget-title {
/* Declarations go here */
}

    Starting period is used at Appearance > Custom CSS.

    You could do the same at a widget level by editing the widget, clicking Attributes, entering a widget class.

    To target all sidebar widgets:

    #secondary h3.widget-title {
/* Declarations go here */
}

    Definitely not beyond your abilities given our conversation so far.

  8. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Here is an attempt to explain where row and widget classes get added:

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

    If you’re using your browsers developer tool to inspect your page source it will make your Custom CSS work 100 times easier. If you want a quick video on that, see: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  9. 8 years, 11 months ago Alda

    Thanks Andrew. I’m working on this a bit sporadically, hence my prolonged silences in between. :)

    I think I can follow this. The thing that confuses me now is the declarations. Could you give me an example of something that I could put there just so I can see what it looks like? I can then try to tweak until I get the look I want.

  10. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Sure:

    background: red;

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

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