Chatbox Detail Color Changes

Hello,

I'd like to edit two things on my forum's chatbox, so I'm hoping someone could help me by providing a code. I am wanting to change the color of the border that goes around the chatbox avatars and then I also wish to change the color of the line that separates the chat from the "online/offline" status list.

My forum's version is phpBB3, the url is listed below, and I want to say thank you to anyone that has the time to assist with this feature. I really appreciate your time.

www.gatewaytoroleplay.com

Hello @Leah7,

Add this in your CSS:

Code:

#chatbox .cb-avatar {
border:1px solid XXXXXX!important; /*for the avatar border*/
}
#chatbox_members{
border-right:1px solid XXXXXX!important; /*for the line that separates chatbox from memberlist*/
}

That should fix both of your problems!


Luffy

Thanks!  Both codes seem to work perfectly, but I seem to have a white line above and to the left side of the avatar, for some odd reason.  O-o Is there any way I can fix that?



Here is the code that I have, at this time:

Code:

/* Chatbox Avatar */
    #chatbox .cb-avatar img{
    border:1px solid #303030!important;}    
   #chatbox .cb-avatar {background:none !important }
   #chatbox .cb-avatar {border:none!important;}


Good evening Leah,

Apply this to your CSS Stylesheet:

#chatbox .cb-avatar{
border: 0px !important;
}

Regards.

There was no change.

Leah7 wrote:There was no change.

Try replacing your code with this:

Code:

/* Chatbox Avatar */
    #chatbox .cb-avatar img{
    border:0px solid #333!important;}   
  #chatbox .cb-avatar {background:none !important }
  #chatbox .cb-avatar {border:none!important;}

That also had no change, but thank you for trying. =)

This should do the trick:

Code:

#chatbox .cb-avatar {
    background: none repeat scroll 0 0 #fff;
    box-shadow: 0 2px 2px rgba(0,0,0,0.1);
    float: left;
    height: 30px;
    margin-right: 4px;
    padding: 1px;
    vertical-align: middle;
    width: 30px;
}

No luck.

Try to put this at the first line of your CSS stylesheet:

Code:

#chatbox .cb-avatar {
border: 0px !important;
}


This didn't remove it, either. According to some, I probably won't be able to fix it, because the stupid border appears in the code that comes from the option to make avys activated in the admin panel option. >( Grrr.

Leah7 wrote:This didn't remove it, either. According to some, I probably won't be able to fix it, because the stupid border appears in the code that comes from the option to make avys activated in the admin panel option. >( Grrr.

If that's the case, try this code. It's a javascript that gets the highest priority and can overwrite the styles.

Modules > JS codes management > New
Placement: All

Code:


$(function() {
  $(document.body).append('<style>#chatbox .cb-avatar {border: 0px !important;}</style>');
});


That didn't work, either. No change.

May I ask for the script you're currently using?

As in all of my CSS, or all javascripts?

@Leah7 do you have a test account i can use to take a look ? if so please pm me it XX

APE wrote:@Leah7 do you have a test account i can use to take a look ? if so please pm me it XX

@APE This border appears in every chatbox avatar. Just activate a chatbox in any FM forum, use the Inspect Element and you'll see. Mark, there's no script -- it's a Admin CP function and it comes with an external CSS that, even with JS, seems very hard to override (just the border part).

@Leah7 would you be willing to deactivate the native avatar function from the chatbox and we rebuild it using JS?

Regards.

@APE
If I can't get the Js for this to work, then I'll make you a test account and let you know!

@Ace
I won't mind using the Javascript code, instead of the admin panel feature. ^^

Hi @Leah7,

See if the following CSS rules work for you.

1. Avatar border color

Code:

body.chatbox #chatbox .cb-avatar {
  border-color:#333 !important;
}

2. Memberlist division line

Code:

#chatbox_members {
  border-color:#333 !important;
}

Thank you, Ange~

The separation bar is changed nicely, but the avatar border doesn't go away, unfortunately.

Since this cannot be resolved, it can be closed.

Should be reported to @Buttercup tho.

@Rhino.Freak, since this is not really a bug, it is not worth really bothering Buttercup over. If you want this to be changed (within the feature), I would suggest making a suggestion about it in the suggestions section .

Topic locked on topic starter request ~brandon_g

-Brandon