[Resolved] Unable to change typography for post content

[Enrique Garcia-Sayan]

I recently installed GP and purchased the different add-ons because I have very little experience with coding and wanted something straightforward and easy to use. So far it’s working great but I have a couple of questions / issues:

1. When trying to change font using the typography add-on, it all works fine for the header, navigation and widget title typography, but editing the body or content typography (H1, H2, H3) does not result in a change. What am I doing wrong?

2. Is there any way to easily change the background color of one of the widgets in the sidebar while keeping the other ones different? An example of this would be your main “support” page.

[Tom]

1. Can you possibly link me to your site? Are your H1, H2 and H3s inside your content?

2. This should help: http://generatepress.com/forums/topic/style-sidebar-widgets-individually/#post-44788

[Enrique Garcia-Sayan]

I solved problem 1 by disabling some plug-ins that apparently were interfering, typography works well now. I’m afraid I don’t quite understand the solution for #2. I am really inexperienced in coding or CSS…

[Tom]

Interesting – what plugin was interfering?

To target individual widgets and style them, a little bit of CSS is required. I’m here to help though if you want to learn! 🙂

[Enrique Garcia-Sayan]

I think it was Aqua Page Builder, something that the person that was originally helping me with the website installed…

Any help would be appreciated with the second issue. Do you have any suggesting readings so I can edit CSS?

[Tom]

There’s a few options for adding CSS to GeneratePress: http://generatepress.com/knowledgebase/adding-css/

To style individual widgets, you first need to find the ID to that specific widget. If you’re using Chrome, you can right click on the widget, and click “Inspect Element”.

Give it a try on the 30 Day Money Back Guarantee widget on the right – right click, and click “Inspect Element”.

Notice the <aside id="text-6"... part? This is the unique ID to that specific widget.

In CSS, we can target IDs with a number sign (or hash tag…):

#text-6 {
    background: #1e72bd;
    color: #fff;
    font-size: 17px;
    font-weight: 200;
    padding: 0;
}

[Enrique Garcia-Sayan]

That worked, thank you! Obviously I need to learn a lot about this.

[Tom]

You’re welcome!

If you have any questions just fire them my way 🙂

[Author]

Posts