Location: PHPKode > projects > Freedomeditor file editor env. (PHP) > freedomeditor/DOCS/html/creating-cms-templates.html
<html><head></head><body>
<br />
Starting in a empty folder,<br />
<br />
<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/3.png" alt="3.png" title="3.png" /><br />
<br />
<br />
We switch the the Editor view, where we start writing a filename in the &quot;element&quot; field.<br />
Next we click the selectbox and change the option to &quot;html&quot;. Using html-content option would not let tinyMCE use it's fullpage plugin, and is only usefull when <b style="color:black;background-color:#99ff99">creating</b> a html file that contains only pieces of html without any &lt;head&gt;, &lt;body&gt; and &lt;html&gt; tags.<br />

Then we activate tinyMCE.<br />
Take a good look at all it's options.<br />
<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/4.png" alt="4.png" title="4.png" /><br />
After <b style="color:black;background-color:#99ff99">creating</b> a nice page, click the edit_area checkbox, and note how we have the css style tags cluttering all over the HTML place.<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/5.png" alt="5.png" title="5.png" /><br />
No worries however, this is perfectly acceptable. But if we like, we can grab those style tags to a seperate valid marked-up CSS file, replace them in the HTML file with corresponding class tags.<br />
<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/6.png" alt="6.png" title="6.png" /><br />
<br />

Go to the Settings menu and click the above highlighted option, preferably with the mousewheel button when using firefox, to open in a new browser/tab view. Since we do not want to lose our freshly created template.<br />
<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/7.png" alt="7.png" title="7.png" /><br />
<br />
Then we goto the structure menu, where we choose to edit the global settings of the core client.<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/8.png" alt="8.png" title="8.png" /><br />
We move to the editor menu where we change the &quot;preserve_styletags to &quot;off&quot;, and click the &quot;send&quot; button below the editor to save this setting.<br />
With this setting, after each save of a html document with style tags,<br />

extern css files will be generated as shown on the image below. Renaming them will perform like a undo button for a template, that is if only its styling was edited.<br />
<br />
<br />
<img src="http://freedomeditor.wiki.sourceforge.net/space/showimage/9.png" alt="9.png" title="9.png" /><br />
<br />
<br />
Done editing? Save the new html document. Merge all the css files into a merged_0.css, which is the file to be used in the final html document.<br />
When there is a need to edit the template again but all the generated files are already gone except the merge result file, no worries.<br />
<br />
Simply rename the merged_0.css file to generated_0.css, and re-open the HTML document.<br />
<br />
Now if using certain CMSes to include certain CMS tags in templates, it may be possible that TINYMCE bails out and messes the tags (which could be caused by wrong <b style="color:black;background-color:#ffff66">freedomeditor</b> tinyMCE settings aswell as lack of a good working tinyMCE codeprotector plugin.)<br />

Therefore _always_ keep backup copies of HTML documents without the CMS template tags.<br />
<br />
Always clean up both generated_*.css as merged_*.css files when using this option to avoid confusion!<br />
<br />
To manually load css files into tinyMCE, simply click the square with &quot;css&quot; in it, to the right of a file.<br />
To reset the list of css files tinyMCE currently loads, click the CSS square in the bottom of the image above, above the Merge option.<!-- google_ad_section_end -->
</body>
</html>
Return current item: Freedomeditor file editor env. (PHP)