One advantage of “All-in-One Custom Backgrounds for WordPress” is, that you can create an arbitrary number of backgrounds for each page. And every background can be bound to a so called HTML Block Element.
To select a specific element, you can use its CSS selector.
Simple said, each page is constructed of many HTML Block Elements, and each of these elements can be addressed using a specific CSS selector. The other way around, it is also possible to select multiple elements using one selector.
Using CSS selectors isn’t the most easiest thing, if you are not familiar with HTML and the technologies around it.
Here are some links, you should consume, to get a brief overview:
Some very good (free) online workshops:
Examples from WordPress
The most obvious elements in WordPress are typically the ones, which seperate the page in multiple structured units:
- The page itself,
- The header or footer of the page,
- The main content,
- Left and/or right sidebars,
But there are also more not so obvious elements:
- Input fields,
- Italic texts
- and many more
Default Value: body
You don’t have to worry. By default the “body” selector is used. This makes sure, the background of the whole page is changed.
Note: Some themes might create a structure, which hides the body and the selector is not working this way.
Unfortunatly selectors are very theme dependent, which means there are no generic rules, which can be used.
Here is a list of some selectors for the current WordPress default theme “twentyfourteen“:
|#page||The entire page.|
|#masthead||The tiny header bar at the top|
|#secondary||The left sidebar|
|#content-sidebar||The right sidebar|
|#main||The main content|
|#colophon||The footer area|
How to find selectors?
An HTML is a contruction of nested HTML elements. Each element in this page is selectable among others by id or css class.
<div id="elementID" class="elementClass" ></div>
Find element by id
The id of element should be unique on page and so you can get the element by id when you insert “#elementID” in selector field. The “#” character indicates that you mean an id of element.
Find elements by class
The class of element is not unique on page and so you can get one or many elements by class when you insert “.elementClass” in selector field. The “.” character indicates that you mean an class of elements on page.
Find selectors on your page
- You should be familiar with the basics of HTML and CSS (see Preparation above), and
- with the developer tools of your favorite browsers.
Here is a basic example, on how to find the selector for the pages title.
Note: This way you will get a very concrete selector, which might not work for other pages.
The steps are for Chrome:
- Prepare your page or blog post and than go to “Preview”
- Open the Developer Tools (Press “F12”)
- Click on the small magnifier icon
- Use the mouse to find and select the element, you want the background to change for
- Right click on the selected element within the developer tools
- Select “Copy CSS path”
- Insert the copied part into the “Selector” field
- “Preview” again, to see the result 😉