Re-Styling a chatbox with CSS from scratch

First topic message reminder :

Heelo,

So I was using a custom styled AWC Chatbox before FM'S updates to the chatbox. After their updates it pushed the buttons out of view and hid them. It was styled using 'px' which I hear (even from coders and webmasters of paid sites) that 'px' can be a pain to use. I thought after playing with it for awhile that it should be re-styled by hand myself using 'cm' and/or 'mm'. So my question here today is more is if I can seek pointers, advice and helpful suggestions on how I can go about this


I would like it to look similar to how it was before the updates (like in this screenshot):


but I would like the code styling to be 'cm' or 'mm' which much easier to work with.

This is my 1st time trying to style anything by hand with CSS but I hope that this project can help me learn and pick things up quicker.

Css and other things available upon request and a test forum is available to style it on.

Any help would be appericated and thanked greatly.

-Brandon

You have a snippet of javascript code above your chatbox style. Most likely making the CSS afterwards invalid. Remove it :

Code:

avacweb_chat_config.add_event('onload', function () {
  $(avacweb_chat.id('achat_color_button')).after('Smileys');
});

Yeah, that snippet is essetial for the smiley's button to work, it is a bit different with phpbb2, that was provided by LG himself as a fix. So does the styling need adjustment? Because that has to stay.

JavaScript doesn't belong in a CSS file, it'll cause errors. So, that snippet in there is doing nothing, but causing problems with style rules. It looks like it should have gone in your Avacweb chat config.

He gave me css to put in here: http://www.avacweb.com/t2291p45-smilies-not-working-on-awc-chat#22736 I am confused... is that not the css he personally gave? I mean its defintelly not the js because the JS was larger. I am confused!

1 simple step. Remove the following code from your stylesheet because it's invalid :

Code:

avacweb_chat_config.add_event('onload', function () {
  $(avacweb_chat.id('achat_color_button')).after('Smileys');
});

Once you do that, the content in your stylesheet will be valid.

*sigh*

Ok, I will remove it, your the expert and I trust your skills.

Ok I removed as you said, the script is now as seen below, but it has made no difference .

Code:

/* --- START DATABASE CP --- */
body.databaseBody { color:#666; font-size:11px; font-family:Verdana,Arial,Helvetica,sans-serif; background:#DEF; }
body.databaseBody a { text-decoration:none }
#db_wrap { background:#FFF; border:1px solid #CCC; width:80%; margin:40px auto; padding:3px; }
#db_wrap h1 { color:#479 !important; font-size:18px; border-bottom:1px solid #479; padding-bottom:3px; margin:3px 0; }
.database_table { background:#FFF; border:1px solid #CCC; border-spacing:0; width:100%; overflow:auto; }
.database_table a { background:none !important; display:inline-block; white-space:nowrap; overflow:hidden; max-width:100px; }
.database_table tr:nth-child(even) { background:#FFF }
.database_table tr:nth-child(odd) { background:#DDD }
.database_table tr:hover { background:#FFA }
.database_table td { border-right:1px solid #CCC; border-bottom:1px solid #CCC; padding:3px; }
.database_table tr.table_data { background:#EEE; box-shadow:0 10px 6px rgba(255,255,255,0.3) inset, 0 -10px 6px rgba(0,0,0,0.05) inset }
#db_list { background:#EEE; border:1px solid #CCC; float:left; width:150px; min-height:200px; padding:3px; margin-right:6px; }
#db_list .database { color:#999; text-shadow:1px 1px 0 #FFF; text-align:center; font-weight:bold; font-size:10px; background:none; border:1px solid #CCC; border-radius:3px; cursor:pointer; margin:3px 0; padding:3px; }
#db_list .database:hover { color:#479; border-color:#479; }
#db_list .database.dbactif { background:#DEF; color:#69B; border-color:#8BD; }
#db_tables { background:#EEE; border:1px solid #CCC; overflow-x:hidden; padding:3px; }
#innertable { height:400px; overflow:auto; }
.db_nav { text-align:right; background:#EEE; border:1px solid #CCC; padding:5px 3px; margin:6px 0; }
.db_nav a, .db_button, tr.table_data a { color:#999; text-shadow:1px 1px 0 #FFF; text-transform:uppercase; background:none; border:1px solid #CCC; border-radius:3px; display:inline-block; padding:3px 6px; margin:1px 3px; cursor:pointer; }
.db_nav a:hover, .db_button:hover, tr.table_data a:hover { color:#479; border-color:#479; }
.db_nav a:focus, .db_button:focus, tr.table_data a:focus { color:#8BD; border-color:#8BD; }
.db_title { color:#479; font-size:12px; font-weight:bold; border-bottom:1px solid #479; padding-bottom:3px; margin-bottom:3px; }
.db_info { color:#58A; text-shadow:1px 1px 0 #FFF; text-align:center; background-color:#DEF; border:1px solid #BCD; border-radius:3px; padding:5px 3px; margin:6px 3px; }
.db_erreur { color:#C66; font-size:12px; text-shadow:1px 1px 0 #FFF; font-weight:bold; height:20px; }
.db_overlay { background:rgba(0,0,0,0.3); position:fixed; top:0; left:0; right:0; bottom:0; z-index:999; }
.dbo_content { background:#EEE; border:1px solid #CCC; width:65%; height:50%; overflow:auto; padding:3px; position:absolute; top:20%; left:15%; }
.dbo_content.process { color:#996; text-shadow:1px 1px 0 #FFF; text-align:center; font-size:16px; font-weight:bold; width:30%; height:auto; padding:6px 24px; left:30%; top:40%; }
.db_textarea { color:#333; background:#FFF; border:1px solid #CCC; border-radius:3px; width:90% !important; height:50% !important; resize:none; display:block; padding:3px; margin:3px auto; }
.db_textarea:hover { border-color:#479 }
.db_textarea:focus { border-color:#8BD }
/* --- END DATABASE CP --- */
/* START fa_like */
.fa_like_row { margin-top:6px }
.fa_like_list { font-style:italic; min-height:25px; }
a.fa_like_button, .fa_like_button, .fa_liked { color:#FFF; font-size:10px; background:#6A6; border:1px solid #686; border-radius:3px; display:inline-block; padding:3px 6px; cursor:default; }
.fa_liked { cursor:default; opacity:0.3; }
a.fa_like_button:hover { background:#3A3; border:1px solid #383; cursor:pointer; }
/* END fa_like */

/* START Awc Styling */
    .a_chat_pm tr, .a_chat_pm td, .a_chat_tab tr, .a_chat_tab td {
        display:none!important;
    }
    .a_chat_pm:before, .a_chat_tab:before {
        content: 'Hidden Content';
        font-style: italic;
    }
    h4.away, h4.away + ul {
        display: none;
    }
.achat_row { color: gray; }
.achat_button, #awc_userlist h4.member-title {
  color:#000000 !important;
  font-weight:bold !important;
  border:1px solid #FFF !important;
  background:#000000 !important;
  box-shadow: #000000 !important;
  text-shadow:none !important;
}
#awc_header, #awc_footer, #awc_userlist h4.member-title, #avacweb_chat_button { background:#038BC9 !important }
#awc_userlist h4.member-title {
  border-radius:6px !important;
  margin:3px !important;
}
#awc_userlist, #awc_rightbox, #awc_message {
  color:#000000 !important;
  background:#000000 !important;
  box-shadow:none !important;
}
.achat_row,#awc_tabs {
  background: #000000 !important;
  border:none !important;
}
.bodyline {
border: 5px #868686 solid!important;
border-radius: 10px;
box-shadow: 0px 0px 15px #ffffff;
}
/* END of Awc styling */

Can you provide me with a test account ? It'll be a whole lot easier to figure out what's going on.

Ah sure thing.. I got to create one first.

Edit: PM sent Ange .

I'm not sure what happened before, but I repasted the CSS and it's displaying fine now.

Hmm... wierd...


If I provide you a test account to my main forum... would you ge willing to install it again there?

Warning: There is much more css to sort through on there . You seem to have a magical touch.. all coding around you bows down before you.

If you consent, I will send you details to a test account.

If you haven't added the CSS, I'd paste it at the top of your stylesheet. If you have existing CSS for the chatbox, remove it and paste the CSS I provided in my post in its place.

If none of that works, feel free to send me a PM with the necessary information.

Well I have the css you developed for the awc chatbox in my css stylesheet on my main forum, yes, however, it has the same issue as the one the test forum is. I remove it, but I would need to go on the pc and I don't have time (only because it should take naturally 5 minutes, actually even less to complete this task, but on that pc it will take an hour and half... if I am luck) , the stylesheet on my main forum is pretty full, it has a lot in it, more then my test forum, so trying remove it and re copy and paste it from my tablet is a tedious task and takes very long because I can't I highlight and backspace... I have to remove it character by character (using the backspace button)... it is just a lot of time. I have a test account I can provide you, I will give it acp priviledges when i get home, reset the password then send you the details.

Besides, it seems to only like you, haha I copied and pasted the css and it didn't work, you do it and it does. So because of the fact that the pc is incredibly unbelievable slow at the house I live at, it is tedious from a tablet, it has a lot of css in it and the css listens to you, makes it easier and faster for you to do it.

I will send you a pm later this afternoon/evening.

-Brandon

The information you provided didn't work.

Oops... I must have made a typo when resetting the password... It should work with the info I provided now.

Done.

Thanks Ange.. your the best like always .

No problem