CSS - Advice on modifying a CSS design

Modifying CSS style sheets generally requires advanced skills in this domain. However, it is possible to do so without being an experienced webmaster.

Here are some tips to help you customize your CSS designs:
 1) Methodology

Go to the [Site\Site Design] menu and click on [Create and Manage Custom Site Designs].
We recommend saving copies of your work on a regular basis by clicking on the [View Properties] icon and then on [Duplicate] to generate a copy of the design. Modifying CSS designs can be tricky and simply deleting a line or modifying an ill-chosen parameter can completely disrupt the display of your site with this design.
 2) Tools

We recommend using Mozilla Firefox as your browser and Firebug, which is an add-on application. Firebug allows you to view the source code and CSS class associated to each zone of an HTML page and to perform tests directly in the browser.

By hitting the [F12] key on your keyboard, you can "Inspect" the zones of a web page and find out what CSS classes are attached to each zone.

Tip: CSS is based on an inheritance hierarchy of classes and sub-classes, where certain parameters are passed down through the hierarchy. In certain instances, to identify the "parent" class, it can be useful to click on the HTML code that is displayed in the left-hand zone of Firebug to select one of the <div> tags located slightly higher in the code.

Once you have correctly identified the relevant class with the help of Firebug and tested your modifications successfully, you can then easily find the class in your CSS code using the "CSS" tab.

In your Actinic administration space:

Go to the [Site\Site Design] menu.
Click on [Create and Manage Custom Site Designs].
Find the CSS design to modify in the list and click on the [Edit Properties] icon.

By hitting "Ctrl + F" (or "Cmd + F" on Mac) and entering the class name in the browser's "Find" text entry zone, you will be brought directly to this class in the CSS code.

Attention: You must empty your browser cache to see the changes to your site. With Firefox, all you have to do is hit the [F5] key.
 3) Advice for the Experts

If you are performing a large amount of modifications to the content of your CSS code, remember to check your work on a regular basis by previewing the results in several different browsers.

Internet Explorer and Firefox have radically different ways of interpreting margin and padding parameters of all "Block" type tags (<ul>,<p>, etc) and, in particular, their default values. All "z-index" parameters are also managed differently by Internet Explorer.

Therefore, a site design that displays perfectly with Firefox can be completely distorted in Internet Explorer, and vice versa.

There isn't an ideal procedure to follow. It is necessary to conduct tests while correcting or assigning padding and margin values, if needed, for the relevant classes and to be careful when manipulating z-index parameters.

For information, Internet Explorer 8 and Google Chrome each offer a functionality similar to Firebug.
  • In Internet Explorer 8, this functionality is called "Developer Tools". You can access it in the [Tools] menu or by hitting the [F12] key on your keyboard.

  • In Google Chrome, this tool can be accessed by clicking on [Control the current page\Developer\Javascript Console] or by hitting the "CTRL + Shift + J" keys simultaneously.
 4) Actinic CSS Documentation

This documentation can be used by graphic artists and experienced webmasters with good CSS skills, as well as beginners who want to learn more about CSS technology. This will also give experienced users an overview of the classes that can be used to customise an Actinic site and will allow beginners to better understand Actinic style sheets.

Download the CSS documentation in PDF format (3 Mb).

Add to favorites: http://www.oxatis.co.uk/Help/HelpCenterContent.asp?ActionID=1024&TID=55154&MID=55562%7C16001&LangID=1
© 2001-2018 Oxatis. All rights reserved.