Just installed new version for Joomla on my site but it looks it doesnt fit perfectly with the template i use.
Is there a way to use default Blastchat template?<br><br>Post edited by: Prutkar, at: 2006/05/23 08:15

Very soon I will be adding Admin menu &quot;CSS&quot; where you will be able to find (copy/paste) CSS definitions that you can use to modify your template's CSS file, but for eager ones like yourself, here it is:

Simply copy/paste to your template_css.css (Joomla, Mambo) or template.css (Joomla 1.5):

QUOTE:
/*this will modify background of window*/
body.blastchat {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background: url('../images/outer_center.png');
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader {
background-color : #4DA5FF;
color : #FFFFFF;
padding: 0px 0px 0px 0px;
font-weight : bold;
letter-spacing : 0px;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:link {
color: blue;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:visited {
color: blue;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite messages stripes*/
.bc_sectiontableentry1 {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background-color : #FFFFFF;
}

/*definitions to adjust/overwrite messages stripes*/
.bc_sectiontableentry2 {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background-color : #F3F3F3;
}

/*from nick*/
/*message sent from me*/
.bc_msg_from {
font-weight : bold;
}
/*to nick*/
/*message sent to me*/
.bc_msg_to {
font-weight : bold;
}
/*user list my own nick*/
.bc_usr_to {
font-weight : bold;
}

/*private message sent*/
.bc_msg_text_privs {
color : blue;
}

/*private message received*/
.bc_msg_text_privr {
color : red;
}

/*definitions to adjust/overwrite submit form area*/
.bc_sectiontableheader_form {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background: url('../images/outer_center.png');
background-color : #F3F3F3;
}

<br><br>Post edited by: Prutkar, at: 2006/05/22 13:03

ciao Peter, i tried to modify the template_css.css file as u suggested. I added the code at the end but it seems that the style of the template i used for my site keep overriding everything

I added the CSS file i tried to modify too.



/* CSS Document */
iframe {float: right;}
html {
height: 100%;
}

body {
height: 100%;
margin-bottom: 1px;
}

#main {
padding:2px; border: 1px solid #282828
;
width: 802px;
margin-left: auto;
margin-right: auto;

}
.clr {
clear: both;
}
.contentpane {
width: 735px;
}

.outline { border: 1px solid #282828
;
background: #000000;
padding: 2px;
/*
width: 802px;
margin-left: auto;
margin-right: auto;*/
}

#buttons_outer {
width: 735px;
margin-bottom: 2px;
margin-right: 2px;
float: left;

}

#buttons_inner { border: 1px solid #282828
;
height: 21px;
}

#pathway_text {
position: absolute;
bottom: 2px;
left: 2px;
overflow: hidden;
display: block;
height: 25px;
width: 628px;
line-height: 25px !important;
line-height: 22px;
color: white;
padding-left: 4px;
}

#pathway_text img {
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
}

#pathway_text a{
color: white;
}

#pathway_text a:hover {
color: #C22512;
}

#buttons {
float: left;
margin: 0px;
padding: 0px;
width: auto;
}


ul#mainlevel-nav
{
list-style: none;
padding: 0;
margin: 0;
font-size: 0.8em;
}

ul#mainlevel-nav li
{
background-image: none;
padding-left: 0px;
padding-right: 0px;
float: left;
margin: 0;
font-size: 11px;
line-height: 21px;
white-space: nowrap;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #333333;
}

ul#mainlevel-nav li a
{
display: block;
padding-left: 15px;
padding-right: 15px;
text-decoration: none;
color: #CCCCCC;
background: transparent;
}

#buttons&gt;ul#mainlevel-nav li a { width: auto; }

ul#mainlevel-nav li a:hover
{
color: #fff;
background-color: #383838;
}


#search_outer {
float: left;
width: 165px;
}

#search_inner { border: 1px solid #282828
;
padding: 0px;
height: 21px !important;
height: 23px;
overflow: hidden;
}

#search_inner form {
padding: 0;
margin: 0;
}

#search_inner .inputbox {
border: 0px;
padding: 3px 3px 3px 5px;
font-family: arial, helvetica, sans-serif;
font-size: 11px;
color: #990000;
}

#header_outer {
text-align: left;
border: 0px;
margin: 0px;
}

#header {
position: relative;
float: left;
padding: 0px;
margin-right: 2px;
width: 735px;
height: 150px;
background: url(../images/header_short.jpg) no-repeat;
}

#top_outer{
float: left;
width: 165px;
}

#top_inner {
border: 1px solid #282828;
padding: 2px;
height: 144px !important;
height: 150px;
overflow: hidden;
float: none !important;
float: left;
}
#top_inner .moduletable {
color: #990000;
}
#left_side {
vertical-align: top;
}

#left_outer {
width: 165px;
float: left;
}

#left_inner { border: 1px solid #282828
;
padding: 2px;
float: none !important;
float: left;
}

#main_area {
padding-top: 2px;
}

#main_body {
vertical-align: top;
padding-left: 2px;
width: 100%;
}

#content_outer {
padding: 0px;
margin-top: 0px;
margin-left: 2px;
/** border: 1px solid #282828
;
**/
float: left;
width: 635px;
}

#content_inner{
float: none !important;
float: left;
padding: 0;
padding-top: 2px;
margin: 0;
}

table.content_table {
width: 100%;
padding: 0px;
margin: 0px;
}

table.content_table td {
padding: 0px;
margin: 0px;
}


#banner_inner {
padding: 0px;
text-align: center;
margin: 0px;
margin-bottom: 2px !important;
margin-bottom: 0px;
}

#poweredby_inner {
float: right;
padding-left: 1px;
margin-left: 0px;
height: 70px;
}

#right_side {
vertical-align: top;
padding-left: 2px;
}

#right_outer {
margin-left: 0px;
width: 165px;
}

#right_inner { border: 1px solid #282828
;
padding: 2px;
}

#user1_user2 {
}

.user1_inner { border: 1px solid #282828
;
float: none !important;
float: left;
margin: 0px;
margin-right: 2px;
padding: 2px;
}

.user2_inner { border: 1px solid #282828
;
float: none !important;
float: left;
margin: 0px;
padding: 2px;
}

#body_outer {
float: left;
padding: 2px;
margin-top: 2px; border: 1px solid #282828;
}

#active_menu {
color:#fff;
}

a#active_menu:hover {
color: #C22512;
}

.maintitle {
color: #000000;
font-size: 40px;
padding-left: 15px;
padding-top: 20px;
}

.error {
font-style: italic;
text-transform: uppercase;
padding: 5px;
color: #ffffff;
font-size: 14px;
font-weight: bold;
}

/** old stuff **/

.back_button {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
width: auto;
line-height: 20px;
margin: 1px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
background-image: url(../images/sechdr1bg.png);
background-repeat: repeat-x;
border: 1px outset #333333;
}

.pagenav {
float: left;
text-align: center;
font-size: 11px;
font-weight: bold;
border: 1px double #3B3B3B;
width: auto;
line-height: 20px;
margin: 1px;
padding-top: 0px;
padding-right: 8px;
padding-bottom: 0px;
padding-left: 8px;
background-image: url(../images/sechdr1bg.png);
background-repeat: repeat-x;
}

.pagenavbar {
margin-right: 10px;
float: right;
}

#footer {
text-align: center;
padding: 3px;
}

ul
{
margin: 0;
padding: 0;
list-style: none;
}

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/bullet.png);
background-repeat: no-repeat;
background-position: 0px 2px;
}


td {
text-align: left;
font-size: 11px;
}



body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, &quot;Sans Serif&quot;;
line-height: 120%;
font-size: 11px;
color: #CCCCCC;
background: #000000;
}

/* Joomla core stuff */
a:link, a:visited {
color: #C22512; text-decoration: none;
font-weight: bold;
}

a:hover {
color: #77150B;
text-decoration: none;
font-weight: bold;
}

table.contentpaneopen {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpaneopen td {
}

table.contentpaneopen td.componentheading {
padding-left: 4px;
}



table.contentpane {
width: 100%;
padding: 0px;
border-collapse: collapse;
border-spacing: 0px;
margin: 0px;
}

table.contentpane td {
margin: 0px;
padding: 0px;
}

table.contentpane td.componentheading {
padding-left: 4px;
}

table.contentpaneopen fieldset {
border: 0px;
border-bottom: 1px solid #eee;
}

.button {
text-align: center;
font-size: 11px;
font-weight: bold;
width: auto;
line-height: 20px;
margin: 1px;
padding-top: 3px;
padding-right: 8px;
padding-bottom: 3px;
padding-left: 8px;
background-image: url(../images/sechdr1bg.png);
background-repeat: repeat-x;
color: #CCCCCC;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #990000;
border-right-color: #660000;
border-bottom-color: #710000;
border-left-color: #990000;
}

.inputbox {
padding: 2px;
border:1px solid #990000;
background-color: #000000;
color: #999999;
}

.componentheading {
background: url(../images/subhead_bg.png) repeat-x;
color: #CE2415;
text-align: left;
padding-top: 4px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;

}

.contentcolumn {
padding-right: 5px;
}

.contentheading {
height: 30px;
color: #990000;
font-weight: bold;
font-size: 14px;
white-space: nowrap;
}



.contentpagetitle {
font-size: 13px;
font-weight: bold;
color: #ffffff;
text-align:left;
}

table.searchinto {
width: 100%;
}

table.searchintro td {
font-weight: bold;
}

table.moduletable {
width: 100%;
margin-bottom: 5px;
padding: 0px;
border-spacing: 0px;

}

div.moduletable {
padding: 0;
margin-bottom: 2px;
}

table.moduletable th, div.moduletable h3 {
background: url(../images/subhead_bg.png) repeat-x;
color: #999999;
text-align: left;
padding-left: 4px;
height: 21px;
line-height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
margin: 0 0 2px 0;
}

table.moduletable td {
font-size: 11px;
padding: 0px;
margin: 0px;
font-weight: normal;
}

table.pollstableborder td {
padding: 2px;
}

.sectiontableheader {
font-weight: bold;
padding: 4px;
background-color: #000000;
background-image: url(../images/sechdrbg.png);
background-repeat: repeat-x;
height: 23px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2A2A2A;
border-bottom-color: #2A2A2A;
background-position: top;
}

.sectiontablefooter {
}

.sectiontableentry1 {
background-color : #101010;
font-size: 11px;
color: #CCCCCC;
height: 23px;
background-image: url(../images/sechdr1bg.png);
background-repeat: repeat-x;
background-position: left top;
}

.sectiontableentry2 {
background-color : #101010;
font-size: 11px;
color: #CCCCCC;
height: 23px;
background-image: url(../images/sechdr1bg.png);
background-repeat: repeat-x;
background-position: left top;
}

.small {
color: #999999;
font-size: 11px;
}

.createdate {
height: 15px;
padding-bottom: 10px;
color: #999999;
font-size: 11px;
}

.modifydate {
height: 15px;
padding-top: 10px;
color: #999999;
font-size: 11px;
}

table.contenttoc { border: 1px solid #282828
;
padding: 2px;
margin-left: 2px;
margin-bottom: 2px;
}

table.contenttoc td {
padding: 2px;
}

table.contenttoc th {
background: url(../images/subhead_bg.png) repeat-x;
color: #CE2415;
text-align: left;
padding-top: 2px;
padding-left: 4px;
height: 21px;
font-weight: bold;
font-size: 10px;
text-transform: uppercase;
}

a.mainlevel:link, a.mainlevel:visited {
display: block;
background: url(../images/menu_bg.png) no-repeat;
vertical-align: middle;
font-size: 11px;
color: #ccc;
text-align: left;
padding-top: 5px;
padding-left: 12px;
height: 20px !important;
height: 25px;
text-decoration: none;
font-weight: normal;
}

a.mainlevel:hover {
background-position: 0px -25px;
text-decoration: none;
color: #fff;
font-weight: normal;
}

a.sublevel:link, a.sublevel:visited {
padding-left: 1px;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: #CCCCCC;
text-align: left;
}

a.sublevel:hover {
color: #990000;
text-decoration: none;
}
.highlight {
background-color: Yellow;
color: Blue;
padding: 0;
}
.code {
background-color: #ddd;
border: 1px solid #bbb;
}

form {
/* removes space below form elements */
margin: 0;
padding: 0;
}

div.mosimage {
border: 1px solid #ccc;
}

.mosimage { border: 1px solid #282828
;
margin: 5px
}

.mosimage_caption {
margin-top: 2px;
background: #efefef;
padding: 1px 2px;
color: #666;
text-transform: normal;
font-size: 10px;
border-top: 1px solid #ffffff;
}
#showhide {
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: 0px;
position: relative;
top: 5px;
}

.dd { }

/* BLASTCHAT 2.0 */
/*this will modify background of window*/
body.blastchat {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background: url('../images/outer_center.png';
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader {
background-color : #4DA5FF;
color : #FFFFFF;
padding: 0px 0px 0px 0px;
font-weight : bold;
letter-spacing : 0px;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:link {
color: blue;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:visited {
color: blue;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite menu areas*/
.bc_sectiontableheader a:hover {
color: orange;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}

/*definitions to adjust/overwrite messages stripes*/
.bc_sectiontableentry1 {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background-color : #FFFFFF;
}

/*definitions to adjust/overwrite messages stripes*/
.bc_sectiontableentry2 {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background-color : #F3F3F3;
}

/*from nick*/
/*message sent from me*/
.bc_msg_from {
font-weight : bold;
}
/*to nick*/
/*message sent to me*/
.bc_msg_to {
font-weight : bold;
}
/*user list my own nick*/
.bc_usr_to {
font-weight : bold;
}

/*private message sent*/
.bc_msg_text_privs {
color : blue;
}

/*private message received*/
.bc_msg_text_privr {
color : red;
}

/*definitions to adjust/overwrite submit form area*/
.bc_sectiontableheader_form {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background: url('../images/outer_center.png';
background-color : #F3F3F3;
}<br><br>Post edited by: simo6, at: 2006/05/23 06:07

what is your website? Let me take a closer look on what's going on.

sure http://www.blackwithin.com

user: xxx
password: 123456

link &quot;Community Chat&quot; on the main menu

1. Very first thing is to make sure that your browser is loading new .css file by erasing cache from it.

2. Best way is to modify things inside you own CSS file to see what it will do and see what will change

3. Here is how I think it works (I am no CSS expert):

class definition like this;
class=&quot;sectiontableheader bc_sectiontableheader&quot;

wil 1st load &quot;sectiontableheader&quot; definition and then it will overwrite it with &quot;bc_sectiontableheader&quot;. IF you did not overwrite specificly some style definitions inside of &quot;sectiontableheader&quot; then it will still use them.

QUOTE:
.sectiontableheader {
font-weight: bold;
padding: 4px;
background-color: #000000;
background-image: url(../images/sechdrbg.png);
background-repeat: repeat-x;
height: 23px;
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #2A2A2A;
border-bottom-color: #2A2A2A;
background-position: top;
}

QUOTE:
.bc_sectiontableheader {
background-color : #4DA5FF;
color : #FFFFFF;
padding: 0px 0px 0px 0px;
font-weight : bold;
letter-spacing : 0px;
}

If you compare those 2 definitions, you can see that all style definitions that are in &quot;sectiontableheader&quot; but are not in &quot;bc_sectiontableheader&quot; will remain being in use.

So the best way to do this, is to:
A. copy paste your existing and change all you want
B. modify only those portions of your definition that you need

QUOTE:
body {
margin: 15px;
height: 100%;
padding: 0px;
font-family: Arial, Helvetica, &quot;Sans Serif&quot;;
line-height: 120%;
font-size: 11px;
color: #CCCCCC;
background: #000000;
}

QUOTE:
body.blastchat {
margin: 3px 0px 3px 0px;
padding: 0px 0px 0px 0px;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#474747;
background: url('../images/outer_center.png');
}

If you compare &quot;body&quot; you can see that you do not have image from background blastchat definition, so it is still using background #0000000 from your original style.


Once again, I only hope it works this way, I did not do extensive research, so I followed only basic instructions on how it should work.