CSS Tutorial for your forums

Go down

Tutorial 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;
}

Craig

Nessa
Nessa
Energetic

Female Posts : 6203
Reputation : 128
Language : English

View user profile

Back to top Go down

Tutorial Re: CSS Tutorial for your forums

Post by skouliki on February 10th 2020, 1:35 pm

This code was updated to fit in with the new HTTPS address

updated 10.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 8817
Reputation : 1151
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Back to top


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