How to change PunBB's chat box background color

Go down

Solved How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 5:52 am

I have tried everything in CSS, but nothing changed the white background color to black. Please help thanks in advance!

Code:
/* Chatbox-------------------------------------------------------------*/
body.chatbox {
   background-color: #0b0b0b;
   }
#chatbox_header {
   height: 30px;
   }
#chatbox_header.main-head {
   padding: 0 1.3em;
   color: #dedfdf;
   background-color: #1f537b;
   }
.chatbox-title,.chatbox-title a.chat-title {
   color: #dedfdf;
   text-decoration: none;
   }
.chatbox-title {
   float: left;
   margin: 0;
   padding: 2px 5px 0 5px;
   width: 15em;
   }
.chatbox-options {
   float: right;
   list-style: none;
   font-size: 11px;
   margin: 0.7em 0.5em 0.5em 0.5em;
   }
.chatbox-options li {
   display:inline;
   }
.chatbox-options li,.chatbox-options li a,.chatbox-options li label {
   color: #dedfdf;
   }
#chatbox_members {
   position: absolute;
   top: 30px;
   bottom: 30px;
   width: 180px;
   overflow: auto;
   border-right: 1px dashed #ccc;
   }
#chatbox_messenger_form {
   margin: 10px 0 0 0;
   }
#chatbox_members .member-title {
   text-align: center;
   padding: 0.5em 0.25em;
   background-image: none;
   font-size: 12px;
   background-color: #f4f9fd;
   color : #00569c;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   }
#chatbox_members ul {
   list-style: none;
   margin: 0 0 0 1em;
   }
#chatbox_members ul li {
   margin: 0.5em 0.5em 0.5em 0;
   }
#chatbox {
   position: absolute;
   top: 30px;
   left: 181px;
   right: 0;
   bottom: 30px;
   overflow: auto;
   line-height: 10px;
   }
#chatbox p {
   line-height: 1.2em;
   }
.chatbox_row_1 {
   padding: 4px;
   background-color: #fbfbfb;
   }
.chatbox_row_2 {
   padding: 4px;
   background-color: #f4f4f4;
   }
.chatbox_row_3 {
   padding: 4px;
   background-color: #f4f9fd;
   }
#chatbox .user {
   font-weight: bold;
   }
.memberlist_row_1 {
   background-color: #fbfbfb;
   }


Last edited by Elzzin on Fri Apr 15, 2011 7:07 am; edited 1 time in total

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Base on Thu Apr 14, 2011 7:59 am

Hi, may I have a link to your forum please? Smile

EDIT: Or follow Nera.'s instructions below.


Last edited by Base on Thu Apr 14, 2011 8:06 am; edited 1 time in total
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Nera. on Thu Apr 14, 2011 8:03 am

1.This is what changes basic background color in PunBB chats (white to black).
Code:
#chatbox {
background-color: #your code here;
  }

2. Changing color codes of rows you will change your row colors.
Code:
.chatbox_row_1 {
  background-color: #fbfbfb;
  }
.chatbox_row_2 {
  background-color: #f4f4f4;
  }
.chatbox_row_3 {
  background-color: #f4f9fd;
  }
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2015
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 8:38 am

@Base wrote:Hi, may I have a link to your forum please? Smile

EDIT: Or follow Nera.'s instructions below.

http://forum.ltderp.co.cc
Here is the link, thanks!

EDIT: @Nera. Let me try it in a bit, the admin panel is not allowing me to go in. Anyway thanks for helping!

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Base on Thu Apr 14, 2011 9:00 am

Nera.'s codes should work. She forgot the members section, though. Razz

You will also need this code:

Code:
#chatbox_members {
    background-color: YOUR HEX COLOUR CODE HERE;
    border-right: 1px dashed #CCCCCC;
    bottom: 30px;
    overflow: auto;
    position: absolute;
    top: 30px;
    width: 180px;
}
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 9:09 am

@Base wrote:Nera.'s codes should work. She forgot the members section, though. Razz

You will also need this code:

Code:
#chatbox_members {
    background-color: YOUR HEX COLOUR CODE HERE;
    border-right: 1px dashed #CCCCCC;
    bottom: 30px;
    overflow: auto;
    position: absolute;
    top: 30px;
    width: 180px;
}

Thank you, these are useful, by the way I can't go into admin panel, is there any reason why? Sorry if I have being off topic, but I can't try those codes without going into admin panel Razz

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Base on Thu Apr 14, 2011 9:12 am

Another problem regarding this admin panel? There is something clearly wrong as five people can't be a coincidence. scratch
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 9:17 am

Hmm it started not long ago, maybe 1 or 2 hours ago, cause I was still messing around with the CSS back then. Hope it's fixed ASAP Very Happy

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Gangstar15 on Thu Apr 14, 2011 9:19 am

Maybe the FM staff making an update.
avatar
Gangstar15
Forumember

Female Posts : 392
Reputation : 163

http://www.designdrops.net/

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 10:40 am

Admin Panel works now and those codes worked perfectly, now there is another part i wanna change it's color, the background color behind the buttons is still white, which one do I edit to change that?

EDIT: Never mind I got it :wouhou:

By the way is there a way to change the logout and login message colors?

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Nera. on Thu Apr 14, 2011 12:55 pm

On chatbox? Login bouttons letters color?
Refresh |
Archives |
Log in

Change the color code in this part.
Code:
.chatbox-options li, .chatbox-options li a, .chatbox-options li label {
    color: #YOUR COLOR CODE HERE;
}
avatar
Nera.
Energetic

Female Posts : 7078
Reputation : 2015
Language : English
Location : -

http://webartzforum.com

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Thu Apr 14, 2011 1:03 pm

I mean message in the chat box which is like this
[04:02:09] Niz has joined the chat on Fri 15 Apr 2011 - 4:02
This one is shown as green, let say i wanna change it to yello. How do I do that?

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Base on Fri Apr 15, 2011 3:55 am

Nope, that's a prebuilt message and it is not possible to edit the colour. Wink
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Elzzin on Fri Apr 15, 2011 7:07 am

Ok thanks, everything is solved XD

Elzzin
New Member

Posts : 7
Reputation : 0
Language : English

Back to top Go down

Solved Re: How to change PunBB's chat box background color

Post by Base on Fri Apr 15, 2011 7:10 am

Glad to be of your assistance. Very Happy

>> Locked.
avatar
Base
Forumaster

Male Posts : 10386
Reputation : 1693
Language : English and French
Location : United Kingdom, England

http://forumotionhub.net

Back to top Go down

Back to top


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