Using the Beige Palette

Click on the arrow to start the video.

For a larger screen, either click on the "You Tube" or "Full Screen" icon near the bottom right corner after starting the video.

[Return to Step 1]

Step 2: Download the CSS stylesheet.

Download now.

Step 3: Copy and paste the text into your site's Custom CSS box.

Where and how?  Simply log in to your site.  From your Home Page, click on the "Edit" tab.  Select "Style" from the row of options near the top (below "Edit Mini Portal").  Then scroll down to the box for "Custom CSS".  Replace everything there with the text from the new stylesheet you copied.  Click "Save".  Use the combined keys of Control-F5 to refresh the browser if you don't see the changed appearance.

Step 4: Fine tune it to your taste.

From the same location as Step 3, you can modify your palette according to the suggestions in the image below. Alternatively, use the handy "Color Help" to select your own.   Click "Save" when you've finished selecting.  Use Control-F5 to refresh the browser if you don't see the changed appearance.

Step 5: (optional) Add a custom logo that blends with the banner.

Click on image to enlarge

• 5a) Have the image with your logo ready
  These instructions assume you already have a graphic logo and/or you know how to create one. Ideally, the maximum dimensions should be 550px wide, 100px high. A narrower image means it's quicker to load your web pages. The total width of the website in our example is 960 pixels.  Make sure to use a web-standard file format (JPG, JPEG, PNG or GIF) for the image. More examples, including dimensions, are available.  The DCN Web Team may be able to find a volunteer to assist if no one in your group can.
• 5b) Upload the image
  Where and how? From your Home page, click on the "Edit" tab. Select "Banner" from the row of options near the top. Click on the "Browse" button to locate the image. Then click "Save". Use Control-F5 to refresh the browser if you don't see the changed appearance.  If you want to switch to another image, select the option for "Replace with new image" before browsing for the image and saving.

Click on image to enlarge for details.

Step 6: The result after adding a custom logo.

Click on image to enlarge.