Cool CSS trick for Thesis

Well, it’s another Thesis trick as you can see from the title above. In fact, you could use this for any theme or website on the net today. It might work and it might not, but it has worked on numerous sites for me.

I have 2 previous posts about Thesis customizations that you might want to look at:

• Thesis Customizations for Sitemap and Archives Pages
• 3 Basic Thesis Customizations

I surf a bit and find some interesting sites and find myself asking ‘How they do that?’ I have known how to view a websites source code for sometime now and I use it to find it’s CSS code.

Please note that I’m browsing using Fx (Firefox) and this relates to the Thesis theme.

Finding out what CSS file is being used

Let’s say I surf and find a website and want to duplicate how they created headers, sidebar header backgrounds, sidebar backgrounds, etc. I would go to ‘View’ on the top menu and then click on ‘Page Source’. This would bring up the page source code.You could also just press Ctrl+U, this has the same affect.

Once that is done, I look for any word containing the letters ‘.css’. You can do this by pressing Ctrl+F, fill in what I’m looking for and click on next.

You could see numerous CSS files included in the source code, find the one that ends in ‘custom.css’. This is the one that the Thesis theme uses for custom styling. An example would be the domain name and would have ‘wp-content/themes/’ in the path.

For my site, the link to my custom styling would be :

[css]

http://www.serradinho.com/Blog/wp-content/themes/thesis_151/custom/custom.css

[/css]

No open the websites custom CSS file

Once you have the full path to the custom css file, open a new tab or window using that path in the browser. It should open the file and you will be able to see the custom styling they are using.

Using the custom styling and the page source code, you will be able to create the same effect or even better. Remember that you will have to look for the class in the page source code and then match it to the class defined in the custom styling file. You can then just copy the custom styling and place it in your own custom.css file. You would be able to change some colours, font sizes, background colours, etc.

There are some details that would be hard to recreate as you don’t have access the the custom_functions.php file, but this will still help you with the smaller details.

I hope that this little trick helps you. I would love to know if you already do this or if this is some new method to you.

I love using Thesis and still wonder why I never used it when I started blogging, it has made my life so much easier.

Tagged as: css, css styling, custom, theme, Thesis, thesis trick, trick, Wordpress

• SimplePress WordPress Custom Thesis Skin
• Thesis Tutorial – Display Posts from Specific Categories on Homepage
• WordPress & Thesis theme Enhance Serradinho Blog
• Adding Google Buzz to your Posts & Pages using Google Buzz WordPress Plugin
• Thesis Customizations & 60+ Video Tutorials

WordPress & Thesis Customizations

This webiste is using Thesis theme & WordPress. I can create you a similar website or update yours.

View my services or portfolio for more details.

Author Information

Article by George Serradinho

I am the proud owner of Serradinho and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.