I know
this has been talked about before, but since I have so many of you on Thesis I thought I’s quickly show you how to easily strip down a Thesis page to it’s bare bones so that you can use it for a sales letter. It’s quick and dirty and works beautifully.
.
.
First create a new page using the “No Sidebars” template and enter “salesletter” (you can use whatever text you like) in the CSS Class box located at the bottom of the SEO Details and Additional Style window (make sure it is active in your Screen Options).
Now you want to add some customizations to your Custom CSS file. If you don’t have it active, Thesis will let you know.
Open the Custom File Editor (see diagram for location) copy and paste the code below into the bottom of the page. Be sure that it doesn’t add any unusual characters in the process. I’ve had that happen to me. To be safe you can first paste it into Notepad or another text editor then copy and paste from there.
.
.
/* Salesletter cleanup */
.salesletter #header { padding: 0; border-bottom: 0em; }
.salesletter #footer { padding-bottom: 0; border-top: 0em; }
.salesletter #footer { display: none; }
.salesletter #sidebars { display: none; border: none; }
.salesletter #tabs {display:none;}
.salesletter #content_box { background:none; }
.salesletter .comments_closed { display: none; }
.salesletter #header #logo { display: none; }
.salesletter #header #tagline { display: none; }
.salesletter #content { margin: 0 auto; float: none; }
.salesletter .menu .rss { display: none; }
.salesletter .menu { display: none; }
.salesletter .to_comments { display: none; }
.salesletter .headline_area { display: none; }
/* Salesetter Styling Code */
.salesletter #container { width:750px; margin-top: 1em; border: 0.1em solid #bdbdbd; }
.salesletter a { color: #111; }
.salesletter a:hover { color: ; background: #f2e127; }
.salesletter #content h2, .sale #content h1 { font-size:30pt; text-align:center; font-weight:bold; }
.salesletter #page { background: #fff; }
body.salesletter { background: #B4CDF0; }
I won’t go into what all this does, but basically it strips out the headers, footers, sidebars, nav bar and all those distracting elements you don’t want in a sales letter. Anytime you want to create one you just enter “salesletter” into the CSS Class box and viola you have a nice clean page. You can customize this page to your heart’s content by changing the colors, page width, borders and other good stuff.
There are tons of resources on the we about CSS. For a good start visit The CSS Tutorial.
Here’s a before and after of what a new page would look like on this site using this technique:
Bob,
Thank you so much for the tutorial and the code. I have been looking for a way to set up a clean page. I copied you code and it worked perfectly. The whole process took less than a minute. I’m not very familiar with CSS but your code is very clear and easy to understand.
Thank you again for posting this.
Thanks Fred, I’m glad it worked for you. I should have mentioned that you can change the colors to anything you like, particularly the last line which is the background color. I think that one is a light blue. Here’s a link to a simple color picker tool that will give yo the hex code of any color: http://www.colorpicker.com/
Hi Bob,
Excellent post!
Thanks for posting the code, and sharing this with us. I have been meaning to sit down and figure out how to do this… Now I don’t have to thanks to you! Bravo for a well written and easy to understand tutorial!
Thanks again,
Jay
Jay,
I’m glad you found it helpful. There’s so much good Thesis information available that you probably don’t need to figure too many things out.
Bob
hi,
my site uses 2 sidebars (one on each side of the content) – your code removes only 1 of the sidebars. how can i format the css to remove the other sidebar?
thanks
Sally,
You make an excellent point. And I modified the post to address it. Just use the “No Sidebars” template for your sales letter. and you won’t have to write any code to suppress your sidebars. Send us a link to your sales letter so we can check it out.
Bob
fixed!
thanks!
Hi Bob,
Can someone with NO tech skills get this done? My skill sets lie in Fitness Coaching — the thought of attempting this freaks me out. Everyone says I should outsource, but I need to become proficient getting in and around my own site — at least putting up a sales page.
Would your advice be to shut-up and go for it?
Thank you –
Jeff
Jeff,
Thanks for your comment. I wouldn’t put it that way…but just go for it. You can’t hurt anything. If something breaks just delete the code you pasted into custom.css and re-save.
If you’re already using custom.css then put the new code at the bottom. It is executed from top to bottom so last items have precedence. Like your mother telling you to do one thing on Monday and the opposite on Tuesday.
Have fun.
Bob
Thanks Bob,
I’ll do it, and report back — thank you.
JT
Thanks Shavon, I’m glad you found it useful.
I have tons of things to post about and just need to carve out the time.
Hey Bob, brilliantly simple. In 5 minutes I have just cleaned up all of my Thesis based sites and their sales pages!
Genius 🙂