Customizing Your WordPress Site – Applying New Styles
Published: November 22, 2014By Sebastian
Heads up! this post was created when Microthemer was at version 2. The current version is 7.
Some references to the interface may be out of date.
Microthemer enables you to change the appearance of your WordPress website without writing any code.
To start editing simply double-click an element on your web page that you would like to edit (e.g. a logo or a heading).
The toolbar options at the top switch to the “selector wizard”. If you were not able to target the individual element or set of elements you were aiming for precisely you can refine your targeting using the advanced options of the selector wizard. See the “Selector Wizard Advanced Options” section below.
Give your selector a descriptive name (e.g. “Company Logo”) then select or enter a folder (e.g. “Main Body”) to save it in and finally clickthe create selector button.
Apply styles from the selection of over eighty styling options. Your style changes will be saved automatically and displayed immediately on screen.
Useful Styling Tips
CURRENT STYLE VALUES
The current styles specified elsewhere (e.g. by the person who coded your theme or the plugins you’re using) are displayed over the editing options in light grey text. Once you enter your own style values, the reporting of the existing style values will disappear – but they can still be seen when you hover your mouse over an input field. This hover value is useful when you want to make sure that your style is definitely taking an effect on the page (and not being overridden by a style rule specified somewhere else).
ALL FIELDS ARE EDITABLE
All fields, including drop down menus, are editable – you can type your own values directly into them. The only exception is with ‘image insert fields’, which are changed by using the image insert button (Microthemer prevents manual typing in these fields because the full image path is needed and this is saved behind the scenes when you insert an image using the browse button).
DOUBLE CLICK A FIELD TO APPLY THE SAME VALUE
For options such as padding, margin, and border that have four sides (top, right, left, bottom) you can enter a value into one field and by double clicking that field the same values will be automatically added into the other 3 related fields.
Selector Wizard Advanced Options
You can adjust which ‘selector’ you are targeting through the advanced options (see image below).
The Targeting Tab
When you double-click something on your page Microthemer scans the HTML code looking for potential CSS selector rules that can be used to target the element you double-clicked. By default, Microthemer suggests the most “specific” CSS selector it can. If the HTML on the page allows for targeting just the element that was double-clicked and nothing else, that’s what it will go for. But Microthemer knows that sometimes users want to target a set of elements, such as all page titles, rather than just the page title on the “About” page. It therefore builds a list of potential selectors from the very specific to the very broad. You can see this list on the targeting tab.
To visually explore the different ways you could target elements on the page, simply drag the slider down and watch how the highlighting changes. It doesn’t matter too much if you don’t understand what the CSS selector code to the right of the slider means.
Note, sometimes changing the slider won’t change the appearance of the highlighting because the selectors Microthemer suggests are equivalent in terms of what they target. Or it may be that they are not equivalent but it is hard to determine this without navigating to another page (you can navigate between frontend pages when the selector wizard is open by the way).
Also note, Microthemer does as best as it can to suggest useful selectors based on the HTML of the page. But sometimes one paragraph (for instance) can’t be styled independently of another paragraph because it has nothing unique in its HTML to separate it from other paragraphs. This is a shortcoming in the CSS language that has been addressed in the latest CSS3 specification. But browser support across the board isn’t fully there for CSS3 yet. We are currently looking into an interim workaround for this issue.
The Inspector Tab
The inspector tab of the selector wizard reports 2 things:
The (simplified) underlying HTML of the single element that you double-clicked (or moved onto using the DOM navigator arrows)
The computed CSS of the single element that you double-clicked (or moved onto using the DOM navigator arrows)
The inspector tab is mainly for experienced web developers that are accustomed to regularly inspecting the HTML and existing CSS styles with Firebug or a similar browser tool. The simplified HTML Microthemer reports reveals the ids and classes of the element as this is useful for manually defining CSS selectors.
The 4 directional arrows allow you to navigate the dom via an alternative method to double-clicking things. This is mainly useful when it is hard to directly double-click the element you are aiming for. This can happen when 2 elements are nested inside each other so tightly that you can’t click one without clicking the other (usually the “child” of the element you are aiming for). It’s also necessary to use the dom navigation arrows when targeting an HTML “select” element. Select elements can’t be double-clicked for technical reasons. But you can double-click something near a select element and then use the dom navigation arrows to navigate onto it.
Microthemer reports the computed CSS over the style editing options. But sometimes you might want to see this information for elements you’re not targeting with a selector. Or because it’s quicker to double-click something than it is to find an existing selector in the main menu. If you have the “always show” advanced options checkbox ticked you may find that Microthemer is a very handy tool for quickly viewing the computed CSS on your site.
Customizing Your WordPress Site – Applying New Styles
Heads up! this post was created when Microthemer was at version 2. The current version is 7. Some references to the interface may be out of date.
Microthemer enables you to change the appearance of your WordPress website without writing any code.
Useful Styling Tips
CURRENT STYLE VALUES
The current styles specified elsewhere (e.g. by the person who coded your theme or the plugins you’re using) are displayed over the editing options in light grey text. Once you enter your own style values, the reporting of the existing style values will disappear – but they can still be seen when you hover your mouse over an input field. This hover value is useful when you want to make sure that your style is definitely taking an effect on the page (and not being overridden by a style rule specified somewhere else).
ALL FIELDS ARE EDITABLE
All fields, including drop down menus, are editable – you can type your own values directly into them. The only exception is with ‘image insert fields’, which are changed by using the image insert button (Microthemer prevents manual typing in these fields because the full image path is needed and this is saved behind the scenes when you insert an image using the browse button).
DOUBLE CLICK A FIELD TO APPLY THE SAME VALUE
For options such as padding, margin, and border that have four sides (top, right, left, bottom) you can enter a value into one field and by double clicking that field the same values will be automatically added into the other 3 related fields.
Selector Wizard Advanced Options
You can adjust which ‘selector’ you are targeting through the advanced options (see image below).
The Targeting Tab
When you double-click something on your page Microthemer scans the HTML code looking for potential CSS selector rules that can be used to target the element you double-clicked. By default, Microthemer suggests the most “specific” CSS selector it can. If the HTML on the page allows for targeting just the element that was double-clicked and nothing else, that’s what it will go for. But Microthemer knows that sometimes users want to target a set of elements, such as all page titles, rather than just the page title on the “About” page. It therefore builds a list of potential selectors from the very specific to the very broad. You can see this list on the targeting tab.
To visually explore the different ways you could target elements on the page, simply drag the slider down and watch how the highlighting changes. It doesn’t matter too much if you don’t understand what the CSS selector code to the right of the slider means.
Note, sometimes changing the slider won’t change the appearance of the highlighting because the selectors Microthemer suggests are equivalent in terms of what they target. Or it may be that they are not equivalent but it is hard to determine this without navigating to another page (you can navigate between frontend pages when the selector wizard is open by the way).
Also note, Microthemer does as best as it can to suggest useful selectors based on the HTML of the page. But sometimes one paragraph (for instance) can’t be styled independently of another paragraph because it has nothing unique in its HTML to separate it from other paragraphs. This is a shortcoming in the CSS language that has been addressed in the latest CSS3 specification. But browser support across the board isn’t fully there for CSS3 yet. We are currently looking into an interim workaround for this issue.
The Inspector Tab
The inspector tab of the selector wizard reports 2 things:
The inspector tab is mainly for experienced web developers that are accustomed to regularly inspecting the HTML and existing CSS styles with Firebug or a similar browser tool. The simplified HTML Microthemer reports reveals the ids and classes of the element as this is useful for manually defining CSS selectors.
The 4 directional arrows allow you to navigate the dom via an alternative method to double-clicking things. This is mainly useful when it is hard to directly double-click the element you are aiming for. This can happen when 2 elements are nested inside each other so tightly that you can’t click one without clicking the other (usually the “child” of the element you are aiming for). It’s also necessary to use the dom navigation arrows when targeting an HTML “select” element. Select elements can’t be double-clicked for technical reasons. But you can double-click something near a select element and then use the dom navigation arrows to navigate onto it.
Microthemer reports the computed CSS over the style editing options. But sometimes you might want to see this information for elements you’re not targeting with a selector. Or because it’s quicker to double-click something than it is to find an existing selector in the main menu. If you have the “always show” advanced options checkbox ticked you may find that Microthemer is a very handy tool for quickly viewing the computed CSS on your site.