CSS codes for customizing forum phpbb3 version
CSS to customize the header (header):
- Code:
.headerbar {
background-color: transparent;
background-image: url('LINK IMAGINE');
height: 170px;
background-position: top;
background-repeat: no-repeat;
}
Information:
- Spoiler:
background-color = background color of the header
background-image = background image header
height = height header
background-position = position background
background-repeat = repeat background header (reapet for repeat and no-repeat so as not to repeat)
Customizing background Forum:
- Code:
body {
background-color: #FFFFFF;
background-Image: url('LINK IMAGINE');
background-repeat: no-repeat;
background-attachment: fixed;
background-position:center;
}
Information:
- Spoiler:
background-color = background color
background-image = background image
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-attachment = attachment background (fixed to lock and scroll to the background image to scroll along with the rest of the page)
background-position = position background
Background image from within the forum:
- Code:
#wrap {
background-attachment: fixed;
background-image: url('URL IMAGE');
background-repeat: repeat;
background-position: top center;
}
Information:
- Spoiler:
background-attachment = attachment background (fixed to lock and scroll to the background image to scroll along with the rest of the page)
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
Background image to menu (only the menu!):
- Code:
div#page-header div.navbar {
background-image: url('URL IMAGE' );}
Transform menu in a dynamic menu (works only if you have pictures in the menu):
- Code:
ul.linklist li a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 0.5;}
ul.linklist li a img:hover {
filter:alpha(opacity=100);
-moz-opacity: 0.85;
opacity: 1.0;
position: relative;
top: -2px;}
Information:
- Spoiler:
ul.linklist Li img = images before making contact with mouse
ul.linklist Li img: hover = images having contact with mouse
opacity = opacity
ul.linklist Li img: hover => top = the displacement of images in contact with mouse
This code does not work in Internet Explorer!
Customizing the search box:
- Code:
#search-box #keywords {
width: 95px;
background-color: #ffffff;
}
input.search {
background-image: url('https://2img.net/i/fa/prosilver/icon_textbox_search.gif');
background-repeat: no-repeat;
background-position: left 1px;
padding-left: 17px;
}
Information:
- Spoiler:
# search-box # keywords:
width = width keyword box
background-color = background image of the keyword box
input.search:
background-image = image which is magnifying the keyword box
padding-left = space that is magnifying the keyword box
Hide the search box:
- Code:
#search{
display:none;
}
CSS to customize the message on the homepage:
- Code:
.introduction {
background-image: url('URL IMAGE);
background-repeat: repeat;
background-position: top center;
background-color: #ffffff;
color: #000000;}
.introduction .h3 {
background-image: url("URL IMAGE");
background-repeat: repeat;
background-position: top center;
background-color: #ffffff;
color: #000000;
padding: 5px;
border-bottom: 0px solid #000000;
}
Information:
- Spoiler:
. Introduction (message structure)
background-image = image fundal.Daca do so that does not happen again and keep the background position, you can put wallpaper in title (including covering over message)
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
background-color = background color of the message on the home page
color = color of the text of the message from the home page
. introduction. h3 (message title)
background-image = Background image (it does not reach over the message)
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
background-color = background color Title
color = color of title
padding = height space for title
border-bottom = line that separates from the rest of the message (I selected 0px, so not to appear). You can change the color of them all here.
CSS to hide the Last visit was Thursday, July 16, 2009 - 13:56, new messages, posts, messages that did not answer, Mark all forums read:
- Code:
.linklist {
display:none !important;}
.right, .rightside {
display:none !important;}
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 !important;}
Background image from tables:
- Code:
li.row {background-image: url('URL IMAGE');}
Hover at tables:
- Code:
li.row:hover {
background: url('URL IMAGE');
background-position: center;
background-repeat: no-repeat;}
Information:
- Spoiler:
background-position = position background
background-repeat = background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
Customizing legend:
- Code:
ul#picture_legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('URL IMAGE');
text-align: center;
padding: 24px 0;}
Information:
- Spoiler:
background-position = position background
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
text-align = position legend
padding = space for the legend
Customizing legend private messages:
- Code:
ul#privmsgs-menu {ul#picture_legend{
background-position: center;
background-repeat: no-repeat;
background-image: url('URL IMAGE');
text-align: CENTER;
padding: 24px 0;}
Information:
- Spoiler:
background-position = position background
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
text-align = position legend
padding = space for the legend
Wallpaper of links to copyright:
- Code:
div#page-footer ul.linklist {
background-image: url('URL IMAGE');
background-position: 0 100%;}
Footer background image of site:
- Code:
div#page-footer {
background-image: url('URL IMAGE');
background-position: bottom center;
background-repeat: no-repeat;
padding: 15px;}
Information:
- Spoiler:
background-position = position background
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
padding = distance between copyright and links footer background image of site
Customizing widgets:
- Code:
.module {
background-image: url('URL IMAGE');
background-repeat: no-repeat;
background-position: top center;
border: 1px solid BLACK;}
.module .h3 {
color: white;}
Information:
- Spoiler:
. modules
background-image = image background marked titlurilor.Datorita position, the image appears up the widgets, meaning the title.
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
Widgets border = contour and its color
. modules. h3
color = color titlulilor Widgets
CSS background image to a message:
- Code:
.post {
background-image: url('URL IMAGE');
background-repeat: repeat;
background-position: top center;
}
Information:
- Spoiler:
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
CSS background image of the post box:
- Code:
.ak_msgform_subject_right_td input, .ak_msgform_message_right_td textarea, textarea{
background-image:url('URL IMAGE');
background-repeat: repeat;
background-position: top center;
}
Information:
- Spoiler:
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
background-position = position background
CSS to customize code and spoiler sites:
- Code:
dl.codebox {
padding: 3px;
background-color: lightyellow;
border: 1px solid #C9D2D8;
font-size: 1em;
}
dl.codebox dt {color: purple;}
.codebox dd {color: brown;}
dl.codebox code {color: darkgrey;}
Information:
- Spoiler:
dl.codebox
padding = Title code space / spoiler's
background-color = background color code / spoiler's
border = outline code / spoiler site and its color
font-size: Text size code / spoiler's
dl.codebox dt
Title color = color code / spoiler's
. codebox dd
color = text color spoiler's
dl.codebox code
color = text color code
Customizing buttons Origin Forum (ex ):
- Code:
a.button1, input.button1, a.button2, input.button2, button.button2 {
background-image: url('URL IMAGE');
background-repeat: repeat;
font-family: comic sans ms;
color: #000000;}
Information:
- Spoiler:
background-repeat = repeat background (reapet for repeat and no-repeat so as not to repeat)
font-family = font text
color: color of text
Change Forum at the home button Mause's position over:
- Code:
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, button.button2:hover {
background-image: url('URL IMAGE');
background-repeat: repeat;
}
Change the picture is next to a topic page with several pages
- Code:
.row .pagination {
background: url('URL IMAGE') 0 50% no-repeat;
}
Customizing user's profile information:
- Code:
.postprofile {
color: #000000;
text-align: center;}
Information:
- Spoiler:
color = color of text in profile
text-align = position text in profile (left center right)
Changing the color profile link to profile members of the message:
- Code:
.postprofile a:link, .postprofile a:active, .postprofile a:visited, .postprofile dt.author a {
color: #000000;}
Change color / image background chatbox site:
- Code:
body.chatbox {
background-image: url('URL IMAGE');
background-color: black;}
Information:
- Spoiler:
background-image = image's background chatbox
background-color = background color's chatbox
Color rows that appear in messages / the author and time of posting the chatbox:
- Code:
.chatbox_row_1 {
padding: 4px;
background-color: transparent;
}
.chatbox_row_2 {
padding: 4px;
background-color: transparent;
}
Information:
- Spoiler:
. chatbox_row_1
padding = width space for text
background-color = background color of row 1
. chatbox_row_2
padding = width space for text
background-color = background color of row 2
Customizing Title chatbox site:
- Code:
.chatbox-title,.chatbox-title a.chat-title {
color: #FFFFFF !important;
text-align: center;
font-size: 20px;}
Information:
- Spoiler:
color = color chatbox's Title
text-align = position title (Left Center Right)
font-size = font size title
Change background image chatbox's title:
- Code:
#chatbox_header {
background-image: url('URL IMAGE');}
Change background image of the section below the chatbox's (one in which there are options for message and sending the message portion):
- Code:
#chatbox_footer {
background-image: url('URL IMAGE');}
Adding rounded corners to a particular section:
- Code:
.SECTION NAME span.corners-top { background-image: url('URL IMAGE'); }
.SECTION NAME span.corners-top span { background-image: url('URL IMAGE'); }
.SECTION NAME span.corners-bottom { background-image: url('URL IMAGE'); }
.SECTION NAME span.corners-bottom span { background-image: url('URL IMAGE'); }
Information:
- Spoiler:
. SECTION NAME span.corners-top = top-left corners
. SECTION NAME span.corners-top span = top-right corners
. SECTION NAME span.corners-bottom = bottom left corners
. SECTION NAME = span.corners-span bottom right corners hos
Sections in which you can add rounded corners:
. headerbar = Header
. navbar = Navigation bar
. forabg = list of forums
. forumbg = list of topics
. Introduction = The message on the page layer
. module = Widgets
Written by darkspectre
Translated by DarkPoint
|
Hitskin.com
by WhitePoint September 16th 2009, 9:44 pm
):
Facebook
Twitter
Pinterest
Youtube
