Style Editor
The Style Editor and Style Sheets
The formatting of EditMe sites is largely controlled by a style sheet. Style sheets use a programming language called CSS to define how elements of the page will look. Style sheets can be edited by hand using the Site Settings -> Design -> Style Sheets screen. The Style Editor provides a simplified interface for making formatting changes to the style sheet.
The Style Editor provides form-based controls to change certain colors, widths, borders and background images defined in the style sheet. Which settings are exposed in the Style Editor depends on the site's current style sheet. Currently, only the Yorktown family of skins is supported in the Style Editor.
The Style Editor can be accessed by navigating to Site Settings -> Design -> Style Editor.
Experimenting and Rolling Back Changes
The best way to understand how changes will affect your site's design is to experiment by changing one setting at a time to see its affect. You may wish to make notes on what values you change and what the original values were as you experiment with different settings.
Style sheets are cached by your browser, so you'll need to do a hard refresh (Ctrl+F5) to see changes you make.
When you change a value in the Style Editor, it changes the actual value in your site's current CSS style sheet, creating a new page revision. If you make changes that you don't like and want to undo them, you can roll back your style sheet page by editing and saving a previous version of the style sheet page. This is the same set of steps you would use to roll back any page. You can access the Versions screen for your style sheet using the Site Settings -> Look & Feel -> Styles screen.
Setting Types
The following setting types may be found in the Styles Editor for your current style sheet:
Color - Change colors by simply clicking the color box and using the pop-up color selector tool. To enter a specific color value, use the text box on the third tab of the color selector.
Pixel Width/Size - These boxes will typically have a "px" value specified, such as 5px. Enter any number followed by px with no space. Borders, paddings and margins may allow specification of four values separated by spaces in order of top, right, bottom, left. For example, a border width of 1px 2px 3px 4px would specify 1px for the top, 2px for the right, 3px for the bottom and 4px for the left.
Font Family - This is the name of the font used to display text. Keep in mind that on the web, different visitors to your site may have different fonts installed on their computers. See Code Style's CSS font sampler for a list of web-safe font families and to experiment with examples. You can specify multiple values separated with commas, referred to as "stacks". A browser that doesn't support the first font family will try the second, third, and so on until it finds a supported font family. Font families with spaces should be enclosed in single quotes (e.g. 'Trebuchet MS').
% Values - Values specified in a % (percentage) value allow you to scale the size (e.g. font size) up or down from the standard defined by the style sheet. Specifying a non-percentage value here may produce inconsistant results. Enter a number followed by a % with no space.
Images - Images defined in style sheets may be background images, toolbar buttons or other graphical elements. These fields have a "Test" link that will open the specified image when clicked. Before making a change, be sure to click the Test link to make sure you've entered a valid image address. Invalid image addresses will not produce an error. To specify your own image, upload the image as an attachment to any page of your site. Then copy the image URL from the Attachments list (right click and select the command to copy the image location to the clipboard). Then paste that value into the box. (A future update of the Style Editor will add direct file upload capability.)
Making Changes Not Supported by the Styles Editor
If you wish to make changes to your Style Sheet that aren't exposed in the Styles Editor, you can still edit your site's style sheet directly using the page editor. The style sheet contains code to provide support for the Styles Editor found within /* comments */. Be careful not to change these comments - doing so could break the Styles Editor. Again, you can always roll back your style sheet to a previous version if this happens.
You might also ask EditMe support if there's a setting you'd like to change that isn't listed in the Styles editor - it may be easy to add for your site (and future versions of the Skin).