Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1894
Karma: 83 (+86/-3)
|
|
|
|
Different customizations in different forums
Back in January of 2006, Alpha Centauri rose to the challenge of creating a way to use different backgrounds and banners in different forums of the same board. Due to the Runboard's limitations at the time, it was necessary to (1) replace spaces with underscores in forum names and (2) add a nasty HTML hack to the Custom Language Set.
Despite my cringing at having to add an extra <body> tag to the board's code, I later used his technique to do other customizations in different forums, because that was the only way it could be accomplished at the time.
Well, I am pleased to announce that Custom Language Set hacks and ugly underscores in forum names are no longer necessary for accomplishing these same tasks, because Thor added ID attributes to <body> tags today. Thanks, Thor! 
These ID attributes work as follows:
The main page has the ID of "ak_board_home".
The forum IDs are "ak_forum_1", "ak_forum_2", etc., based on the "f#" in that forum's url.
For example, the Announcements forum of Runboard Support has the following url:
http://bakheva.runboard.com/f4
Therefore, the ID for the Announcements forum of Runboard Support is "ak_forum_4".
Now, to customize anything in forum f4 (Announcements) only, you would add #ak_forum_4 and a space before your CSS definition.
For example, let's say you have this in your HTML:
<div class="banner"></div>
You could put the same banner on the main page and in every forum of your board by defining it this way in your CSS:
.banner { height: 200px; background: url(http://URL_TO_BANNER) center no-repeat; }
But to put a special banner in f4, you would add f4's ID at the beginning, like so:
#ak_forum_4 .banner { height: 250px; background: url(http://URL_TO_F4_BANNER) center no-repeat; }
If you want the background of the page in that forum to be different than the background in other forums, you could simply define #ak_forum_4, like so:
#ak_forum_4 { background-color: #eeeeee; }
Last edited by Lesigner Girl, 10/13/2010, 4:27 pm
|
|
7/11/2009, 7:46 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|
