You can explore some of the techniques that we (web people) use to change the appearance of things. This involves Google Chrome.
– Open your website in Google Chrome.
– Right click on the page element you want to modify.
– Select ‘Inspect element’.
* A new toolbar appears
– Within the toolbar, look at the right-hand column.
* You should see CSS.
If there’s a style you want to override, you’d find the CSS on the right of the toolbar and then create new CSS styles in your Child Theme style.css file. Chrome’s developer tool should provide enough information for this.
For example, if you want to change the background colour of the Blog Subscription widget, you’d do the following:
1. Open your webpage in Google Chrome.
2. Right click on the widget text (or anywhere within the widget are) [screenshot].
3. Select ‘Inspect element’.
4. Look at the left hand side of the toolbar. You have the paragraph (or which ever element) selected [screenshot]. You don’t want this.
5. Hover your mouse over the elements preceding and look at the what it highlights on the webpage. Once you find the element that covers enough space of the widget [screenshot], click on it [screenshot].
Look at the right column of the toolbar. That is the CSS selector you need to target to apply the background colour to.
You can do this temporarily by:
6. After the last style in the .widget section, after the semicolon, left click so it lets you enter your own text [screenshot].
7. Enter the style you want to test out background-color: deeppink; [screenshot].
As you can see, the background colour has unfortunately applied to all widgets.
If you want to target a particular widget, you try to use a unique identifier in the HTML.
8. Look at the left column of the toolbar again, look at the <aside> HTML.
9. Take the ID within the Blog Subscription <aside> element [screenshot] and copy it.
10. Go to the right column of the toolbar again and uncheck/delete that background-color: deeppink; style we added [screenshot].
11. You want to add a new style. Press the plus icon at the top of the right column.
12. Either paste the ID you copied from step 9, or, if it already has it in there just use that [screenshot]. Press enter.
13. Click within the newly created and empty style (still in the right column of toolbar) [screenshot].
14. Enter the background-color: deeppink; style just like step 7.
Now you should see that the background colour only applies to that particular Blog Subscription widget [screenshot].
You’d then transfer this CSS into your Child Theme stylesheet. You’d add the style;
#blog_subscription-3 {
background-color: deeppink
}
To the bottom of your Child Theme style.css file and of course change the deeppink colour to something more suitable.
