The Selector

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.  

user_aware_backgrounds_for_wordpress_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.

Preparation

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:

  • Hyperlinks,
  • Headlines,
  • 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.

Typical selectors

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“:

Selector Description
 #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.

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.

We personally recommend using Chrome or Opera (they both share similar developer tools). Here are some tutorials, to get familiar with them:

  • https://developer.chrome.com/devtools/docs/dom-and-styles
  • http://dailypost.wordpress.com/2013/07/25/css-selectors/
  • https://www.youtube.com/watch?v=nOEw9iiopwI

Example

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:

  1. Prepare your page or blog post and than go to “Preview”
  2. Open the Developer Tools (Press “F12”)
    1. Click on the small magnifier icon
    2. Use the mouse to find and select the element, you want the background to change for
    3. Right click on the selected element within the developer tools
    4. Select “Copy CSS path”
  3. Insert the copied part into the “Selector” field
  4. “Preview” again, to see the result 😉
2014-10-16 20_13_26-The Selector - Moewe Studio Showcase - Opera

Short introduction to find CSS selector

2014-10-16 21_27_58-Edit Page ‹ Moewe Studio Showcase — WordPress - Opera

The copied CSS path as new selector

2014-10-16 21_28_26-The Selector - Moewe Studio Showcase - Opera

The result using the previous used CSS path