SlickEddie
07-17-2009, 11:24 PM
The biggest change in V1.5 is the added ability to have color schemes, in this short tutorial we show you how to add replacement text to your style sheets (CSS code), and how to add the colors for the color scheme.
Things to remember:
1. Style sheets should have a .css extension, and are stored in the css/(fr, hi5, myb, v1, or v2) directories.
2. Scheme files should have a .json extension, and are stored in css/color_schemes
3. Be careful when naming your replacement text
Configuring your stylesheets for color:
Lets take a look at just the body section of our new style sheet files to keep the post short.
body {
background-color:@@COLOR1@@;
background-image: url(@@BG@@);
background-attachment: fixed;
background-position: center center;
background-repeat:repeat;
scrollbar-face-color:6AB4F2;
scrollbar-shadow-color:40FFFF;
scrollbar-highlight-color:40FFFF;
scrollbar-3dlight-color:40FFFF
scrollbar-darkshadow-color:40FFFF;
scrollbar-track-color:@@COLOR2@@;
scrollbar-arrow-color:@@COLOR3@@; }
The @@COLOR1@@, @@COLOR2@@ etc.. are replacement text, the replacement text can be anything, but you want to be careful not to name it something that would normally be used in a style sheet.
The replacement text is used to apply the color schemes to the style sheets.
Now let's look at a color scheme file:
{
"fielddefinition": [
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
},
{
"fieldname" : "@@COLOR2@@",
"fieldvalue" : "#F68B1F"
},
{
"fieldname" : "@@COLOR3@@",
"fieldvalue" : "#F17022"
},
{
"fieldname" : "@@COLOR4@@",
"fieldvalue" : "#62C2CC"
},
{
"fieldname" : "@@COLOR5@@",
"fieldvalue" : "#E4F6F8"
},
{
"fieldname" : "@@COLOR6@@",
"fieldvalue" : "#EEF66C"
}
],
"twitter": [
{
"background" : "#FDB813",
"tile" : "Yes",
"text" : "#F17022",
"links" : "#62C2CC",
"sidebar" : "#FDB813",
"sidebar-border" : "#EEF66C"
}
]
}The color scheme files are .json files located in the "css/color_schemes" directory.
The files should have the .json file extension
example: scheme1.json
The color scheme files control what text gets replaced with a specific color in the style sheets.
The green text controls the style sheets, the red text you can ignore for now it's your twitter setting.
In the above code you see
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
}This means that all occurrences of @@COLOR1@@ in the style sheet will be replaces with #FDB813.
Lets say you wanted to add another set of text to be replaced, and in the style sheet you called it ~REPLACE-ME~ , and you want to replace it with #000000, you would just add it to the json array like this (blue text)
{
"fielddefinition": [
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
},
{
"fieldname" : "@@COLOR2@@",
"fieldvalue" : "#F68B1F"
},
{
"fieldname" : "@@COLOR3@@",
"fieldvalue" : "#F17022"
},
{
"fieldname" : "@@COLOR4@@",
"fieldvalue" : "#62C2CC"
},
{
"fieldname" : "@@COLOR5@@",
"fieldvalue" : "#E4F6F8"
},
{
"fieldname" : "@@COLOR6@@",
"fieldvalue" : "#EEF66C"
},
{
"fieldname" : "~REPLACE-ME~",
"fieldvalue" : "#000000"
}
],
"twitter": [
{
"background" : "#FDB813",
"tile" : "Yes",
"text" : "#F17022",
"links" : "#62C2CC",
"sidebar" : "#FDB813",
"sidebar-border" : "#EEF66C"
}
]
}Setting your style from a link on the page:
In the install thread (CACMS (http://www.creativeaftermath.com/forum/showthread.php?t=1008) , ELCMS (http://www.creativeaftermath.com/forum/showthread.php?t=1009), Standard (http://www.creativeaftermath.com/forum/showthread.php?t=1010)) you'll notice we added a table of links containing several example schemes it looked like this
<table>
<tr>
<td style="background:#FDB813"><a href="javascript:void(0)" onClick="setScheme('scheme1', '#FDB813'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#F2F5ED"><a href="javascript:void(0)" onClick="setScheme('scheme2', '#F2F5ED'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#B96A9A"><a href="javascript:void(0)" onClick="setScheme('scheme3', '#B96A9A'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#927B51"><a href="javascript:void(0)" onClick="setScheme('scheme4', '#927B51'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#3964C3"><a href="javascript:void(0)" onClick="setScheme('scheme5', '#3964C3'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#9BE1FB"><a href="javascript:void(0)" onClick="setScheme('scheme6', '#9BE1FB'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#194E84"><a href="javascript:void(0)" onClick="setScheme('scheme7', '#194E84'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#757116"><a href="javascript:void(0)" onClick="setScheme('scheme8', '#757116'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('scheme9', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
</table>
The onClick event is what sets the scheme that will be used
onClick="setScheme('scheme4', '#927B51'); return false;"The green text is the name of your scheme file (without the file extension).
The blue text is what the ajax div below the image will be set to onclick.
http://img6.imageshack.us/img6/3976/prevb.jpg
I'd advise using the color that stands out the most in your scheme.
So lets say you created a whole new scheme file and you named it"my-new-file", now you need to add another link to allow it to be set, you could do so like this.
<table>
<tr>
<td style="background:#FDB813"><a href="javascript:void(0)" onClick="setScheme('scheme1', '#FDB813'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#F2F5ED"><a href="javascript:void(0)" onClick="setScheme('scheme2', '#F2F5ED'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#B96A9A"><a href="javascript:void(0)" onClick="setScheme('scheme3', '#B96A9A'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#927B51"><a href="javascript:void(0)" onClick="setScheme('scheme4', '#927B51'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#3964C3"><a href="javascript:void(0)" onClick="setScheme('scheme5', '#3964C3'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#9BE1FB"><a href="javascript:void(0)" onClick="setScheme('scheme6', '#9BE1FB'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#194E84"><a href="javascript:void(0)" onClick="setScheme('scheme7', '#194E84'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#757116"><a href="javascript:void(0)" onClick="setScheme('scheme8', '#757116'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('scheme9', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('my-new-file', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
</table>
Things to remember:
1. Style sheets should have a .css extension, and are stored in the css/(fr, hi5, myb, v1, or v2) directories.
2. Scheme files should have a .json extension, and are stored in css/color_schemes
3. Be careful when naming your replacement text
Configuring your stylesheets for color:
Lets take a look at just the body section of our new style sheet files to keep the post short.
body {
background-color:@@COLOR1@@;
background-image: url(@@BG@@);
background-attachment: fixed;
background-position: center center;
background-repeat:repeat;
scrollbar-face-color:6AB4F2;
scrollbar-shadow-color:40FFFF;
scrollbar-highlight-color:40FFFF;
scrollbar-3dlight-color:40FFFF
scrollbar-darkshadow-color:40FFFF;
scrollbar-track-color:@@COLOR2@@;
scrollbar-arrow-color:@@COLOR3@@; }
The @@COLOR1@@, @@COLOR2@@ etc.. are replacement text, the replacement text can be anything, but you want to be careful not to name it something that would normally be used in a style sheet.
The replacement text is used to apply the color schemes to the style sheets.
Now let's look at a color scheme file:
{
"fielddefinition": [
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
},
{
"fieldname" : "@@COLOR2@@",
"fieldvalue" : "#F68B1F"
},
{
"fieldname" : "@@COLOR3@@",
"fieldvalue" : "#F17022"
},
{
"fieldname" : "@@COLOR4@@",
"fieldvalue" : "#62C2CC"
},
{
"fieldname" : "@@COLOR5@@",
"fieldvalue" : "#E4F6F8"
},
{
"fieldname" : "@@COLOR6@@",
"fieldvalue" : "#EEF66C"
}
],
"twitter": [
{
"background" : "#FDB813",
"tile" : "Yes",
"text" : "#F17022",
"links" : "#62C2CC",
"sidebar" : "#FDB813",
"sidebar-border" : "#EEF66C"
}
]
}The color scheme files are .json files located in the "css/color_schemes" directory.
The files should have the .json file extension
example: scheme1.json
The color scheme files control what text gets replaced with a specific color in the style sheets.
The green text controls the style sheets, the red text you can ignore for now it's your twitter setting.
In the above code you see
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
}This means that all occurrences of @@COLOR1@@ in the style sheet will be replaces with #FDB813.
Lets say you wanted to add another set of text to be replaced, and in the style sheet you called it ~REPLACE-ME~ , and you want to replace it with #000000, you would just add it to the json array like this (blue text)
{
"fielddefinition": [
{
"fieldname" : "@@COLOR1@@",
"fieldvalue" : "#FDB813"
},
{
"fieldname" : "@@COLOR2@@",
"fieldvalue" : "#F68B1F"
},
{
"fieldname" : "@@COLOR3@@",
"fieldvalue" : "#F17022"
},
{
"fieldname" : "@@COLOR4@@",
"fieldvalue" : "#62C2CC"
},
{
"fieldname" : "@@COLOR5@@",
"fieldvalue" : "#E4F6F8"
},
{
"fieldname" : "@@COLOR6@@",
"fieldvalue" : "#EEF66C"
},
{
"fieldname" : "~REPLACE-ME~",
"fieldvalue" : "#000000"
}
],
"twitter": [
{
"background" : "#FDB813",
"tile" : "Yes",
"text" : "#F17022",
"links" : "#62C2CC",
"sidebar" : "#FDB813",
"sidebar-border" : "#EEF66C"
}
]
}Setting your style from a link on the page:
In the install thread (CACMS (http://www.creativeaftermath.com/forum/showthread.php?t=1008) , ELCMS (http://www.creativeaftermath.com/forum/showthread.php?t=1009), Standard (http://www.creativeaftermath.com/forum/showthread.php?t=1010)) you'll notice we added a table of links containing several example schemes it looked like this
<table>
<tr>
<td style="background:#FDB813"><a href="javascript:void(0)" onClick="setScheme('scheme1', '#FDB813'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#F2F5ED"><a href="javascript:void(0)" onClick="setScheme('scheme2', '#F2F5ED'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#B96A9A"><a href="javascript:void(0)" onClick="setScheme('scheme3', '#B96A9A'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#927B51"><a href="javascript:void(0)" onClick="setScheme('scheme4', '#927B51'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#3964C3"><a href="javascript:void(0)" onClick="setScheme('scheme5', '#3964C3'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#9BE1FB"><a href="javascript:void(0)" onClick="setScheme('scheme6', '#9BE1FB'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#194E84"><a href="javascript:void(0)" onClick="setScheme('scheme7', '#194E84'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#757116"><a href="javascript:void(0)" onClick="setScheme('scheme8', '#757116'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('scheme9', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
</table>
The onClick event is what sets the scheme that will be used
onClick="setScheme('scheme4', '#927B51'); return false;"The green text is the name of your scheme file (without the file extension).
The blue text is what the ajax div below the image will be set to onclick.
http://img6.imageshack.us/img6/3976/prevb.jpg
I'd advise using the color that stands out the most in your scheme.
So lets say you created a whole new scheme file and you named it"my-new-file", now you need to add another link to allow it to be set, you could do so like this.
<table>
<tr>
<td style="background:#FDB813"><a href="javascript:void(0)" onClick="setScheme('scheme1', '#FDB813'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#F2F5ED"><a href="javascript:void(0)" onClick="setScheme('scheme2', '#F2F5ED'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#B96A9A"><a href="javascript:void(0)" onClick="setScheme('scheme3', '#B96A9A'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#927B51"><a href="javascript:void(0)" onClick="setScheme('scheme4', '#927B51'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#3964C3"><a href="javascript:void(0)" onClick="setScheme('scheme5', '#3964C3'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#9BE1FB"><a href="javascript:void(0)" onClick="setScheme('scheme6', '#9BE1FB'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
<tr>
<td style="background:#194E84"><a href="javascript:void(0)" onClick="setScheme('scheme7', '#194E84'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#757116"><a href="javascript:void(0)" onClick="setScheme('scheme8', '#757116'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('scheme9', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
<td style="background:#02243C"><a href="javascript:void(0)" onClick="setScheme('my-new-file', '#02243C'); return false;"><img src="/background_styles/1.gif" height="20" width="20" border="0"/></a></td>
</tr>
</table>