Change background color

rude

New member
Joined
Feb 17, 2005
Messages
3
Anyone know how to change the background color of the skins? It is not possilbe in the stylesheet, because it is in the html code.
 
Which background color do you want to change?
In general, depending on which one, look in the corresponding html file. For example, if you wanted to change the background color of the header, you could find it in the header.html file.

/usr/local/directadmin/data/skins/skin_name
 
I mean the dark blue color (#345B80) in the login screen and the same color at the background of the control panel.
That color is not in the style sheet, but in the html. So anyone know how to change?
 
This is the enhanced skin?

I believe the code you're looking for is in footer_bar_1.html and footer_bar_2.html.

Code:
grep -r "345B80" /usr/local/directadmin/data/skins/enhanced
 
Do you guys know which file this is?:

THIS IS THE HTML CODE THAT IT INCLUDES!!!!!!

AT THE BOTTOM IS A SCREENSHOT!!!!!!

-----------------------------------------------------




<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DirectAdmin v1.23.4</title>
<script language="JavaScript">
<!-- // start preload code
home_image = new Image();
home_image.src = "/IMG_SKIN_NAV_HOME_OVER";
webmail_image = new Image();
webmail_image.src = "/IMG_SKIN_NAV_WEBMAIL_OVER";
password_image = new Image();
password_image.src = "/IMG_SKIN_NAV_PASSWORD_OVER";
fileman_image = new Image();
fileman_image.src = "/IMG_SKIN_NAV_FILEMAN_OVER";
help_image = new Image();
help_image.src = "/IMG_SKIN_NAV_HELP_OVER";
logout_image = new Image();
logout_image.src = "/IMG_SKIN_NAV_LOGOUT_OVER";
logout_image2 = new Image();
logout_image2.src = "/IMG_SKIN_NAV_LOGOUT2_OVER";
// done with preload code -->
</script>

<style type="text/css">
*
{
FONT-SIZE: 8pt;
FONT-FAMILY: verdana, arial, helvetica, sans-serif;
line-height:16px;
}

a
{
TEXT-DECORATION: none;
COLOR: black;
}

a:hover
{
COLOR: #9999CC;
TEXT-DECORATION: underline;
}

.toptext
{
COLOR: #666666;
}

u
{
TEXT-DECORATION: underline;
}

input
{
line-height: 12px

}
.tree
{

COLOR: #C0C0C0;
}

.title
{
COLOR: #000000;
FONT-WEIGHT: bold;
FONT-SIZE: 12pt;
}

td.header
{
FONT-WEIGHT: 600;
FONT-SIZE: 10pt;
COLOR: #EEEEEE;
BACKGROUND: #425984;
}

.menu
{
border: 1px solid grey;
border-style: outset;
}

table.menu
{
BACKGROUND: #FFFFFF;
}

td.menu
{
BACKGROUND: #EEEEEE;
COLOR: #000000;
}

table.tabs
{
width: 100%;
border-width: 1;
border-bottom-style:solid;
border-left-style: none;
border-top-style: none;
border-right-style: none;
border-color: black;
border-collapse:collapse
}

td.tab
{
BACKGROUND: #6A85B5;
border: 1px solid grey;
border-style: outset;
white-space: nowrap;
}

td.tabselected
{
BACKGROUND: #425984;
border: 1px solid grey;
border-style: outset;
white-space: nowrap;
}

td.tabspace
{
width: 1%;
}

.highlighted
{
BACKGROUND: #8CA0C6;
border: 1px solid grey;
border-style: outset;
white-space: nowrap;
cursor: hand;
}

a.tabtext
{
COLOR: #EEEEEE;
TEXT-DECORATION: none
}

a.tabtext:hover
{
COLOR: #EEEEEE;
TEXT-DECORATION: none
}

table.list
{
BACKGROUND: #FFFFFF;
width: 100%;

}

td.list
{
BACKGROUND: #EEEEEE;
white-space: nowrap;
}
td.list2
{
BACKGROUND: #E3E3E3;
white-space: nowrap;
}

td.listwrap
{
BACKGROUND: #EEEEEE;
white-space: wrap;
}
td.listwrap2
{
BACKGROUND: #E3E3E3;
white-space: wrap;
}

.listtitle
{
COLOR: #EEEEEE;
white-space: nowrap;
}

td.listtitle
{
BACKGROUND: #425984;
border: 1px solid grey;
border-style: outset;
background-image: url("/IMG_SKIN_GRADIENT");

}
.white
{
COLOR: white;
}

.off_white
{
COLOR: #CCCCCC;
}

.trim
{
border: 1px solid #8CB7D0;
}

.left-pad
{
padding-left: 70px;
}

.right-pad
{
padding-right: 10px;
padding-left: 10px;
}

.bar-row1
{
BACKGROUND: #3D6C98;
line-height:12px;
white-space: nowrap;
FONT-SIZE: 8pt;
letter-spacing:-0.1em
}

.bar-row2
{
line-height:12px;
white-space: nowrap;
FONT-SIZE: 8pt;
letter-spacing:-0.1em
}

</style>

</head>

<body bgcolor="#FFFFFF" leftMargin=0 rightMargin=0 topMargin=0 bottomMargin=0>

<table height=100% width=100% cellpadding=0 cellspacing=0>
<tr>
<td align=center>

<table height=100% cellpadding=0 cellspacing=0>
<tr>
<td height=100% width=31 background="/IMG_SKIN_LEFT_SHADOW" valign=bottom>
<img src="/IMG_SKIN_LEFT_SHADOW">
</td>

<td valign=top>
<table width=100% height=100% cellpadding=0 cellspacing=0>
<tr>
<td height=120 align=left background="/IMG_SKIN_HEADER"><img src="/IMG_SKIN_HEADER"></td>
</tr>
<tr>





<td height=100% valign=top background=/IMG_INNER_BG>

<table width=100% height=100% cellspacing="0" cellpadding="0">
<tr>
<td width="586" valign=top>
<table width="100%" cellspacing="0" cellpadding="0" background="/IMG_SKIN_NAV_BG">
<tr>
<td><a onMouseOver="navhome.src=home_image.src;" onMouseOut="navhome.src='/IMG_SKIN_NAV_HOME';" href="/"><img name="navhome" border="0" src="/IMG_SKIN_NAV_HOME" width="72" height="78"></a></td>
<td><a onMouseOver="navwebmail.src=webmail_image.src;" onMouseOut="navwebmail.src='/IMG_SKIN_NAV_WEBMAIL';" href="http://www.symbiangames.nl/squirrelmail" target=_blank><img name="navwebmail" border="0" src="/IMG_SKIN_NAV_WEBMAIL" width="72" height="78"></a></td>

<td><a onMouseOver="navpass.src=password_image.src;" onMouseOut="navpass.src='/IMG_SKIN_NAV_PASSWORD';" href="/HTM_PASSWD"><img name="navpass" border="0" src="/IMG_SKIN_NAV_PASSWORD" width="72" height="78"></a></td>
<td><a onMouseOver="navhelp.src=help_image.src;" onMouseOut="navhelp.src='/IMG_SKIN_NAV_HELP';" target=_blank href="http://www.site-helper.com/misc.html#add"><img name="navhelp" border="0" src="/IMG_SKIN_NAV_HELP" width="67" height="78"></a></td>
<td><a onMouseOver="navfileman.src=fileman_image.src;" onMouseOut="navfileman.src='/IMG_SKIN_NAV_FILEMAN';" href="/CMD_FILE_MANAGER"><img name="navfileman" border="0" src="/IMG_SKIN_NAV_FILEMAN" width="72" height="78"></a></td>

<td width=100% align=right><a onMouseOver="navlogout.src=logout_image.src;" onMouseOut="navlogout.src='/IMG_SKIN_NAV_LOGOUT';" href="/CMD_LOGOUT"><img name="navlogout" border="0" src="/IMG_SKIN_NAV_LOGOUT" width="93" height="78"></a></td>
</tr>
</table>

<table width=100% height=100% cellpadding=0 cellspacing=0>
<tr><td height=60% valign=top style="padding-bottom: 35px;">







<table class=list cellpadding=3 cellspacing=1>
<tr ><td class=listtitle><b><a class=listtitle href='?sort1=-1'>Domain</a></b></td >
</tr >
<tr ><td class=list><a class=list href='/CMD_SHOW_DOMAIN?domain=kboem.nl'>kboem.nl</a></td ></tr >
<tr ><td class=list2><a class=list href='/CMD_SHOW_DOMAIN?domain=scooter****.nl'>scooter****.nl</a></td ></tr >
<tr ><td class=list><a class=list href='/CMD_SHOW_DOMAIN?domain=symbiangames.nl'>symbiangames.nl</a></td ></tr >
</table >

<br><center>
<form action="/CMD_ADDITIONAL_DOMAINS" method="GET"><input type=submit value="Domain Administration"></form><br>
</center>



</td></tr>
</table>
</td>
<td valign=top align=right class=white style="BACKGROUND: #345B80;">
<div style="padding-right: 5px;" class="off_white">
<a class="off_white" href="/CMD_TICKET">Message System</a> (<b>0</b> new)
</div><br>








<img src="/IMG_SKIN_CTRL_ACCOUNT" width="180" height="28"><div class="right-pad" align=center>

<b>Bandwidth</b><br> <table border="0" width="170" cellspacing="0" cellpadding="0" background="/IMG_SKIN_BAR_BG_BLUE">
<tr>
<td width=3 align=left><img border="0" src="/IMG_SKIN_BAR_LEFT_GREEN" width="3" height="17"></td>

<td width="1%" id=bandwidth_bar background="/IMG_SKIN_BAR_BG_GREEN"></td>
<td width=1 align=left><img border="0" src="/IMG_SKIN_BAR_RIGHT_GREEN" width="1" height="17"></td>
<td width=100%></td>
<td width=1 align=right><img src="/IMG_SKIN_BAR_RIGHT_BLUE" width="1" height="17"></td>
</tr>
</table>

<script language="Javascript">
<!--

bandwidth_bar_top=0;
bandwidth_bar_current=0;

function bandwidth_bar_scroll()
{
increase = 10;
again = true;
bandwidth_bar_current += increase;
if (bandwidth_bar_current >= bandwidth_bar_top)
{
bandwidth_bar_current = bandwidth_bar_top;
again=false;
}

if (document.getElementById)
{
my_style = document.getElementById("bandwidth_bar").style;
}
else if (document.all)
{
my_style = document.all["bandwidth_bar"].style;
}
else if (document.layers)
{
my_style = document.layers["bandwidth_bar"];
}

my_style.width=bandwidth_bar_current+"%";

if (again)
setTimeout("bandwidth_bar_scroll();", 50);
}

setTimeout("bandwidth_bar_scroll();", 1000);

//-->
</script>

<b>Disk Space</b><br> <table border="0" width="170" cellspacing="0" cellpadding="0" background="/IMG_SKIN_BAR_BG_BLUE">
<tr>
<td width=3 align=left><img border="0" src="/IMG_SKIN_BAR_LEFT_GREEN" width="3" height="17"></td>
<td width="1%" id=quota_bar background="/IMG_SKIN_BAR_BG_GREEN"></td>
<td width=1 align=left><img border="0" src="/IMG_SKIN_BAR_RIGHT_GREEN" width="1" height="17"></td>
<td width=100%></td>
<td width=1 align=right><img src="/IMG_SKIN_BAR_RIGHT_BLUE" width="1" height="17"></td>
</tr>

</table>

<script language="Javascript">
<!--

quota_bar_top=6;
quota_bar_current=0;

function quota_bar_scroll()
{
increase = 10;
again = true;
quota_bar_current += increase;
if (quota_bar_current >= quota_bar_top)
{
quota_bar_current = quota_bar_top;
again=false;
}

if (document.getElementById)
{
my_style = document.getElementById("quota_bar").style;
}
else if (document.all)
{
my_style = document.all["quota_bar"].style;
}
else if (document.layers)
{
my_style = document.layers["quota_bar"];
}

my_style.width=quota_bar_current+"%";

if (again)
setTimeout("quota_bar_scroll();", 50);
}

setTimeout("quota_bar_scroll();", 1000);



//-->
</script>



</div>
<table width=100% cellpadding=4 cellspacing=0><tr><td align=center>
<table border="0" width="100%" cellspacing="0" cellpadding="4" class="white">
<tr>
<td width="33%"></td>

<td width="33%" align="center"><b>Used</b></td>
<td width="34%" align="center"><b>Max</b></td>
</tr>
<tr>

<td width="33%" class=bar-row1>Disk Space (mb)</td>
<td width="33%" class=bar-row1 align="center">19.9</td>

<td width="34%" class=bar-row1 align="center">330</td>
</tr>
<tr>
<td width="33%" class=bar-row2>Bandwidth (gb)</td>
<td width="33%" class=bar-row2 align="center">0.0204</td>
<td width="34%" class=bar-row2 align="center">7.3242</td>
</tr>

<tr>
<td width="33%" class=bar-row1>E-Mails</td>
<td width="33%" class=bar-row1 align="center">1</td>
<td width="34%" class=bar-row1 align="center">unlimited</td>
</tr>

<tr>
<td width="33%" class=bar-row2>Ftp Accounts</td>

<td width="33%" class=bar-row2 align="center">4</td>
<td width="34%" class=bar-row2 align="center">unlimited</td>
</tr>
<tr>
<td width="33%" class=bar-row1>Databases</td>
<td width="33%" class=bar-row1 align="center">2</td>
<td width="34%" class=bar-row1 align="center">0</td>

</tr>
</table>
</td></tr></table>


<br>



</td>
</tr>
</table>













</td>
</tr>

<tr>
<td style="padding: 0px; padding-left: 10px; BACKGROUND: #345B80; background-image: url('/IMG_INNER_BG'); background-repeat: repeat-y;">
<font class=tree>remco</font> »
</td>
</tr>
<tr>
<td height=50 align=center valign=bottom class=white style="padding-bottom: 8; BACKGROUND: #345B80; background-image: url('/IMG_FOOTER_BAR'); background-repeat:no-repeat;">
<a class="white" href="http://www.directadmin.com/">DirectAdmin</a> Web Control Panel © 2005 JBMC Software
</td>

</tr>
</table>


</td>
<td width=31 background=/IMG_SKIN_RIGHT_SHADOW>
</td>
</tr>
</table>


</td>
</tr>
</table>
</body>
</html>

--------------------------------------------------
 

Attachments

  • screenshot.gif
    screenshot.gif
    107.5 KB · Views: 316
rude said:
Anyone know how to change the background color of the skins? It is not possilbe in the stylesheet, because it is in the html code.

Well how about you... EDIT THE HTML?>???? :confused: lol it's so obvious!!!!

Hey i just made my DIRECT ADMIN XP SKIN! so here's the file!

SCREENSHOT:
screenshot9dw.gif
 

Attachments

  • enhanced.zip
    335.5 KB · Views: 255
Last edited:
Back
Top