Skip to content. | Skip to navigation

Using the Beige Palette

— filed under:

How to change the visual theme of your SimpleSite with a few simple steps

 

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.

 

Fine tuning for beige palette

 

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

 

Click on image to enlarge

Sample graphics for a beige banner (500x100 pixels)

  • 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.

Banner Image  Box

 

Step 6: The result after adding a custom logo.

 

Click on image to enlarge.

Beige palette stylesheet + custom banner

 

Document Actions
This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License.
Personal tools