Re-Styling a chatbox with CSS from scratch

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

If you have experience designing with CSS and a basic knowledge of the DOM, it'd make things a lot easier. I'd recommend reading through this if you haven't : http://www.w3schools.com/css/default.asp It's pretty good for beginners.

I've not spent time with the newer versions of AWC, so I can't really tell you what effects what. The best thing to do would be to use your browser's developer tools to inspect the DOM and find a class or ID to style the element.

Ok thanks I will read through that Ange,

If I provided the CSS I used before would this give you a better idea of the effects and what is what and what not?

Not entirely. CSS is just a set of style rules for HTML elements. I'd need to visually know what elements the selectors affect. Here's a rundown of the process of getting a selector from an element in the DOM :

1. Open the tools F12 or dev tools from a menu
2. Go to the DOM inspector and click select element to choose an element from the screen
3. Traverse the DOM to find the element and analyze its attributes
4. Create a style rule from the elements attributes by class, tag, id, etc...



I'd actually write the CSS in the Style Editor, but I needed an extra window to show a CSS example.

I was planning to take the latest AWC for a spin, but at the moment I'm working on a few projects and also studying. I'll get to it though, there's no rush..

Ange Tuteur wrote:Not entirely. CSS is just a set of style rules for HTML elements. I'd need to visually know what elements the selectors affect. Here's a rundown of the process of getting a selector from an element in the DOM :

1. Open the tools F12 or dev tools from a menu
2. Go to the DOM inspector and click select element to choose an element from the screen
3. Traverse the DOM to find the element and analyze its attributes
4. Create a style rule from the elements attributes by class, tag, id, etc...



I'd actually write the CSS in the Style Editor, but I needed an extra window to show a CSS example.

I was planning to take the latest AWC for a spin, but at the moment I'm working on a few projects and also studying. I'll get to it though, there's no rush..

Hmm.. ok I will see what I can do.

Hello,
Please note that the custom CSS is no longer in the acp, i removed it, I do not know if this will effect Dev tools or not, but i copy what I got in Dev tools for you.

Here is a screen shot of the Developer tools for you (from a Chrome book):


Let me know if this helps any. Or if you need anything in particular. But I tried I do not know much about Developer tools.

But again please note I removed the css that was in there before and replaced it with the standard AWC CSS. If you need the exact code for the CSS that I had before let me know, I will get it.

I can go by the first post image when I use Avacweb chat. It's pretty simple and flat to be honest. Mostly including these properties :

color:#FFF;
background:#038BC9;
border:1px solid #FFF

Then some blacks for the background it looks like.

Oh ok, but do you think from this information we can get the chatbox look like this:


I can provide the previous css styling if it can help any. The above screenshot was taken after the css styling was removed.

Thanks for all so far,
-Brandon

brandon_g wrote:Oh ok, but do you think from this information we can get the chatbox look like this:


I can provide the previous css styling if it can help any. The above screenshot was taken after the css styling was removed.

Thanks for all so far,
-Brandon

If you need the css I will get it for you as soon as my tablet decides to connect to the wifi at my house (I hope it will be today or at least very soon). Just let me know if you need it or anything else.

Sorry, I was busy yesterday. Try this :

Code:

.achat_button, #awc_userlist h4.member-title {
  color:#FFF !important;
  font-weight:bold !important;
  border:1px solid #FFF !important;
  background:none !important;
  box-shadow:none !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:#FFF !important;
  background:#444 !important;
  box-shadow:none !important;
}
.achat_row,#awc_tabs {
  background:none !important;
  border:none !important;
}

Wow that pretty much hit the nail on the head! Nice thanks Ange... now say I ever wanted to edit this design or if something breaks again, what would be the easiest way for myself to fix it?

What I mean is, if the code ever needed tweaking for any reason what does what so I know what to fix or adjust.

Thanks again so much!
-Brandon

Honestly ? If you've no experience in CSS or exploring the DOM to find what does what, you're going to have a tough time trying to do things yourself. I do however, think that the selectors in the style rules provide a pretty explicit description of what they do.

For example :
The class .achat_button affects the buttons.

Hey! I am working on it! I have been watching youtube videos and studying on w3schools and I know a little bit of stuff.

For example

Code:

h1 {
      background-color= #00FF0C;
}

Will give you a greenish background color. I am slowly getting it, I just wanted to make sure is all.


(Also do not forget I do 90% of things on my tablet nowadays since the pc here is slower then a snail in quick sand , the tablet does not have a DOM that I know of, that screenshot I had to take from the school computer. )

Thank you for everything.

I really appericate it very much Ange .
-Brandon

I'm only being honest..

I have a small correction for your rule above.

Code:

background-color= #00FF0C;

Property values aren't assigned using the = operator in CSS. They're assigned with a colon.

Code:

background-color: #00FF0C;

The DOM ( Document Object Model ) is pretty much a tree of HTML elements created when a webpage is loaded. So technically, any web browser has an HTML DOM.

For learning web development, simply take it at your own pace. Start with HTML, go to CSS, and then JavaScript. There's no need to rush, otherwise you can end up missing important points. Furthermore, you should always study from different sources and refresh your mind once in awhile, because there can always be something you've missed. Rereading is an excellent way, but practicing by creating your own documents, scripts, etc.. is essential.

I didn't learn what I know over night, it's been almost 2 years I've been studying and I still am.

Yeah that is true Ange, I may try playing around with the styling for the chatbox on my test forum, see what I can accomplish. I suppose I should put the styling on my main forum 1st though before I start playing with it.

I catching on to it slowly, there are so many little rules that do so many things that it can take awhile. Honestly I think I am learning rather quickly as well, because when I came back in December I knew nada (or had pretty much forgotten most of it) about the acp besides how to add, remove or modify forums and categories. I re-learned that really quick, now I have begun learning the coding ways a bit, html is pretty stright forward, if you do not know something simply try one thing and if that does work try another.

Thanks for all the help so far!

-Brandon

brandon_g wrote:Oh ok, but do you think from this information we can get the chatbox look like this:


I can provide the previous css styling if it can help any. The above screenshot was taken after the css styling was removed.

Thanks for all so far,
-Brandon

Which part can I use to change the background of the chatting area (see how the above image has a black one)?

I tried fiddling around with different think in it including .chat_button but only managed to chat the outside border of the chat to black.


What I have tried:

I have tried playing with the .chat_button and only managed to change the border outside the chatting area.
I tried also playing around with #awc_header and the line below it that says { background: #038B09}
And got no result.

I am trying to change it the chatting area background color (where the text is displayed) to #0000 .

I have tried these experiments on my test forum. http://www.testingduo.forumotion.com

Thanks for all help so far,
-Brandon

#awc_rightbox for the chatbox and #awc_userlist for the memberlist.

Ok I tried changing it on my test forum. No result .

The CSS for #awc_rightbox is:

Code:

#awc_userlist, #awc_rightbox, #awc_message {
  color:#000000 !important;
  background:#000000 !important;
  box-shadow:none !important;
}


I have also included in the one below when I tried experimenting with #chat_row

Code:

#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;
}

Is there anything else I can try?

Thanks for all the help so far,
-Brandon

Do you have CSS to modify the chatbox already in your stylesheet ? If so, remove it or modify it.

The only other thing added is the standard css to keep pm's private and a tiny line to make the default text color gray (otherwise the text is nearly impossible to read without sun glasses).

-Brandon

Is that enough information?
If you need more let me know?

Any idea why it won't change the background? I will keep experimenting with it later today to see what else I can do with it.

Sorry, I've been busy.

I thought the whole CSS I gave you before changed the background color to black.

here : https://fmdesign.forumotion.com/t344-re-styling-a-chatbox-with-css-from-scratch#2610

No, it didn't it changed everything else except the background.

You can see the AWC on my test forum in this screenshot: http://prntscr.com/6nxr9e

I had to ask LG how to make the default text color gray because it was so terrible and hard to read.

-Brandon

...that looks like the default avacweb skin

Could I see your entire stylesheet for that forum ?

Sure thing... here you go.... but the only other thing on there is for your database.

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 */

Code:

/* 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; }

Code:

avacweb_chat_config.add_event('onload', function () {
  $(avacweb_chat.id('achat_color_button')).after('Smileys');
});
.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 */