Step 1: Copy the skin folderMake a copy of the folder containing the skin you wish to duplicate and rename it with your new skin name. For this example, I'll make a copy of the popular XPLuna skin and name it DNNStuff. Expand the newly created skin folder named DNNStuff and also expand the Top folder. In here you'll see a file named styles.css. This is the css file that will be included in your portal when you pick the DNNStuff skin with the Top style. If you were to go into the configuration of an Aggregator module right now, you'd already see a new skin named DNNStuff for the top style but it's still not ready to go yet. The next step is the crucial step that allows the new skin to work properly. A step that many users forget to do. Step 2: Edit the Styles.css fileOk, now edit the styles.css file and change all occurences of the old skin name to the new skin name. Here is a sample from the styles.css file before and after the rename. Before:.XPLuna_Top_TabStrip {
margin:0;padding:0;
background-color: #fff;
border: none;
float: left;
filter: none;
}
.XPLuna_Top_TabPage {
margin-top: 1px;
border: none;
width: 100%;
background: #fff;
padding: 2px 2px;
font: 14px Verdana;
color: black;
border: 1px solid rgb( 145, 155, 156 );
clear: both;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#eeeeee');
}
.XPLuna_Top_TabStrip .XPLuna_Top_TabUnselected {
cursor: pointer; After:.DNNStuff_Top_TabStrip {
margin:0;padding:0;
background-color: #fff;
border: none;
float: left;
filter: none;
}
.DNNStuff_Top_TabPage {
margin-top: 1px;
border: none;
width: 100%;
background: #fff;
padding: 2px 2px;
font: 14px Verdana;
color: black;
border: 1px solid rgb( 145, 155, 156 );
clear: both;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#ffffff', EndColorStr='#eeeeee');
}
.DNNStuff_Top_TabStrip .DNNStuff_Top_TabUnselected {
cursor: pointer; Now you can safely make modifications to your new skin without the risk of those changes being overwritten by future upgrades to the Aggregator module. |