This guide will explain how to quick update an old ICQ 6 Skin to work with the new version, which displays the contact names in the contact list and the message window tabs ontop of the status icons. This operation will NOT add the missing images which were introduced (and are green). It will only prevent ICQ from overlapping contact names over the status icons and fix the message session issue.
Therefor you need to open the Skin's BOX file (which in case of the Sample Skin (http://www.animesharp.com/icq/skinning-howto) would be Sample-Skin.style.box) with a text editor.
Then search for the following:
<!-- =============== styling the Contact List colors for Contacts ================= -->
<style id="icqCLItemUserStyle" tag="icqCLItemUser" margin="0" padding="0 0 2 0" fontFamily="Tahoma" strokeWidth="1" strokePattern="solid" >
<attribute name="navigActive" value="0">
<attribute name="navigSelected" value="0">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBg)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgOver)" />
</attribute>
<attribute name="navigSelected" value="1">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBgDis)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgDisOver)" />
</attribute>
</attribute>
<attribute name="navigActive" value="1">
<attribute name="navigSelected" value="0">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBg)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgOver)" />
</attribute>
<attribute name="navigSelected" value="1" >
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBgPress)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgPressOver)" />
</attribute>
</attribute>
<part name="partItemUser" flex="1" paddingTop="2">
</part>
<part name="partLabelBox" vAlign="center" padding="0 3" flex="1" />
<part name="partLabel" textColor="#000000" crop="right" flex="1" width="30" maxWidth="auto">
</part>
<part name="CommunicationBox" maxWidth="auto" flex="1" overflow="hidden" height="18" maxheight="18"/>
<part name="partCommunicationLineHost" flex="1">
<attribute name="quickIMMode" value="true" paddingLeft="2"/>
<attribute name="quickIMMode" value="false" paddingLeft="8"/>
</part>
<part name="partStatusIcon" margin="1 3 0 8"/>
<part name="unreadMsgIcon" margin="1 3 0 8"/>
<part name="quickIMBtn" hAlign="right">
<attribute name="expanded" value="false" width="1" height="1" margin="2 0"/>
<attribute name="expanded" value="true" width="10" height="9" margin="0" fill="url(#image.icqCL.quickIM-ic)">
<state name="hovered" fill="url(#image.icqCL.quickIM-ic-ov)" />
<state name="pressed" fill="url(#image.icqCL.quickIM-ic-pr)" />
</attribute>
</part>
</style>
And replace it with:
<!-- =============== styling the Contact List colors for Contacts ================= -->
<style id="icqCLItemUserStyle" tag="icqCLItemUser" margin="0" padding="2 0 2 0" fontFamily="Tahoma">
<attribute name="navigActive" value="0">
<attribute name="navigSelected" value="0">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBg)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgOver)" />
</attribute>
<attribute name="navigSelected" value="1">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBgDis)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgDisOver)" />
</attribute>
</attribute>
<attribute name="navigActive" value="1">
<attribute name="navigSelected" value="0">
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBg)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgOver)" />
</attribute>
<attribute name="navigSelected" value="1" >
<attribute name="navigHilited" value="0" fill="url(#Brush.sGlbCLRowBgPress)" />
<attribute name="navigHilited" value="1" fill="url(#Brush.sGlbCLRowBgPressOver)" />
</attribute>
</attribute>
<part name="HeadingBox" vAlign="center" padding="2 3"/>
<part name="partBuddyFeedIcon" position="fixed" top="1" left="1" width="6"/>
<part name="partUserStatus" position="fixed" left="8" top="-1"/>
<part name="partBirthdayIcon" marginLeft="28" marginRight="-25"/>
<part name="partLabel" textColor="#000000" crop="right" width="30" maxWidth="auto" marginLeft="28"/>
<part name="quickIMBtn" hAlign="right">
<attribute name="expanded" value="false" width="1" height="1" margin="2 0"/>
<attribute name="expanded" value="true" width="10" height="9" margin="0" fill="url(#image.icqCL.quickIM-ic)">
<state name="hovered" fill="url(#image.icqCL.quickIM-ic-ov)" shadowColor="#0044aa" shadowOpacity="50%" shadowRadius="1" shadowLeft="0" shadowTop="1" shadowKeying="alpha"/>
<state name="pressed" fill="url(#image.icqCL.quickIM-ic-pr)" colorAdd="none" paddingLeft="0" paddingTop="-2" shadowLeft="0" shadowTop="0"/>
</attribute>
</part>
<part name="CommunicationBox" maxWidth="auto" height="18" maxHeight="18" overflow="hidden">
<attribute name="quickIMMode" value="true" paddingLeft="8"/>
<attribute name="quickIMMode" value="false" paddingLeft="8"/>
</part>
</style>
Then search for:
<!-- =============== styling the message window tabs ================= -->
<style tag="icqMsgSessionTab" minWidth="50" width="110" maxWidth="110" padding="0" minHeight="30" vAlign="center" hAlign="center" hSpace="0" vSpace="0">
<part name="tab" minWidth="50" hSpace="0" vSpace="0" margin="0">
<state name="hovered"/>
<part name="partStatusIcon" marginTop="6">
<state name="pressed" marginTop="6"/>
<state name="toggled" marginTop="6"/>
<state name="selected" marginTop="6"/>
</part>
<part zIndex="10" name="partEventIcon" position="fixed" width="auto" height="auto"/>
<part name="icon" fill="none"/>
<part name="sTabsBackground" fill="url(#image.Msg-tab-notselected)" hAlign="left" padding="0" height="29" minWidth="50" maxWidth="110" width="110" crop="right" margin="0" fontFamily="Tahoma" fontSize="10">
<state name="hovered" fill="url(#image.Msg-tab-notselected-over)" />
<state name="pressed" fill="url(#image.Msg-tab-selected)" />
<state name="toggled" fill="url(#image.Msg-tab-selected)" />
<state name="selected" fill="url(#image.Msg-tab-selected)" />
<state name="disabled" fill="url(#image.Msg-tab-selected)" />
</part>
<!-- this defines font style of the tab buttons -->
<part name="label" hAlign="left" padding="0" height="16" minWidth="50" maxWidth="50" width="50" crop="right" margin="2 0 0 2" fontFamily="Tahoma" fontSize="10">
<state name="hovered" textColor="#00745d" padding="0" margin="2 0 0 2" />
<state name="pressed" textColor="#00745d" padding="0" margin="2 0 0 2"/>
<state name="toggled" textColor="#00745d" padding="0" margin="2 0 0 2"/>
<state name="selected" textColor="#00745d" padding="0" margin="2 0 0 2"/>
<state name="disabled" textColor="#00745d" padding="0" margin="2 0 0 2"/>
</part>
</part>
<part name="btnClose" position="fixed" right="10" top="8" height="13">
<part name="icon" icon="url(#MsgSessionTab.CloseButton.TabSelected)">
<state name="hovered" icon="url(#MsgSessionTab.CloseButton.TabHovered)" />
<state name="selected" icon="url(#MsgSessionTab.CloseButton.TabSelected)" />
<state name="pressed" icon="url(#MsgSessionTab.CloseButton.TabPressed)" />
</part>
<part name="label" fill="none"/>
<part name="iconRight" fill="none"/>
</part>
</style>
And replace that with:
<!-- =============== styling the message window tabs ================= -->
<style tag="icqMsgSessionTab" minWidth="50" width="110" maxWidth="110" padding="0" minHeight="30" vAlign="center" hAlign="center" hSpace="0" vSpace="0">
<part name="tab" minWidth="50" hSpace="0" vSpace="0" margin="0">
<part name="iconImage" marginTop="6" />
<part name="idStatus" marginTop="6" paddingRight="18" >
<state name="pressed" marginTop="6"/>
<state name="toggled" marginTop="6"/>
<state name="selected" marginTop="6"/>
</part>
<part name="icon" fill="none"/>
<part name="sTabsBackground" fill="url(#image.Msg-tab-notselected)" hAlign="left" padding="0" height="29" minWidth="50" maxWidth="110" width="110" crop="right" margin="0" fontFamily="Tahoma" fontSize="10">
<state name="hovered" fill="url(#image.Msg-tab-notselected-over)" />
<state name="pressed" fill="url(#image.Msg-tab-selected)" />
<state name="toggled" fill="url(#image.Msg-tab-selected)" />
<state name="selected" fill="url(#image.Msg-tab-selected)" />
<state name="disabled" fill="url(#image.Msg-tab-selected)" />
</part>
<part name="label" hAlign="left" padding="0" height="16" minWidth="50" maxWidth="50" width="50" crop="right" margin="2 0 0 2" inherits="#sGlbTabLabel">
<state name="hovered" padding="0" margin="2 0 0 2" inherits="#sGlbTabLabelover"/>
<state name="pressed" padding="0" margin="2 0 0 2" inherits="#sGlbTabLabelpress"/>
<state name="toggled" padding="0" margin="2 0 0 2" inherits="#sGlbTabLabeltoggle"/>
<state name="selected" padding="0" margin="2 0 0 2" inherits="#sGlbTabLabelSelect"/>
<state name="disabled" padding="0" margin="2 0 0 2" inherits="#sGlbTabLabeldisable"/>
</part>
</part>
<part name="btnClose" position="fixed" right="10" top="8" height="13">
<part name="icon" icon="url(#MsgSessionTab.CloseButton.TabSelected)">
<state name="hovered" icon="url(#MsgSessionTab.CloseButton.TabHovered)" />
<state name="selected" icon="url(#MsgSessionTab.CloseButton.TabSelected)" />
<state name="pressed" icon="url(#MsgSessionTab.CloseButton.TabPressed)" />
</part>
<part name="label" fill="none"/>
<part name="iconRight" fill="none"/>
</part>
</style>
Then go to the Images\IcqMessageDlg folder inside the Skin's folder and open the edit.css file. Then add the following at its bottom:
/* Zlango related styles */
.cZlangoTable
{
display: inline;
position: relative;
direction: ltr;
top: 7;
}
.cZlangoTd
{
font-weight: bold;
width: 100%;
color: #939598;
font-size: 10px;
font-family: arial;
}
After that, open the Combined.css file in the same folder and add this at the bottom:
/* Zlango related styles */
.cZlangoTable
{
display: inline;
position: relative;
direction: ltr;
top: 7;
}
.cZlangoTd
{
font-weight: bold;
width: 100%;
color: #939598;
font-size: 10px;
font-family: arial;
}
/* Drag and Drop User */
/*span{font-family:verdana,tahoma,arial; color:#579da8; font-size:11px;}*/
.mainDiv
{
width: auto;
font-family: verdana,tahoma,arial;
color: #579da8;
font-size: 11px;
padding-bottom: 10px;
}
.boldText
{
font-weight: bold;
}
.failedStyle
{
float: right;
vertical-align: middle;
padding-right: 5;
}
.failedImage
{
vertical-align: middle;
}
.linkPos
{
padding-left: 12;
padding-top: 0;
}
.linkPos a
{
margin-right: 11px;
}
#stsIcon
{
float: left;
margin-left: 12;
margin-right: 12;
}
#myLinks
{
margin-top: 14;
margin-left: 1;
}
#innerDiv
{
width: auto;
word-wrap: normal;
padding-top: 15px;
}
#innerDiv span
{
width: auto;
word-wrap: normal;
}
#failedText
{
font-family: Tahoma;
color: red;
}
span:title
{
color: Red;
background-color: Green;
}
Then go to the Images\Common\IcqDhtmlObjects folder and copy the contents from the same folder of the Sample Skin (http://www.animesharp.com/icq/skinning-howto) to that folder (There should be folders named FileXfer, IcqMessageDlg and SMS.
After you finished, restart the ICQ software and your Skin should work properly again. However, any new elements which were introduced with the new ICQ version will remain unchanged (and therefor green).