Stylemanager was created for end-user webmasters of CMSimple_XH sites, who want to try out different colors, styles etc. on their website — without going into the css file.
After proper setup changing style values is easy. Changes can be seen in the dummy text. The dummy text can be switched to any page of the site.
Notice on browser caching: When moving to normal pages afterwards, the changes may not be visible because browsers cache old stylesheets. Usually after page reload changes become visible.
Version 1 alpha 2 has a changed plugins/stylemanager/codeeditor/init.js to work with Christoph Becker's new Codeeditor. No need to upgrade if you don't use Codeeditor.
Stylemanager requires a stylemanager.csv file and some additions to the stylesheet.css for every template. It comes with an environment to create these files.
To show how it is done, prepared CMSimple_XH templates are available for download. Copy the templates into your templates folder for testing Stylemanager.
How many css settings you make changeable, is up to you. Sometimes webmasters just want to be able to change the basic font of their template. In this case the stylemanager.csv can be very short.
After installation the plugin looks for the stylemanager.csv
file in the CMSimple templates folder.
This file tells the plugin what to show as editable variables on the plugin main page.
You have to create this file with Stylemanager.
Variables in the plugin's menu opens an environnement to create this file..
On the left you will see the stylesheet.css of the template
and on the right the list of variables, ... probably still empty.
Small monitor? If your monitor is only 1024px wide, you need to adjust the relative percentage width of the css list to 40
as otherwise there is not enough space for the variables list. Even with other monitors you may like to try this setting.
After clicking on + the plugin will propose a trigger in form of a digit within comment markers,
e.g. /*1*/
to be entered before the variable in the css file.
Make sure not to leave an empty space between the trigger and the value.
Hint: Triggers reduce readability of the css file.
Here cmb's plugin Codeeditor is a good help, as it gives triggers a different color.
Install at least version 1 beta 5 (former versions won't work with stylemanager) and set Stylemanager config use codeeditor
to 1.
;
this is usually a good "end trigger" and this is preset in the plugin.margin: 10px 0 0 10px;
margin: /*1*/10px /*2*/0 /*3*/0 /*4*/10px;
;
as end trigger.font: normal normal 16px/1.8 Georgia,serif;
font: /*10*/normal /*11*/normal /*12*/16px//*13*/1.8 /*11*/Georgia,serif;
/
as end trigger.;
as end trigger.url(images/
first,
and this you usually don't want to change.
Therefore a combination is a good trigger, e.g.: /*10*/url(images/
.
The variable starts after the trigger, i.e. it is the name of the image.url(images/
would do as unique trigger,
and there is no need to start with /*10*/
.)
.Name of element 1 |
variable 1
variable 2
variables 3 & 4 variable 5 & 6 variable 7 |
---|---|
Name of element 2 |
variable 8 |
new section
text 1 will create a selectable menu section.|
will de deleted, as this is the delimiter of the csv file.;
, e.g. normal;bold
.;;
between the options and the names you want to give your options. Take care not to add superfluous empty spaces and don't forget to always use ;
between valuesFont: normal normal 16px/1.4 Georgia;
Font: /*13*/normal normal/**/ 16px/1.4 Georgia;
/*13*/
up to: /**/
method:option list
, options:normal normal;normal bold;italic normal;italic bold;;normal text;bold text;italic text;bold italic text
;
) startvalue, endvalue and increment of the range. If increment is not set, an increment of 1 is used. 0;30
with an end trigger px
0;10;0.1
with end trigger em
.text 1
or text 2
.To style your text, use text h4 etc.
To make a new line in your text enter <br>
, hitting "return" will produce a new line which will be deleted on saving.
© 2012 by svasti