Changing the style with a custom stylesheet

This is definitely an advanced web-design topic, and knowledge about css is a definite requirement to create something that will work.

The first step is to find out what to change, this has to be achieve by looking at the current html code and css stylesheet. Let's say that you want to change the header image, at the top of every page, you'll find that the dom id that sets the header background is h1#title. To override that you can set something like:

h1#title { background: url(https://another_webserver/filetransfer/header.png) no-repeat; }

If you want to use the Filetransfer appliance to serve the images as well, create and put the images in /var/sfta/public/images/custom/ on the server. You can then reference it instead like:

h1#title { background: url(/images/custom/header.png) no-repeat; }

A couple of other pointers

Every page has it's own unique dom id, on the format of #page_pagename, look in the body tag for this. This is useful if you only want to style one particular page without affecting any others. I.e.

#page_account_home #bd {background-color: #ddd;}

Will change the background color in the area between the header and footer image to a light gray only on the front page.

Tools

Having the right tools when dealing with custom styling is key, a couple of recommendations are

  1. The Web Developer plugin for Firefox
  2. CSSEdit - Brilliant CSS Editor for the mac
  3. A graphic editor. Photoshop is the daddy, but anything that you're comfortable with will do.
filetransfer/custom_stylesheet.txt · Last modified: 2009-03-10 20:24 by allard