WishList Master

WishList Member certifed developer of WordPress based membership sites

  • Home
  • About
  • Contact

Make Your Sales Page Within Thesis

February 12, 2010 By Bob Patterson 12 Comments

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:

Filed Under: Thesis

Comments

  1. avatarFred Villareal says

    May 13, 2010 at 11:32 pm

    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.

  2. avatarBob Patterson says

    May 14, 2010 at 5:45 am

    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/

  3. avatarJay Wilson Jr. says

    July 15, 2010 at 1:00 am

    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

  4. avatarBob Patterson says

    July 19, 2010 at 5:55 am

    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

  5. avatarSally says

    October 4, 2010 at 5:47 pm

    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

  6. avatarBob Patterson says

    October 5, 2010 at 12:33 pm

    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

  7. avatarSally says

    October 5, 2010 at 8:29 pm

    fixed!

    thanks!

  8. avatarJeff says

    October 8, 2010 at 9:21 am

    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

  9. avatarBob Patterson says

    October 8, 2010 at 12:47 pm

    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

  10. avatarJeff says

    October 8, 2010 at 10:35 pm

    Thanks Bob,

    I’ll do it, and report back — thank you.

    JT

  11. avatarBob Patterson says

    November 15, 2010 at 9:10 am

    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.

  12. avatarAJ Silvers says

    August 24, 2012 at 2:47 am

    Hey Bob, brilliantly simple. In 5 minutes I have just cleaned up all of my Thesis based sites and their sales pages!

    Genius 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Avatars by Sterling Adventures

Copyright © 2022 Patterson digital Media LLC · Log in

Home · Blog · Contact · Sitemap