Editing the CSS Code of a Multi Layout Region

From Documentation
Jump to: navigation, search

Editing the CSS Code of a Multi Layout Region

You can customize the Multi Layout Regions by editing the CSS Code in Style View.

You can make general or particular modifications of the Multi Layout Regions style.

If you want to modify the general style of the Multi Layout Region, you may edit the MLR.css file.

The MLR.css file acts upon the entire site. If you want to modify the current style of a specific Multi Layout Region, then you modify the file that corresponds to it. The name of this file has the following structure: MultiLayoutRegion.number.type.css.

For example: MultiLayoutRegion1Tab_Top.css.

To identify the .css file, you need to know the name of the Multi Layout Region and its type. The identification of this file is made knowing the name of the MLR and its type (MultiLayoutRegion1Tab_Top.css).

If you change the Multi Layout Region ID, the CSS file that corresponds to it keeps its name, but the selectors' name is changed.

For example, if a Multi Layout Region has the Object ID: MultiLayoutRegion1, and you change its name to mlr1, then the CSS file name will be MultiLayourRegion1 and the selectors name mlr1.

Note: You can edit these files, but it is not recommended to delete them.

Before making changes to the CSS Code, make sure you have selected one of the Tab Control options for the Multi Layout Regions.

To edit the CSS Code of a Multi Layout Region:

  1. Go to Style View.
  2. Select the MLR.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Tab Control that you want to edit.

If you add multiple types of Tab Controls for the Multi Layout Regions, all types of controls will be displayed in the Selectors left pane.

  1. Select the graphic element of the Multi Layout Regions that you want to edit.
  2. Make the changes on the CSS-Common Panel.

For example, if you want to edit the style, the width and the color of the borders of the Accordion Multi Layout Region:

  1. Go to Style View.
  2. Select the MLR.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Accordion Tab Control.
  4. Select .basic.
  5. On the CSS-Common panel, select the Borders tab.
  6. There are four buttons for controlling the four borders: Top, Left, Right, Bottom.
  7. Set the style, the width and the color for the selected border.
  8. Place an Accordion Multi Layout Region on the page and preview it to see the results.

Each Multi Layout Region consists of navigation elements or tab controls and panels or layout regions. In Page Design, you can edit the background of each Multi Layout Region and of each Layout Region included in it. The Tab Controls cannot be edited in Page Design. You can edit the navigation elements in Style View by editing the CSS code.

Let's assume that you have a Multi Layout Region displayed as Tab Top with two Layout Regions and you want the entire component to have the same color. Even though you changed the background color for the Multi Layout Region and for its Layout Regions, the tab control background color doesn't change.

To edit the Tab Control style:

  1. Go to Style View.
  2. Select the MultiLayoutRegion1tab_top.css file from the Styles Tree section.
  3. On the Selectors section, select the blue button on the left that corresponds with the Tab Top Tab Control.
  4. Select #MultiLayoutRegion1LYR.ui-tabs-panel.
  5. On the CSS-Common panel, select the Background button and change its color.
  6. The changes will be visible for the element.
  7. Preview the page to see the results. The Tab Control has the same color as the background of the Multi Layout Region and its Layout Regions.

For more information, see Using the CSS Panels in the Selectors View.

Retrieved from "http://wiki.netobjects.com/index.php?title=Editing_the_CSS_Code_of_a_Multi_Layout_Region&oldid=2318"