squeeze-user-guide

Note: This is not an installation guide, you can find that on the blog post that sent you here. This is how to tweak the theme once you have it installed. Though I would love to be able to help everyone individually, I’m not available to freely support this. I’m just too busy with other projects I’m afraid — that’s why I have put so much time into this user guide to make things as simple as possible.

How to Change the Title Font

First of all, I recommend that to get the best fonts you use Google Web Fonts. I say they’re the ‘best’ because they load quickly and they tend to look more like fonts that were designed in Photoshop rather than just typical text.

Once you’ve found a font you like select Add to Collection and then scroll down the page to grey box that has appeared and click Use. You’ll then be presented with the following page which gives you code to place in the index.html file.

web-fonts

Add this code as a new line before:

</head>

Web fonts also gives you the CSS code that you need, as shown below:

web-fonts-css

You’ll need to open the style.css file and find ‘font-family: ‘Kavoon’, cursive;’

Replace this line with the line of text from Google web fonts. Refresh (make sure you clear your cache) and the font should have changed.

How to Change the Title Colour

In your style.css file locate the following:

h1.kavoon{
font-family: 'Kavoon', cursive;
text-align:center;
color:#2f2f2f;
font-size:40px;
padding-bottom:30px;
}

The part in bold is the colour reference for the title text. There are lots of HTML colour charts available to get a colour you desire. Here is one of many.

Change the Colour of the Blue Heading

For this, you’ll once again have to open style.css and find this line of text:

#header {
height: 100px;
margin: 0 auto;
background: #40a7d7 url(images/bg.png) repeat;
}

The part in bold is what you need to change to change the colour. There are lots of HTML colour charts available to get a colour you desire. Here is one of many.

How to Add Analytics or Split-Testing Tracking Code

You can use either Google Analytics or Clicky for analytics tracking. Each individual tool will give you your own code for tracking – the same goes for visual website optimizer and Google experiments for split-testing.

Once you have the tracking code, simply add it before the

</body>

code right at the end of your index.html file.

How to Change the Opt-in & Laptop Graphic

First of all, you can locate the image URL in your style.css file at the following location:

.right {
float:left;
width:330px;
height:400px;
background-image:url('http://i.imgur.com/EtPQzXh.jpg');
background-repeat:no-repeat;
}

The location of the image online is available in bold. If you don’t have Photoshop and just wish to add a graphic to the laptop screen, something like Gimp (free) and Pixlr (online, free) are good alternatives.

How to Change the Grass

To locate the grass image url, open your index.html file and look for the following code:

<a href="#" onClick="alert('Why click on the grass? Enter your email in the box to the right for INSTANT ACCESS!')"><img class="displayed" src="http://i.imgur.com/sWji6hR.jpg" alt="describe image" title="describe image"></a>

The image URL is in bold and you can also change the javascript message text here as well. Make sure you don’t include any apostrophes (‘) in the message as that will break the box.

Change the Button Gradient

Open your style.css file and locate the following code:

/*Gradient*/
background: #3ab1e0; /* Old browsers */
background: -moz-linear-gradient(top, #3ab1e0 0%, #0474d1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3ab1e0), color-stop(100%,#0474d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #3ab1e0 0%,#0474d1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #3ab1e0 0%,#0474d1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #3ab1e0 0%,#0474d1 100%); /* IE10+ */
background: linear-gradient(to bottom, #3ab1e0 0%,#0474d1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ab1e0', endColorstr='#0474d1',GradientType=0 ); /* IE6-9 */

Change all instances of 3ab1e0 for the start colour of your gradient. Change all instances of 0474d1 for the end colour of your gradient. There are lots of HTML colour charts available to get a colour you desire. Here is one of many.

To change the colour of the gradient when you hover over the button, do the exact same but do it in reverse. Make sure you find the following code in style.css:

#buttonid:hover {

So now you want to take the bottom colour and replace it with the start colour. Then take the start colour from before, whatever you chose, and make that the bottom colour. Basically you’re doing the opposite of the normal button:id class (not the hover) so that when you hover over the colours reverse and look like you’re really pressing on it.

Change the Button Border

Find the following code in your style.css file:

/*Shadow*/
-webkit-box-shadow: 0px 6px 0px rgba(0, 78, 146, 0.9);
-moz-box-shadow: 0px 6px 0px rgba(0, 78, 146, 0.9);
box-shadow: 0px 6px 0px rgba(0, 78, 146, 0.9);

Then you’ll need to go to a tool like this RGBA colour finder. Once you’ve moved the sliders for your desired colour, simply replace all instances of what is in bold with your new colour code.

How to Create a Privacy Policy

A privacy policy is a legal requirement if you’re collecting email addresses. There’s already a link in the footer of your theme to /privacy/ so simply copy your index.html file and .style.css file into a new folder called “policy”. You’ll need to be able to access your website via FTP so create this folder. If you don’t have these details, please make sure you ask your host how to do this and create the folder. It varies with each host but it’s something you’re definitely going to need at some point so you may as well do it now.

A free tool that allows you to create Privacy Policies for your website can be found here: Generate Privacy Policy

Once you’re done just paste the final text into the index.html file that’s located inside the policy folder. Don’t worry about how attractive this page is or really where to put the text (where the bullet points are is fine). It’s unlikely anyone will actually visit, it’s just there to keep you safe and law abiding.

How to change the Aweber settings

If you use Aweber then you’re in luck because the theme already comes with Aweber integrated. If you don’t have Aweber or any email marketing solution you can get started here for just $1. All you have to do is change the following options in bold:


<input type="hidden" name="listname" value="yourlistname" />
<input type="hidden" name="redirect" value="http://yourdomain/thank-you/" id="redirect_53420f6d904ddb39265ca8c07053889f" />
<input type="hidden" value="http://yourwebsite.com" name="meta_redirect_onlist">
<input type="hidden" name="meta_adtracking" value="squeeze" />

You can find this in the index.html file.

The first option in bold is your list name. If you called your email list ‘squeezepage’ then you would write that here.

The second option is the page you want people to land on after that give you their email address. It’s usually good to send them to a thank you page on your website which reminds them to check their inbox and click on the confirmation link. A good example is my ViperChill thank you page.

The third option is self-explanatory.

The fourth option allows you to put in any word you want, and then when you dig into your Aweber stats at a later date you can breakdown different sources that sent you email subscribers. Feel free to leave this as squeeze if you wish.

If you’re not using Aweber and instead use a service like MailChimp then you’ll have to replace your optin form code with everything between:

<!-- AWeber Web Form Generator 3.0 -->

and

<!-- /AWeber Web Form Generator 3.0 -->

How to Change the Arrow

I highly recommend that you don’t remove the arrow as it’s effective for getting people’s eyes to focus on the opt-in form which is – afterall – where we want them to be paying attention. Sadly this arrow is something that isn’t easy to change the colour of without photoshop. However, you can use a service like Find Icons which has dozens of results for the search term arrow. To locate the arrow just go to the CSS file and locate the following:

.left {
float:left;
width:570px;
font-size:17px;
background-image:url('http://i.imgur.com/q1N20uh.jpg');
background-repeat:no-repeat;
background-position: right 50px;
}

Change the image URL to anything else you wish to show there.