The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

CSS Tutorial for your forums

View previous topic View next topic Go down

CSS Tutorial for your forums

Post by Nessa on July 23rd 2008, 12:12 pm

CSS Tutorial for your forums


Quick CSS tutorial to make your forum look smarter.

Throughout the forum CSS has been referred to, to make text larger, smaller and to
align text and tables however it can also be used to clean and hide
certain parts of the forum. Relatively easy to use, CSS only hides the
forum sections to make it look cleaner rather than deleting sections
just in case you change your mind later.

1. Log into your forum and access the “Administrator Panel”
2. Select “Display”
3. Select “Colors”
4. You should now be able to select the “CSS Style Sheet” tab

! The sheet will be blank if you have not used this before!


5. Once you selected the relevant text from below simply add the text to this section and press “Submit”, this will be reflected on your forum immediately.

Phpbb2:

Hide "Who Is Online" Text:
Spoiler:
.cattitle{
font-weight: bold;
font-size: 12px ;
letter-spacing: 1px;
color : #006699}
a.cattitle{
text-decoration: none;
color : #006699;
display:none
}

Hide "Time & Date, legend bar and text":
Spoiler:
.gensmall {
font-size : 10px;
display: none
}
.gen,.genmed,.gensmall {
color : #000000;
}
a.gen,a.genmed,a.gensmall {
color: #006699;
text-decoration: none;
display: none
}
a.gen:hover,a.genmed:hover,a.gensmall:hover{
color: #dd6900;
text-decoration: underline;
}



Phpbb3:

Hide "Legend bar"
Spoiler:
ul#picture_legend, ul#privmsgs-menu {
text-align: center;
display: none;
}
ul#picture_legend li, ul#privmsgs-menu li {
display: inline;
margin: 2px 10px;
display: none;
}
ul#picture_legend li img, ul#privmsgs-menu li img {
vertical-align: middle;
display: none;
}

Hide "Stats"
Spoiler:
#page-body p.page-bottom {
margin: 0;
display: none;
}

Hide "Last post"
Spoiler:
dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info
span, ul.topiclist dd.time span, dd.redirect span, dd.moderation span {
display:none;
padding-left:5px;
}

Hide "Navbar"
Spoiler:
ul.linklist li {
list-style-type: none;
width: auto;
font-size: 1.1em;
line-height: 2.2em;
display: none;
}

Punbb:


Hide "Legend Bar"
Spoiler:
ul#pun-legend li {
display: none;
margin-right: 20px;
}

Hide "Online list"
Spoiler:
#onlinelist p {
line-height: 150%;
display: none;
}

Hide "Time & Date"
Spoiler:
#pun-visit {
border-color: #dddddd;
border-style: solid;
border-width: 1px;
padding: 0.6em 1em;
background-color: #f4f4f4;
margin: 0 0 1em 0;
display: none;
}

Change "navigation background colour"

Colour background:
Spoiler:
#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-color: #ffffff;
border-color: #dddddd;
}

Or

Image background:
Spoiler:
#pun-head #pun-navlinks {
padding: 0.5em 1.1em 0.6em 1.1em;
background-image: url('http://yourimagehere.jpg');
background-repeat: repeat-x;
border-color: #dddddd;
}

When it comes to sprucing up your forum you can alter the look of each
section to make it look a little different. Thanks to Jalokims tutorial
we now know how forumotion make their four section thread.



However what if you don’t want four sections and you want to make the one section look good........?
That can be done with the following procedure.

1. Log into your forum and access the “Administrator Panel”
2. Select “General”
3. Select  “Categories & Forums”
4. You need to first of all create a new “Category” by pressing and selecting “Category” from the drop down.
5. You don’t need to add any descriptions, just a name. Select to create a “Forum”
6. For the name enter the following “”, this will create a blank space to keep it in keeping with your forum.
7. Select   it should then look white in color like this  
8. Now add the Following code
Code:

width="100%">  


[table border="0" cellpadding="5" cellspacing="5"][tr]    [td]
width="31"> <img>
src="http://i37.tinypic.com/v7fwow.png">
[/td]   [td width="284"] Title/Link[url=http://help.forumotion.com/]
href="">[/url][url=http://help.forumotion.com/]
style="font-weight: bold; color: Red;" href="">
style="text-decoration:
underline;">[/url]

size="1"> Forum description Goes
here
[/td]    [td]
width="31"> <img>
src="http://i33.tinypic.com/29yd77.png">
[/td]   [td width="284"] <img>
src="http://i33.tinypic.com/29yd77.png">[url=http://help.forumotion.com/][/url]
size="1">
[/td]  [/tr] [/table]

9. Now press the 
again and you will now see the table with a picture and text to the
right, edit the text and title, turn the title into a link. Press on
the picture and press delete replacing with your own picture
10. Once done “Save”
11. Press “Display”
12. Select “Structure & Hierarchy”
13. Select “Split categories On Index: Medium” and “Save" again
This will now give you the following effect, similar to the four
section except it gives you a new style if you only have the one forum.






Craig


Nessa
Energetic

Female Posts : 6203
Reputation : 127
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum