The Mystical World of Roger.

Hello, My Name is Roger and I enjoy HTML, CSS, and Photoshop. Maybe I can show you some things.

Toying with Viviti CSS


Been getting deeper into my base stylesheet for this site and have found it pretty easy to customize any element with Firefox and Firebug.  A combination of the Firefox Browser and Firebug developer tool, you can easily find a specific element on the page simply by right-clicking it and selecting "Inspect Element". 

In the screenshot to your right, I am right-clicking the comments section used for my blog entries.  This will allow me to figure out what CSS declaration to use to customize that piece of a Viviti blog component.

The Firebug Workspace

Firebug Debugging Tool ( allows you to expose not only the markup that wraps the contents of your website, but all the generated HTML that may be dynamically injected via javascript.


Above, we see what has happened after choosing to Inspect Element on the comments area.   The containing element with class of metadata (<div class="metadata">..</div>) was selected in the Firebug HTML window and the element itself is highlighted on the page.  Now we can easily figure out how to target that with our CSS selector.

The Comments CSS Selector


In this screenshot, we are viewing Firebug's Style inspector/editor which shows the CSS declaration used to add that subtle rounded edge bar.

Since the DIV metadata container was contained within a post_wrapper parent, I kept the CSS selector down to .post_wrapper .metadata. { .. }. If you step back through the markup, the master parent of each blog is conveniently classified as blog_post. So your selector could even be .blog_post .metadata { // your css properties; }

Whatever you choose to do with your Viviti website and/or blog, Firebug is an invaluable tool for any web geek of any skill level.   Later on, let's discuss some hidden javascript gems that the Viviti system ships to your website.

Go Back