Changing font, size, colour of Hero Widget

  • Resolved frommellen

    (@frommellen)


    7 years, 11 months ago

    I need some help with the CSS code to change the font, size and colour of the Hero Widget. I also need to be able to change its position on the page. I understand that I should be able to include the CSS in the Additional CSS part of the Primer theme but I am struggling with the actual code itself. I have tried:

    .widget-title h2{
    color: #05294d;
    }

    …but this doesn’t work.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @frommellen,

    You’re code is almost correct. The .widget-title element is the h2 element, there is no h2 element nested in the widget-title element.

    The following should work just fine:

    .widget-title {
  color: #05294d;
}
    • This reply was modified 7 years, 11 months ago by Evan Herman.
    Thread Starter frommellen

    (@frommellen)

    Hi Evan,

    Thanks for your reply.

    I’ve tried putting what you suggested in the Additional CSS part of the theme but it didn’t do anything.

    I then tried this code in Additional CSS which did work:

    DIV DIV DIV.hero-inner ASIDE.widget.widget_text
    h2.widget-title {
    color: #05294d;
    }

    I don’t understand this piece of code but I got it from a reply I received from a previous topic I posted when I was having trouble with the responsiveness of the site. I had downloaded a plugin which allowed me to easily reposition elements on the page and change their size and colour but it made the site non-responsive. I deactivated the plugin and it became responsive again. The above CSS was what the plugin was adding.

    As I’ve said before I’m new to WordPress and website coding so if you could shed any light on what’s happening here I would much appreciate it.

    Cheere!

    Hi @frommellen,

    I’m not entirely sure why you would have had to specify all of the parent elements in that CSS DIV DIV DIV.hero-inner ASIDE.widget.widget_text.

    During my testing I only needed to add what I provided in my previous response to the ‘Additional CSS’ section of the customizer.

    You can see in the following screenshot that the declaration above is working on my end:

    Screen Shot

    I guess that it’s possible that another plugin you have installed is attempting to style the .widget-title element, which could be overriding what the code I provided above.

    Thread Starter frommellen

    (@frommellen)

    Hi Evan,

    Thanks again.

    I deactivated all the active plugins but the colour of the widget text still did not change. I then tried changing the font size and style with the following code:

    .widget-title {
    color: #05294d;
    font-size: 0.5em;
    font-style: italic;
    }

    The size and style of the widget text changed but not the colour! I don’t understand why the colour does not change. Any ideas?

    Thread Starter frommellen

    (@frommellen)

    Further to my last post, the colour did not change straightaway but when I saved and published and went back into Customise the colour had changed.

    Thread Starter frommellen

    (@frommellen)

    Sorry, that’s not correct. I had reactivated the Advanced CSS Editor plugin which contained the CSS code specifying all the parent elements. So it’s still not working.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Changing font, size, colour of Hero Widget’ is closed to new replies.