Tutorial: Match your PAS Site

This tutorial is to help new publishers get up and running with a PAS site that matches their existing site. It is expected that you have some HTML/CSS knowledge and understand how your primary site works. To do this, there are a few relatively simple changes which will make a huge impact:
1. Background Color
2. Container Widths (page width, column widths)
3. Header (logo, etc)
4. Fonts (paragraphs, headings, etc)
5. Primary/Top Navigation from “main” site

In this example, I will use the 2 Column Fixed Width Blue template as the starting point. All changes are in one of 3 file in the CMS:
css > layout.css
css > theme.css
layout > layout.html

NOTE: For info on how to add images and use them inline or as background images, first read the post on how to Upload/Add Images.

1. Background Color
This is the easiest change and is pretty straightforward.

theme.css, line 2

body {
background: #6A8FB5;
font-family: Arial, Helvetica, sans-serif;
}

2. Container Widths (page width, column widths)
All of the container widths are set within layout.css. Adjust the width of each and don’t forget to update margins/padding as well.

layout.css

body {
text-align: center;
margin: 0 auto;
}

#container {
width: 825px;
margin: 0 auto;
overflow: hidden;
}

#leftside {
float: left;
width: 200px;
padding: 10px 0 0 0;
margin: 0 0 0 10px;
}

#content {
text-align: left;
float: right;
width: 600px;
padding: 10px 0 0 0;
margin: 0 10px 0 0;
}

3. Header (logo, etc)
HTML
First you need to copy the HTML from the primary domain. Then paste/save in over the “Rakeback by sitename” text. If you have an image such as a logo, be sure to upload to the CMS and update path in the HTML.

layout.html, line 22

<div id=”header”>
Rakeback from {{ site_name }}
</div><!– end header –>

CSS
There are likely some styles you will want to copy over for the items like a logo, header background, heading text, etc. I recommend placing all relevant CSS at the end of theme.css. Also, you may want to adjust header div here:

theme.css, line 39

#header {
background: #234E81;
color: #fff;
padding: 15px;
font-size: 22px;
text-align: left;
}

4. Fonts (paragraphs, headings, etc)
All changes are within theme.css.

Paragraphs
theme.css, line 23

p {
margin: 0 0 12px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: left;
color: #000;
}

Headings
theme.css, line 64

/* HEADINGS */
h1.pas {
color: #2F65A8;
font-size: 20px;
font-weight: bold;
border-bottom: 2px solid #2F65A8;
margin: 0 0 8px 0;
}

h2.pas {
color: #2F65A8;
font-size: 14px;
font-weight: bold;
margin: 0 0 6px 0;
}

h3.pas {
color: #000000;
font-size: 12px;
font-weight: bold;
margin: 0 0 4px 0;
}

5. Primary/Top Navigation
Most sites which get integrated already have a top navigation which means that the PAS pas_nav_top content has to be moved into the sidebar.

HTML
First you need to copy the navigation HTML from the primary domain. Then paste over the pas_nav_top div. If you have an image such as a logo, be sure to upload to the CMS and update path in the HTML.

layout.html line 25-39

<div id=”header”>
Rakeback from {{ site_name }}
</div><!– end header –>
<div id=”pas_nav_top”>
<ul>
<li><a href=”{{ tld }}”>Home</a></li>
{% if signed_in %}
<li><a href=”{{ tld }}/my-account/my-account.html”>My Account</a></li>
{% else %}
<li><a href=”{{ tld }}/members/new”>Sign Up</a></li>
{% endif %}
<li><a href=”{{ tld }}/rakeback-offers.html”>Offers</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
</ul>
</div><!– end pas_nav_top –>

<div id=”leftside”>

Since the PAS top nav is now gone, we need those items placed in the sidebar. Paste the following over the existing pas_nav_side and pas_login section of divs. Be sure to get the first token ‘if signed in’ all the way to ‘endif’ token. I’ve highlighted the tokens to show where logic tokens are.

{% if signed_in %}
<div id=”pas_nav_side”>
<ul>
<li class=”header”>Navigation</li>
<li><a href=”{{ tld }}/my-account/my-account.html”>My Account</a></li>
<li><a href=”{{ tld }}/my-account/statistics/statistics.html”>Statistics</a></li>
<li><a href=”{{ tld }}/my-account/trackers/trackers.html”>New Tracker</a></li>
<li><a href=”{{ tld }}/my-account/trackers/existing-trackers.html”>Existing Trackers</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/my-account/payments/payments-index.html”>Payments</a></li>
<li><a href=”{{ tld }}/my-account/profile/profile-page.html”>User Profile</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
<li><a href=”{{ tld }}/logout”>Logout</a></li>
</ul>
</div>

{% else %}
<div id=”pas_login”>
<form name=”login” method=”post” action=”{{ stld }}{{ login_path }}”>
<table cellspacing=”0″ class=”pas_form” width=”190″>
<thead>
<tr>
<th colspan=”2″>Login</th>
</tr>
</thead>
<tbody>
<tr>
<th>Login</th>
<td><input name=”login” id=”login” class=”login” value=”{{ login }}”></td>
</tr>
<tr>
<th>Password</th>
<td><input name=”password” id=”password” class=”login” value=”” type=”password”></td>
</tr>
<tr>
<td></td>
<td><input type=”checkbox” name=”remember” value=”1″ “checked”> Remember Me</td>
</tr>
<tr>
<td align=”right”><input type=”submit” value=”Login” class=”pas_button”></td>
<td><a href=”{{ tld }}/user-login/password-reset.html” class=”pas_button”>Password Reset</a></td>
</tr>
</tbody>
</table>
{% form_authentication %}
</form>
</div>

<div id=”pas_nav_side”>
<ul>
<li class=”header”>Navigation</li>
<li><a href=”/”>Home</a></li>
<li><a href=”{{ tld }}/members/new”>Sign Up</a></li>
<li><a href=”{{ tld }}/rakeback-offers.html”>Offers</a></li>
<li><a href=”{{ tld }}/promotions/promotions.html”>Promotions</a></li>
<li><a href=”{{ tld }}/refer-a-friend/refer-a-friend.html”>Tell A Friend</a></li>
<li><a href=”{{ tld }}/faq.html”>FAQ</a></li>
<li><a href=”{{ tld }}/member_tickets/”>Contact Us</a></li>
</ul>
</div>
{% endif %}

CSS
Again, just copy relevant CSS from primary domain and paste at the bottom of theme.css. Update paths for any background images.

Summary
This is a fairly top level overview of how to match a PAS site. If you have any questions, feel free to contact me with questions at

.