Examples of forums that have edited their CSS:
- http://roundtable.lefora.com (added a bg images)
- http://www.monkeystealsthepeaches.com (move the sidebar to the right)
- http://forum.unleashingideas.org (changed the colors)
- http://thingstocome.com/forum.html (changed the sytle to fit well in an iframe)
When editing your CSS, you're basically 'over-riding' existing values in order to change them. So we provide you with a blank form, and you have to add CSS modifications. If you make an error, you can always erase your changes and save to restore your forum to defaults. We recommend that you keep a copy of your CSS modifications in a text file on your local computer in case you accidently erase them.
We've included some common CSS element IDs on lefora below. But you can easily find the IDs wth a free tool called 'Firebug', which is a plugin for firefox. Or if you're using Safari on the Mac, you can turn on the Developer Tools to examine a document.
Some Common CSS Element IDs on Lefora
- Page/Body: #page
- Forum Header: #header
- Header Navigation Bar: #nav
- Start a convesation button: #start_conversation
- Main Content area: #content
- Content Category Listing: #content #category-list
- Sidebar: #sidebar
- Search box: #search_wrapper
- Widget Titles: .widget .title_wrapper
- Userbar: #user_bar
Some Examples
Change your body background color to white.
#page {background-color: #FFFFFF;}
Add a background image
#page {background-image: url(http://LINK-TO-YOUR-IMAGE.jpg);}
Change your Header color
#header {background-color: #0000FF;}
Use a header image:
#header {background-image: url(http://LINK-TO-YOUR-IMAGE.jpg); height:200px;}
In the examples with linking to images above, you can use a free image hosting server, like photobucket.com to host your image, then link to it from your forum's CSS. Images should be around 990px wide by 160px high.
Useful links for using images in your forum's CSS:
- Fee images to search & download: http://flickr.com/search/?l=cc&mt=photos&q=&m=text
- Note, these are Creative Commons licensed images, that means you must give attribution by placing a link to the original photo in your forum to thank them.
- Free service for editing and cropping images: http://www.picnik.com
- Free Image Hosting: http://www.photobucket.com
You can post questions from this tutorial at: http://support.lefora.com/2008/12/17/questions-on-custom-css/
