Use Google Chrome to inspect other Thesis based sites

Ever wonder how that Thesis based blog makes their sidebar look so cool, or how they create that awesome looking menu?  Well, good news - while you can't look at everything they did, you can easily inspect the CSS Style sheet changes they've made.  How?  Google Chrome has a built in development tool that let's you do all sorts of useful things, one them being view and edit the CSS styles for any tag or section on any website.

Using Google Chrome Developer Tools to inspect a Thesis based site

This technique isn't limited to just inspecting Thesis based sites, you can use this to inspect the underlying HTML and CSS for any site.  For this article though, I'll specifically focus on looking behind the scenes at a Thesis based site and in particular, this one.  One of the questions I often gets asked is how I created the main menu.  We'll use Google Chrome's inspection tool to learn how.

First, pull up Side Income Blogging in Google Chrome.  If you don't have Google Chrome, head over and install it. Chrome has become my main browser of choice due to it's speed, it's significantly faster than other browsers.

With Side Income Blogging pulled up, click on the wrench icon to the far right near the top, here's a screen shot to help  you find it:

Goto the Tools menu and select Developer Tools.  A new section will open up at the bottom of your browser, that looks as follows (highlighted in yellow):

This new section is the Google Chrome Developer tools and it has a ton of various abilities.  In this article, we're only going to look at one of them, the inspect element tool.  This tool will allow you to hover over sections of a website or blog and view the underlying HTML and associated CSS.   The inspect tool is the small magnifying glass at the bottom left corner.  When you click it, your cursor turns into a hand with a pointing finger.  As you move the hand around on the site, sections of the site are highlighted.  Move your cursor over the Start a Money Making Blog menu item and click it.  Note, that the left section in the Developer tools shows the HTML tag for the menu, and the right sections shows the associated CSS code.

The HTML code is basically an <a> tag, or anchor tag and the associated CSS set's the color to a bright green, and the background color to transparent.  You can now click on HTML tags in the HTML section and see their associated CSS.  Click on the HTML that says: <ul class="menu">.    This is the main menu for Thesis and the same menu controlled in the Thesis Design options.  In the CSS window on the right, you can see the associated CSS for the highlighted tag and scrolling through you can see the CSS for any parent tags.  Note the CSS tag also tells you the CSS file where the CSS code resides.  The one's you'll be looking at for any custom Thesis CSS are the one's located in the custom.css file.

Really no magic here, I'm basically removing the borders and setting the colors.  So where does the faded background graphic come from?  To find that, you'll need to poke around a little more.  Look up from the <ul class="menu"> tag until you see <div id="header_area" class="full_width"> and click on it.  This is a tag that gets created, along with a few other "area" tags when you specify a Thesis site to be full-width in the design settings.  When you click on the header_rea tag, note that over in the CSS window the following CSS code is shown:

background: url(/wp-content/themes/thesis_185/custom/images/header-bg.jpg) repeat-x scroll 0 0;

This is the magic - I'm using a graphic to set the header background and menu background together.  You can even click on the graphic to see what it looks like.  The background graphic is only 1 pixel wide, but I repeat it in the X direction (horizontally) so it repeats and fills the header all the way across.  This background graphic, combined with turning off the borders, setting the custom foreground colors and fonts renders the Side Income Blogging menu.

While certainly a simple example, you can use these same principles to inspect any site, Thesis or not and see how the designer or owner did the underlying code.  I've used this countless times when trying to replicate a particular style or even to satisfy my own curiosity on how something was done.

Use Chrome Developer Tools to try out CSS changes

Another really slick feature, that I use very frequently when building sites, is the ability to change the CSS "on the fly".  This feature allows you to preview what a specific CSS change will look like, before you actually make it.  Let's use my menu again for our example.  Navigate back to Side Income Blogging using Google Chrome, open up developer tools and inspect "Start a Money Making Blog" again.  Click on the anchor tag if it's not already highlighted.  Note, the highlighted menu color is a bright green.  Over in the CSS section, you'll see the following line associated with this tag: color: #00D944;

Click on the #00D944, and you'll note you can now edit it.  Replace the #00D944 with say, #FF0000 and press enter.  Note, the green menu text is now red.  You can also disable a style, by clicking on the checkbox next it.  This CSS edit capability only changes for the site you are viewing and the change is only for you.  This does not modify the actual site.  This simple ability is extremely powerful, in that it allows you to make changes and see them "on the fly".

Not only can we edit existing lines, you can add new CSS lines as well.  Again, make sure the Start a Money Making Blog menu is highlighted, move over to the CSS window and at the end of the line that says: background-color: transparent, double click and you'll note a new line is added where you can type in some CSS.  Type in: text-decoration: underline; and you'll note the menu is now shown in underline.

I often use this edit ability to play around with different colors and sizes to avoid trial and error of editing the custom.css file, saving it, reloading the site, repeat again until we get it right.  Making the changes on the fly in Chrome is much easier.

Google Chrome developer tools

Of course this just scratches the surface of the functionality available in developer tools.  Feel free to play around and see what it can do, I've found it to be an invaluable tool for my day to day design and development work.   They have also saved me a considerable amount of time tracking down why a particular HTML or CSS change isn't working as well.

Good luck, and let me know of anything "cool" you discover!

Photo by: katerha

Larry Deane is the founder and editor of Side Income Blogging. He is a full-time IT professional and part-time entrepreneur, writer and software developer. Larry loves teaching and helping others about how they can start and earn money by blogging. Most importantly, Larry loves spending time with his wife and 6 kids. You can find Larry on Google+ and Pinterest.

Get FREE Updates