I am truly, madly, deeply in love with Thesis – it is the best wordpress theme, bar none. It is worth every single penny I paid for it. I would pay a lot more. It is probably the most valuable single investment I have ever made for my business. One of the joys is how easy it is to make it look unlike itself. I needed a simple, clean page for a client, with nothing on it, so we could do much as we pleased via the wordpress backend and with all the SEO functionality that Thesis brings plus everything else. All we wanted was a content container with a fine border.
CSS is not one of my great strengths but I decided I had to tackle this small problem and come up with something usable. This is the result of my work, I hope you find it as useful as I have. My thanks to the members of the diythemes forums whose collective wisdom helped me to achieve this.
I have labelled each bit of the code so you can see what it does, and make your own changes as required for colors and so on.
This will produce a clean, blank page, with no header,navigation, sidebars or footer. h1, h2 and h3 have been styled to be larger and in a specific color, and links will be highlighted with a colored background on hover, but these elements can be left out if you so desire. Equally the container size and borders can be changed. The ‘comments closed’ has also been removed. If you want to make changes it should be fairly simple to see what you need to take out.
/*---[Styling For Clean Page]---*/
.cleanpage #header { padding: 0; border-bottom: 0em; }
.cleanpage #header #logo { display: none; }
.cleanpage #header #tagline { display: none; }
.cleanpage .menu { display: none; border: none; }
.cleanpage #content { margin: 0 auto; float: none; }
.cleanpage #sidebars { display: none; border: none; }
.cleanpage #tabs {display:none;}
.cleanpage #content_box { background:none; }
.cleanpage .comments_closed { display: none; }
.cleanpage #footer { padding-bottom: 0; border-top: 0em; }
/*—[Coloured Background for hover on links]—*/
.cleanpage a { color: #YOUR-COLOUR-IN-HERE; }
.cleanpage a:hover { color: ; background: #YOUR-COLOUR-IN-HERE; }
/*—[End Coloured Background for hover on links]—*/
/*—[Headers h1,h2,h3 Formatting]—*/
.cleanpage #content h3 { font-size:18pt; font-weight:bold; color: #YOUR-COLOUR-IN-HERE}
.cleanpage #content h2 { font-size:24pt; font-weight:bold; color: #YOUR-COLOUR-IN-HERE}
.cleanpage #content h1 { font-size:30pt; text-align:center; font-weight:bold; color: #YOUR-COLOUR-IN-HERE}
/*—[End Headers h1,h2 Formatting]—*/
/*—[Container]—*/
.cleanpage #container { width:YOUR-WIDTH-IN-HEREpx; margin-top: 1em; border: 0.2em solid #YOUR-COLOUR-IN-HERE; }
/*—[End Container]—*/
/*—[End Styling For Clean Page]—*/
To use it, simply make the adjustments in terms of colour etc in the code given to suit the feel of your site and paste into the custom_css file. When creating the page itself just add ‘cleanpage’ in the css class box on the page.
You can see the actual sample page here Thesis Clean Page
It may not be the most elegant of code – I am no whizz kid there, but it demonstrates yet again how versatile the fabulous Thesis Theme is. If you don’t have it, do yourself a favour and get it – it’s money well spent.
{ 5 comments… read them below or add one }
That would make a great squeeze page – something I still tend to create in HTML but would prefer to do in Wordpress.
Thanks,
Lisa x
I share your enthusiasm for Thesis. It has changed the way I work – for the better! Thanks for sharing the page template code here – I can see many instances when this will be incredibly useful. Excellent
@ Lisa – Aha! You guessed my cunning plan!
Thanks for this post, this has LOADS of applications.
Wow this is fantastic! As with Lisa I have always taken to creating my squeeze pages in html, just as it makes things so much easier than messing around in Wordpress – but no more!