Hi all,
I have made a basic skin (I'm still new to this) and container using ascx files. I am using various images to make the border (rounded corners etc) on the module. All of these are specified in the CSS file as follows:
#ContainerHeader
{vertical-align:top;}
#ContainerHeader
.Left {background: url(header_cap_left_purple.gif) bottom left no-repeat;width: 68px; height:54px; padding: 0;}
#ContainerHeader
.Actions {background: url(Header_Cap_Middle_Purple.gif) repeat-x bottom; padding: 0 0 10px 0; width: 1px;}
#ContainerHeader
.Head {background: url(Header_Cap_Middle_Purple.gif) repeat-x; font-size: 15px; background-repeat: repeat-x; padding-top: 25px; vertical-align:top;}
#ContainerHeader
.Right {background: url(Header_Cap_Right_Purple.gif) bottom left no-repeat; width: 100px; height:54px; padding: 0;}
#ContainerHeader
.Buttons {background: url(Header_Cap_Middle_Purple.gif) repeat-x bottom; padding-top: 25px; text-align: right;}
The important part of the .ascx file (for the header) is as follows:
<
td id="ContainerHeader" >
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed">
<tr>
<td class="Left"><img src="<%= SkinPath %>spacer.gif" /></td>
<td class="Actions" nowrap><dnn:ACTIONS runat="server" id="dnnACTIONS" /></td>
<td class="Head" nowrap><dnn:TITLE runat="server" id="dnnTITLE" /></td>
<td class="Buttons" valign="top" nowrap>
<dnn:VISIBILITY runat="server" ID="VISIBILITY" />
<dnn:ACTIONBUTTON5 runat="server" ID="ACTIONBUTTON5" CommandName="ModuleHelp.Action" DisplayIcon="True" DisplayLink="False" />
<dnn:ACTIONBUTTON2 runat="server" ID="ACTIONBUTTON2" CommandName="SyndicateModule.Action" DisplayIcon="True" DisplayLink="False" />
<dnn:ACTIONBUTTON3 runat="server" ID="ACTIONBUTTON3" CommandName="PrintModule.Action" DisplayIcon="True" DisplayLink="False" />
<dnn:ACTIONBUTTON4 runat="server" ID="ACTIONBUTTON4" CommandName="ModuleSettings.Action" DisplayIcon="True" DisplayLink="False" />
</td>
<td class="Right"><img src="<%= SkinPath %>spacer.gif" /></td>
</tr>
</table>
</td>
Now I want to make an exact copy of the container, except that I want to use different images. The only difference in the images is the color. Since my CSS declarations specifies a file name for backgrounds, it seems as though I am forced to make twice as many declarations (one for each color) and duplicate a ton of information. kind of like this:
#ContainerHeader_Purple
{vertical-align:top;}
#ContainerHeader_Purple
.Left {background: url(header_cap_left_purple.gif) bottom left no-repeat; width: 68px; height:54px; padding: 0;}
#ContainerHeader_Purple
.Actions {background: url(Header_Cap_Middle_Purple.gif) repeat-x bottom; padding: 0 0 10px 0; width: 1px;}
#ContainerHeader_Purple
.Head {background: url(Header_Cap_Middle_Purple.gif) repeat-x; font-size: 15px; background-repeat: repeat-x; padding-top: 25px; vertical-align:top;}
#ContainerHeader_Purple
.Right {background: url(Header_Cap_Right_Purple.gif) bottom left no-repeat; width: 100px; height:54px; padding: 0;}
#ContainerHeader_Purple
.Buttons {background: url(Header_Cap_Middle_Purple.gif) repeat-x bottom; padding-top: 25px; text-align: right;}
#ContainerHeader_Green
{vertical-align:top;}
#ContainerHeader_Green
.Left {background: url(header_cap_left_Green.gif) bottom left no-repeat; width: 68px; height:54px; padding: 0;}
#ContainerHeader_Green
.Actions {background: url(Header_Cap_Middle_Green.gif) repeat-x bottom; padding: 0 0 10px 0; width: 1px;}
#ContainerHeader_Green
.Head {background: url(Header_Cap_Middle_Green.gif) repeat-x; font-size: 15px; background-repeat: repeat-x; padding-top: 25px; vertical-align:top;}
#ContainerHeader_Green
.Right {background: url(Header_Cap_Right_Green.gif) bottom left no-repeat; width: 100px; height:54px; padding: 0;}
#ContainerHeader_Green
.Buttons {background: url(Header_Cap_Middle_Green.gif) repeat-x bottom; padding-top: 25px; text-align: right;}
Is this the correct approach, or is there a better way?
Thanks in advance!
Paul Hermans