IEView-Skin Farbe ändern.

moinmoin · Beitrag von **moinmoin** » 26.06.2006, 16:20

Vielleicht kennt einer von euch den Silver Plated-Skin
(Diese Topbar wie sie im Bild zusehen ist , existiert bei mir nicht mehr)
Ich such mir schon nen Wolf damit ich die Farbe und Höhe vom Nicknamen und auch der Uhrzeit ändern kann.

Kennt sich einer damit aus? Ich häng die *.ivt und die *.css mal ran.

*.ivt

<html>
<head>
<base href="%base%">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="base.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.headertbl {
filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/backgroundHeader.png',sizi

ngMethod='scale');
}

.headerava {

/* CHANGE THIS TO FAVOURED VARIANT */

filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/backgroundUserImageUnder

sea.png',sizingMethod='scale');
}

.content {
filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/transGrey.png',sizingMethod

='scale');
}

.context .content {
filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/transGreyContext.png',sizin

gMethod='scale');
}

.divider {
filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/divider.png',sizingMethod='s

cale');
}

.shadow {
filter:

progid:DXImageTransform.Microsoft.AlphaImageLoader(src='%base%images/messageShadow.png',sizing

Method='scale');
}

div#topdiv { left:expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ?

document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' ); top:expression( ( 0 + (

ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop :

document.body.scrollTop ) ) + 'px' ); }
</style>

<script language="Javascript" src="scripts.js"></script>
</head>
<body bgcolor="#282828">
<div id="topdiv">
<table class="headertbl" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-left:15px;text-align:right;vertical-align:middle;">
<div class="headerava">
<img width="35px" height="35px" border="1" src="%avatarIn%"

alt="Incoming Avatar" />
</div>
<div class="msg_topbar"><span class="headerchatw">chatting

with</span><br /><h2>::%nameIn%::</h2></div>
</td>
</tr>
</table>
</div>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-out"></td>
<td class="head-c-out"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-out"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-in"></td>
<td class="head-c-in"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-in"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-in"></td>
<td class="head-c-in"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-in"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
<span id="message_current"></span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<div id="msg_new_grouped" style="display:none;">
<img src="images/sep.gif" class="sepin" />
<span class="next_message">
<span class="timestamp">%time%</span>
%text%
</span>
</div>
<script type="text/javascript">appendGroupMsg();</script>


<script type="text/javascript">endGroupMsg();</script>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-out"></td>
<td class="head-c-out"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-out"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
<span id="message_current"></span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<div id="msg_new_grouped" style="display:none;">
<img src="images/sep.gif" class="sep" />
<span class="next_message">
<span class="timestamp">%time%</span>
%text%
</span>
</div>
<script type="text/javascript">appendGroupMsg();</script>


<script type="text/javascript">endGroupMsg();</script>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>


<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>


<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>


<tr>
<td class="statusLeft"></td>
<td class="statusCenter">%name% %text%</td>
<td class="statusRight"></td>
</tr>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-in"></td>
<td class="head-c-in"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-in"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-out"></td>
<td class="head-c-out"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-out"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-in"></td>
<td class="head-c-in"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-in"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
<span id="message_current"></span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<div id="msg_new_grouped" style="display:none;">
<img src="images/sep.gif" class="sepin" />
<span class="next_message">
<span class="timestamp">%time%</span>
%text%
</span>
</div>
<script type="text/javascript">appendGroupMsg();</script>

<script type="text/javascript">endGroupMsg();</script>


<table class="msgBox" bgcolor="#282828">
<tr>
<td class="head-tl-out"></td>
<td class="head-c-out"><span class="protocol">%proto%</span><span

class="name">%name%</span></td>
<td class="head-tr-out"></td>
</tr>
<tr>
<td class="middle-l"></td>
<td class="middle-c">
<span class="next_message">
<span class="timestamp">%time%</span>
<span class="avatar"><img src="%avatar%"/></span>
%text%
</span>
<span id="message_current"></span>
</td>
<td class="middle-r"></td>
</tr>
<tr>
<td class="bottom-l"></td>
<td class="bottom-c"></td>
<td class="bottom-r"></td>
</tr>
</table>


<div id="msg_new_grouped" style="display:none;">
<img src="images/sep.gif" class="sep" />
<span class="next_message">
<span class="timestamp">%time%</span>
%text%
</span>
</div>
<script type="text/javascript">appendGroupMsg();</script>


<script type="text/javascript">endGroupMsg();</script>

*.css

#body {
background: #282828;
font-family: Arial;
font-size: 10pt;
font-style: normal;
}

div.msg_topbar {
white-space: absolute;
overflow: hidden;
display: inline;
width: expression(document.body.clientWidth-60);
}

#topdiv {
z-index: 6;
position: absolute;
left: 0px;
top:0px;
width: expression(document.body.clientWidth + "px");
}

.headertbl {
width:100%;
height:100%;
}

.headerchatw {
position: relative;
color: #282828;
font: 0px "Arial";
font-weight: bold;
float: left;
margin-left: 10px;
margin-top: 0px;
}
.msg_topbar h2 {
position: relative;
float: left;
color: #282828;
font: 0px "Tahoma";
font-weight: bold;
margin: 0;
margin-left:0px;
margin-top: 5;
padding: 0;
}

.headerava {
position: relative;
float: center;
top: -42px;
height: 36px;
width: 36px;
padding-right: 3px;
padding-top: 4px;
}

.userName {
font: bold 8px "Arial";
float: center;
margin-left: 60px;
margin-right: 20px;
margin-bottom: -2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline;
width: expression(document.body.clientWidth-110);
}

.service {
float: left;
text-align: left;
font-size: 9px;
margin-right: 20px;
line-height: 15px;
color: #282828;
font-family: "Tahoma";
width: 45px;
overflow: hidden;
display: inline;
}

img{
vertical-align: middle;
}
table, tr, td {
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}

span {
display: block;
}

/**/
.msgBox{
width: 100%;

}

/* OUT */
.head-tl-out{
width: 25px;
height: 34px;

background: url(images/head_left_out.png);
background-repeat: no-repeat;
}
.head-c-out{
height: 34px;

background: url(images/head_center_out.png);
background-repeat: repeat-x;
}

.head-tr-out{
width: 25px;
height: 34px;

background: url(images/head_right_out.png);
background-repeat: no-repeat;
}

.middle-l{
width: 25px;

background: url(images/middle_left_out.png);
background-repeat: repeat-y;
}

.middle-c{
padding-top: 4px;
}

.middle-r{
width: 25px;

background: url(images/middle_right_out.png);
background-repeat: repeat-y;
}

.bottom-l{
width: 25px;
height: 20px;

background-repeat: no-repeat;
background: url(images/bottom_left_out.png);
}

.bottom-c{
height: 20px;
background-repeat: repeat-x;
background: url(images/bottom_center_out.png);
}

.bottom-r{
width: 25px;
height: 20px;

background-repeat: no-repeat;
background: url(images/bottom_right_out.png);
}

/* IN */
.head-tl-in{
width: 25px;
height: 34px;
background: url(images/head_left_in.png);
background-repeat: no-repeat;
}
.head-c-in{
height: 34px;

background: url(images/head_center_in.png);
background-repeat: repeat-x;
}

.head-tr-in{
width: 25px;
height: 34px;

background: url(images/head_right_in.png);
background-repeat: no-repeat;
}

.middle-l{
width: 25px;

background: url(images/middle_left_in.png);
background-repeat: repeat-y;
}

.middle-c{
padding-top: 4px;
}

.middle-r{
width: 25px;

background: url(images/middle_right_in.png);
background-repeat: repeat-y;
}

.bottom-l{
width: 25px;
height: 20px;

background-repeat: no-repeat;
background: url(images/bottom_left_in.png);
}

.bottom-c{
height: 20px;
background-repeat: repeat-x;
background: url(images/bottom_center_in.png);
}

.bottom-r{
width: 25px;
height: 20px;

background-repeat: no-repeat;
background: url(images/bottom_right_in.png);
}

.avatar img {
width: 41px;
height: 43px;
}

.avatar {
float: left;
text-align: left;
vertical-align: top;
padding-top:5px;
vertical-align:top;
text-align:center;
background:url(images/buddy_background_big.png) top right no-repeat; width:58px;

height:58px;}
}

/* Outgoing Grouped Seperator */
.sep {
border-top:1px
solid #E2E2E2;
width: 90%;
height: 1px;
}

/* Incoming Grouped Seperator */
.sepin {
border-top:1px
solid #E2E2E2;
width: 90%;
height: 1px;
}

/* STATUS */
.statusLeft{
width: 25px;
height: 46px;

background: url(images/status_left.png);
background-repeat: no-repeat;
}
.statusCenter{
height: 46px;

background: url(images/status_center.png);
background-repeat: repeat-x;
}
.statusRight{
width: 25px;
height: 46px;

background: url(images/status_right.png);
background-repeat: no-repeat;
}

/**/
.protocol{
font-size: 8px;
float:right;
padding-bottom:8px
}

.timestamp {
float:right;
font-size: 10px;
color: #f4f4f4;
font-family: Arial;
padding-left;4px
}

.head-c-out, .head-c-in{
padding-top: 10px;
font-family: "Arial"
color: #f4f4f4;
font-weight: bold;
font-size: 12px;
font-weight: bold;
padding-down: 2px;
}

.next_message{
background:#282828;
font-family: "Arial";
font-size: 9pt;
color: #f4f4f4;
font-weight: normal;
padding-left;4px

}

.next_message a:link, a:hover{
background:#f282828;
font-family: "Arial";
font-weight: normal;
color: #f4f4f4;
text-decoration: none;
}

.next_message a:hover{
color: #f4f4f4;
text-decoration: underline;
}

.statusCenter{
color: #f4f4f4;
font-size: 9px;
font-weight: normal;
}
}

Beitrag von **Tante Google** » 26.06.2006, 16:20

Herzog · Beitrag von **Herzog** » 27.06.2006, 00:29

Farbe und Höhe des Nicks sollte in der *.css unter .userName { und von der Uhrzeit sollte .timestamp { sein. Dort jeweils font-size und color ändern.

moinmoin · Beitrag von **moinmoin** » 27.06.2006, 09:42

Sollte , ist aber leider nicht.
Dort ist nirgens zu finden das Nickname- und Protokollfarbe schwarz ist. Auch nicht die Angaben von Weite und Höhe.

Herzog · Beitrag von **Herzog** » 27.06.2006, 11:41

Also Timestamp klappt auf jedenfall, das es im username nicht zu finden ist sehe ich auch gerade, hab es gestern nur überflogen und dann irgendwie bei timestamp nur noch genauer nachgesehen was dort zum ändern ist.

Werds mir mal heute Abend noch einmal genauer ansehen, finde jetzt auch nicht auf den ersten Blick warum sich die Farbe des Nicks nicht ändern lässt.

Herzog · Beitrag von **Herzog** » 27.06.2006, 12:15

Hoffe doch das du es nach unserem Austausch gerade findest. *daumendrückt*

moinmoin · Beitrag von **moinmoin** » 27.06.2006, 14:41

Es hat geklappt.
Blindes Huhn hat im html rumgestochert und es doch noch gefunden.

Benijamino · Beitrag von **Benijamino** » 27.06.2006, 15:17

... hehe ... mich würd auch mal das Ergbnis von dem Huhn interessieren :P

moinmoin · Beitrag von **moinmoin** » 27.06.2006, 15:32

Siehe hier