Customising your affiliate site's appearance with stylesheets
Your affiliate sales sites are designed to be rebrandable, allowing you to match your company identity.
Duration & skill level
of the web marketing options video at 7m 0s
Intermediate, 30 minutes plus.
Doing this yourself requires the following competencies:
- A basic grasp of Cascading Stylesheets (CSS)
- Ability to upload CSS files to your webspace
Examples
Here are a couple of examples of what you can do:
http://electrocom.dmswitchboard12.com a site without a graphic header
http://sb.rightroyalnumbers.co.uk a site with customised graphic header and footer images
Instructions
Get a dedicated development brand to develop your stylesheet
This way any unfinished changes won't show up on your main sales site until you've got it right.
To get a development brand:
- sign up for an additional dealership
- as the brandname enter something like: <your-usuaul-trading-name>-test
Download sb12_simple.css to use as your starting point
You can customise many aspects of your site's appearance by editing the rules this stylesheet contains, including:
- Headers, menus, footers and body text styles
You can't change any of the slide show graphics at the moment
See Affiliate Site Styling Demo for an example.
The stylesheet responsible for that mess is here.
Take a look at the switchboard affiliate site's stylesheet demo pages
These document which CSS rules affect which page elements.
Make your own stylesheet
Copy sb12_simple.css and rename it (e.g. sb12.css).
Open it in a text editor, or a program like Dreamweaver, and start making changes.
The demo pages, together with comments in the stylesheet, should allow you to locate the rules for the page elements you want to change.
Upload your modified stylesheet to some webspace you own
e.g. if you renamed the stylesheet sb12.css and you control the domain 'mysite.com' you could put it at http://www.mysite.com/sb12site_resources/css/sb12.css
Tell us where you put your stylesheet
In your development dealership's control panel (dmAdmin), reached by clicking its icon in your Clubhouse, select "Branding All" from the left-hand-side menu.
Find the field labelled "Site Stylesheet URL", enter the full URL of your uploaded stylesheet, then save the changes.
See how your site looks
Go to http://<your-development-brand>.test.dmswitchboard12.com and have a look around.
NB: Use ".test" infront of the main domain to suppress site-caching.
Remember to check the home page and some 'inner' pages, and to test your work in all the main browsers (Internet Explorer, Firefox, Safari and Chrome).
Adjust your stylesheet until you are happy
It usually takes some trial-and-error to get a stylesheet right.
Note: If changes to your stylesheet don't appear on your site when you refresh a page try clearing your browser's cache. How to do this varies by browser (Google it if you don't know how).
Configure your main brand to use the stylesheet
Go to your main dealership's control panel.
Under 'Branding All' enter the 'Site Stylesheet URL'.
Note: If you move your stylesheet (change it's URL durung development) please follow the instructions on clearing your affiliate site's brand and page cache.
See #5108 Affiliate site text substitutions - Troubleshooting
Check your site to confirm that your changes have taken effect
Go to http://<your-brand>.dmswitchboard12.com and have a look around.
Clear your browser cache and the site cache if they don't appear to be in effect.
- Follow the instructions in #5108 Affiliate site text substitutions – troubleshooting section
- Clear your browser's cache (how to do so varies by browser, Google it if you don't know how)
Tips and tricks
Adding your company logo to the header
You can add your company logo to the site header by creating a 960px x 100px background image, and uploading it to your webspace.
- Edit the #header rule to add the background image containing your logo and branding.
- In the #header h1 a rule set the display property to none.
Example:
#header
{
background-image: url("http://<your-webspace>/sb12/images/your_header.png");
}
/* Site name in header - wizzle consider setting to "display: none;" if using a custom background image in #header above */
#header h1 a
{
display: none;
color: #305F6C;
}
Advanced CSS customisation
More advanced cusomisation can be achieved by using sb12_compex.css as a starting point. You'll need a good grasp of CSS.
Download sb12_complex.css here
Related content
#5107 dmswitchboard12.com introduction
#5108 Affiliate site text substitutions