The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

CSS codes for customizing phpBB3 forums

2 posters

Go down

Tutorial CSS codes for customizing phpBB3 forums

Post by WhitePoint September 16th 2009, 9:44 pm

CSS codes for customizing phpBB3 forums


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:


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 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 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:

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:

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:

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:


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:

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:


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:


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:

CSS background image to a message:
Code:
    .post {
    background-image: url('URL IMAGE');
    background-repeat: repeat;
    background-position: top center;
    }

Information:
Spoiler:

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:

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:

Customizing buttons Origin Forum (exCSS codes for customizing phpBB3 forums Altele10):
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:

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:

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:


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:


Customizing Title chatbox site:
Code:
.chatbox-title,.chatbox-title a.chat-title {
color: #FFFFFF !important;
text-align: center;
font-size: 20px;}

Information:
Spoiler:

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:


Written by darkspectre
Translated by DarkPoint

WhitePoint
WhitePoint
Active Poster

Male Posts : 1206
Reputation : 11
Language : Romanian, Spanish, English, Catalan and a little French
Location : Tarragona, Spain

View user profile http://www.our-time.biz/forum.htm

Back to top Go down

Tutorial Re: CSS codes for customizing phpBB3 forums

Post by skouliki February 9th 2020, 9:36 am

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

updated 09.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 12337
Reputation : 1519
Language : English,Greek
Location : Greece

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

Back to top Go down

Back to top

- Similar topics

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