gpEasy CMS » Documentation

True WYSIWYG

Beginning with version gpEasy 2.0a1, gpEasy offers the ability to edit pages with True WYSIWYG. The theme being used must be set up properly for True WYSIWYG to work.

Basics

You'll need to edit two files to set up True WYSIWYG for your theme: settings.php and /style.css. (If you are just getting started with themes, you can get more information here: http://docs.gpeasy.com/index.php/Main/Theme Creation Guide).

In your settings.php file, add the $GP_STYLES array to define which styles will be used for True WYSIWYG.

<?php
 
$GP_STYLES = array();
$GP_STYLES[] = '#content';

In the above example "#content" relates to two things:

  1. The <div id="content">...</div> section of your html documents.
  2. The #content{ ... } section of your style.css file.

So, as a result of setting $GP_STYLES[] = '#content', when you edit content with the <div id="content"> section of your pages, the #content{...} portion of your style.css file will apply to the WYSIWYG editing area.

Background and Font Colors

The editing area will inherit the css for appropriate area you specified in $GP_STYLES and the css for the body and html of your document. So, if your css resembles the following,

body{
    background-color:black;
}
#wrapper{
    background-color:white;
    width:960px;
    margin:0 auto;
}
#content{
    color:black;
}
the text and background color of your editable area will both be black rendering it unreadable. The solution is to make sure the background color of #content is white.
#content{
    background-color:white;
    color:black;
}


Last modified 05:08 Sun, 29 Apr 2012 by Main. Accessed 4,453 times Children What Links Here