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.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Pocket
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!
We use cookies and other services to give you the best possible experience on our website. If you continue without changing settings, we'll assume you are happy with this.