Skip to content. | Skip to navigation

Using your own custom CSS and graphic logo (include video tutorial)

How to change the appearance of your SimpleSite with a few simple steps.

 

Click on arrow to start 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: Have your stylesheet ready.

You don't need to include the <style></style> tags. They are supplied for you. Whatever you specify will override the SimpleSites default stylesheet except for the areas mentioned in Step 4.

Step 3: Copy and paste it 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 your stylesheet text.  Click "Save".  Use Control-F5 to refresh the browser if you don't see the changed appearance.

Step 4: Fine tune it to your taste.

The current SimpleSite settings allow those without CSS knowledge an easy means to modify the finer details.  This however means those specific areas will override your CSS.  You can easily fix it.  Here's how: 

From the same location as Step 3, fill in the color code of your choice or use the handy "Color Help" to select the color for the 4 specific areas (see example in diagram below)  Then  "Save".  Use Control-F5 to refresh the browser if you don't see the changed appearance.

Fine tuning the color scheme

 

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

From your Home page, click on the "Edit" tab.  Select "Banner" from the row of options near the top.  Click "Browse" to search for the graphic logo.  Highlight the selected file, then click "Open".  Click "Save".  Use Control-F5 to refresh the browser if you don't see the changed appearance.

 

 

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