Administrator Help - RC v3.3
Search for:  by:     Edit Help
 Chapter - 3.5 CSS Editor

All .css stylesheet templates stored in css folder. To facilitate to some degree stylesheet management, there is a basic CSS editor, which could be launched from Content Management. While at Content Management, click CSS link to navigate to CSS Editor.

Note: Working with CSS (Cascading Style Sheets) editor requires come understanding of css syntax.

On the right, there is a list with all .css stylesheets stored in css folder. By default (when you load CSS editor from Content Management), currently selected at the Admin Preferences design template, is loaded to the editor window.While selecting an item from the list, respective stylesheet opened for editing in a text box. After making amendments to stylesheet, click "Save CSS Template" button to save changes.

The list contains following css stylesheets:

  • admin_menu - collection of classes for generating drop-down admin menu rendered at the top of all admin page.
  • main - classes for HTML layers in Main_Page_Center template.
  • common - collection of classes common for all xl_ stylesheets. This template imported on the fly into every other xl_ stylesheet template.
  • cman – stylesheet for Content Management and CSS Editor pages.
  • xl_.... - 30 stylesheet templates for different classified web site appearance.

If you edit an xl_ template, which is currently loaded in Admin Preferences, then the changes would take an effect as soon as you save the template. It might not be desirable specifically if the classified opened for visitors. Here are some guidelines for amending css templates.

  • Use Backup button to create a backup copy of currently loaded template before making significant amendments. In case you did not like changes, use Restore button to restore template from the last backup. Time stamps for both - original and backed up copy could be viewed below template name at the top of the editor window.
  • Another way to work safely with template is to create a copy of it. Create a new template from currently loaded into editor template making sure the new template name starts with xl_. Now, you may safely amend newly created template without changing appearance of your classified installation visible to visitors. To view the result of amendments, use Preview link. While clicking Preview link, a new browser window would open displaying a main classified page "dressed" in currently selected in an editor template. You may safely navigate to any other page within that window looking at various content pages of the classified. After making amendments to the template you are currently working with, refresh preview window for instance changes. When finished, click Cancel Preview Mode link. From here, you may load newly created and amended template in Admin Preferences or you may simply copy the template content, load template (which is currently selected in Admin Preferences) in an editor and paste the content over, saving template.
  • While amending classes, make sure the target HTML layer where class is applied, looks equally "good"in different browsers. Browsers tend to have bugs and css compliance issues.
  • Whenever you use any relative URL path reference to background images stored in img folder within CSS templates, make sure the path starts with ../ (parent folder reference). In other words, path to images should be relevant to template stored in css folder.

CSS Editor has 2 more features - Background Image viewer and Color Sampler.

Both launched from Display Color Sampler + bg Images for current template link. Every background image used in classes for currently selected template rendered within the windows opened from this link. Clicking individual image would open it in a new window with option to "repeat" it in different directions (X, Y, both or none). Image viewer used mostly for reference and quick look into the css template core.

You may retain Color Sampler window only, by clicking Show/Hide Images button. Sampler used to generate any color (by sliding RGB mixer) and then assigning hex color value to the respective class attribute within CSS editor window. After mixing a color,use the 6 character color value from the # box within sampler window for any class attribute accepted color values - such as background color, link colors, border color... etc. Make sure to have a # character in the front of any color value you assigned within the class attribute.

Another way of using color sampler, is to actually get a visual confirmation of the color used for class attributes. To do that, copy the color value assigned to any attribute from CSS editor window (less # character) and paste it into # box within Sampler window. The color box to the left from # box would be rendered with pasted color giving an instant color preview. Finally, the color shade you just pasted for the preview could be instantly tweaked. Here is and example of using color sampler to visually amend the color shade assigned to one of the class attributes:

  • You need to tweak the color for site background in xl_3d_desert template.
  • Site background color is assigned to element body as background-color attribute and the current value is #B09F8C
  • To view what color represents the value of #B09F8C, copy B09F8C into the # box in color sampler.
  • You see that the color has a brown shade,which you wish to lighten up just a notch.
  • Click "Update Slider" button. The RGB slider bars would automatically be moved into the respective to the sampled color section.
  • From here, use RGB slider bars to amended sampled color (change shade, hue, ..etc).
  • When you like a new color, copy its value from the # box and override the background-color attribute color value for the element body within the CSS editor window. Save the template and click Preview link. You should see that the site background is now has a different shade - respective to the new color you mixed in color sampler.

CSS editor equipped with "Edit Area" code viewer (a third party product). It is a replacement to standard HTML text area. Code viewer renders the selected stylesheet template with color-coded markups. In addition, it does display line numbers, has a built-in search & replace feature, full screen mode, undo/redo buttons and word wrapping mode. While "Edit Area" is a convenient online code editor, it appears to be a bit slow.

©2003-2010  Rapid Classified v3.3  GA Soft