Layout code: how do i change the chat box colour?

HTML & CSS
1

Hello there guys!

I’m pretty new to this with coding, but I’m currently working on a layout for a web based game, just to use on my account page, I have been told that to change the chat box colour i will need to use div.box but i can’t figure out how to do it. I just want to change the colour to FA952F.
And it´s like the colour of the whole left side that will need to be changed. :slight_smile:

Could anyone help me with this?

This is the full layout code:


<style type="text/css">body {background-color: #DB7093 ! important;color: #000000; background-image: url('http://i40.tinypic.com/2rdj52h.jpg '); background-repeat: repeat;background-position: center center; background-attachment: fixed; } #FCD116 .submit , #FCD116, .chatarea { background:#000000 !important; color: #000000; font-family: Verdana; border: 1px doted #FA952F !important;}.widget, .button {background:#FA952F !important; color: #does  not matter; font-family: Verdana; border: 2px solid #FA952F !important;} #banner { opacity:0.9;} ul, li {background:#8ACADF !important;} #main {background: #FA952F; border: 1px dotted #FA952F !important; opacity:0.9; box-shadow: none !important; -webkit-box-shadow: none !important; -afl-shadow: none !important; -o-box-shadow: none !important; -icab-box-shadow: none !important; -khtml-box-shadow: none !important;} .cat1, .cat2 {background-color: #8ACADF!important; font-family: Verdana !important; color: #000000 !important; font-size: 14px !important; border: 1px dotted #FA952F !important;} input,textarea,select {background: #FA952F !important; font-family: Verdana; border: 1px dotted #FA952F !important;} tbody, table, td, tr {font-family: Verdana !important; background-color:#FA952F !important; border: #FA952F 1px dotted !important; box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -icab-box-shadow: none !important; -khtml-box-shadow: none !important;} .htd{ box-shadow: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; -o-box-shadow: none !important; -icab-box-shadow: none !important; -khtml-box-shadow: none !important;} #footer{background-color: #FA952F!important;} a, a:link, a:visited, a:active {color:#ffffff !important;text-decoration:none;font-family: Verdana;} a:hover {color:#ffffff !important;font-family: Verdana;} 
 </style>

This is the areas that should be changed!

Thank you!:slight_smile:

2

Hi, welcome to Sitepoint.:slight_smile:

Unfortunately you don’t supply enough information for us to help with you this. You say “just to use on my account page” but that doesn’t mean anything to us but I guess you are talking about something like a wordpress log in page or perhaps an account page in gmail, yahoo or something similar or perhaps some other CMS?

If you have access to the underlying css and html files it may be possible to change the elements you require but we will need to see the html that refers to those elements. Do you have a link to the page concerned or can you provide us with more information about the system you are trying to change? :slight_smile:

It looks from the code you have posted above that the chatarea colour is defined here.


#FCD116 .submit, #FCD116, .chatarea {
	background:#000000 !important;
	color: #000000;
	font-family: Verdana;
	border: 1px doted #FA952F !important;
}

So to change just the chatarea colour you would change as follows.


#FCD116 .submit, #FCD116, .chatarea {
	background:#000000 !important;
	color: #000000;
	font-family: Verdana;
	border: 1px doted #FA952F !important;
}
.chatarea{background:# FA952F !important;}
3

It worked! :smiley: Thank you!