- This topic has 7 replies, 2 voices, and was last updated 9 years, 11 months ago by
Tom.
-
AuthorPosts
-
May 24, 2015 at 5:05 am #109956
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.
May 24, 2015 at 7:51 am #109957Tom
Lead DeveloperLead Developer1. 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
May 24, 2015 at 8:22 am #109965Enrique 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…
May 24, 2015 at 8:26 am #109966Tom
Lead DeveloperLead DeveloperInteresting – 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! 🙂
May 24, 2015 at 8:41 am #109971Enrique 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?
May 24, 2015 at 8:45 am #109972Tom
Lead DeveloperLead DeveloperThere’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; }
May 24, 2015 at 12:12 pm #110015Enrique Garcia-Sayan
That worked, thank you! Obviously I need to learn a lot about this.
May 24, 2015 at 12:12 pm #110016Tom
Lead DeveloperLead DeveloperYou’re welcome!
If you have any questions just fire them my way 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.