Say for example you wanted to target a website title with some extra letter spacing, this is one of countless quick and safe modifications you can do with some custom CSS like this:

#siteTitle {
letter-spacing: 3px;
}

But how do you know the site title in your theme has an ID of siteTitle? What if it was instead something else like mainTitle or Top-Title or something else? Or what if it did not have an ID, but a class selector instead? This is where things can get confusing if you cannot clearly see what you are trying to target.

Elemental is built on the free and open source Debucsser plugin. This stack itself is also provided for free, in the hope it will help RapidWeaver users who want to modify things in webpages exactly like real web designers and developers do on a daily basis.

Example

View this webpage in a desktop web browser, using a newer browser like Firefox, Chrome, Safari, Opera or Edge. Hold down the CTRL key on your keyboard and mouseover different parts of the page. You will see a HUD (heads-up display) shown, which gives you precise information about the element you are pointing at.
 

Setup

Elemental is extremely easy to use. Simply install the stack element in the normal way. Open your Stacks library. Drag and drop a copy of Elemental into your webpage. Hold down the CTRL key, while mousing-over different page elements. The ID or class of the element is displayed to you, together with sizing information.

This stack helps you quickly get class and ID selector names of different page elements. A more novice-friendly alternative to the traditional web inspector.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.