Logga

Panels Appearance on a module

When you right-click on a module, at the bottom you can choose to go to the module's properties. There you will find a number of setting options.

Right click menu

In the dialogue box that appears, you can access different parts of the properties dialogue. By default, the Appearance panel is shown. This covers the property settings for Appearance. Here you can access the decorations for the module, spacing (CSS paddings), margins (CSS margins), size, responsive web and grid, background, borders and style (CSS).

Click the menu selection in the upper left corner and you can access the overview of all panels on a module.

Appearance module

Decoration

Under the decoration option you designate the decoration you want to use in the dropdown menu. From here you can also change or delete the decoration that is selected. Click the cross in the decoration menu to remove the decoration from the module.

Decoration

CSS paddings

Under CSS paddings, you can access padding settings. Padding affects distances within the module or layout. Here you set the padding at the top, bottom, left, or right.

CSS paddings

CSS margins

You can make margin settings under CSS margin. This setting affects the margins around the module or layout. Here you set the margins at the top, bottom, left or right.

Margins

Size

Set the size, width and height, of a module or layout under size. The default width of the module is the width of the entire content area. Here you can reduce or increase the width and set the height.

Here you can specify the module or layout’s width in columns based on those set on your website. The module can also be adjusted sideways here. The position is in relation to the columns that are set up on the website.

Size

Why adjust columns sideways?

By default, the content appears in the order in which it appears in the content box, from top to bottom. You can use adjust sideways to change the order in which the content is stacked. The reason why you would want to adjust the order may be that you want to have different looks on your site for a visitor visiting from a computer compared to one visiting the website via a mobile phone or tablet.

How do you adjust the content of your page?

If the prerequisite is that the centre column is 8 columns and the right column 4 columns.

1. Move the right column so that it is above the centre column in the content box.

2. Go into the properties of the right-hand column and Adjust sideways: 8 columns right.

3. Go into the properties of the centre column and Adjust sideways: 4 columns left.

4. Done!

In the editor, everything looks as before, but in the content box, you will see that the order of your content areas is different.

Responsive web

Show in breakpoints and Hide in breakpoints means that here you can make the settings to hide or show a module in the breakpoints that are set for the website.

Responsive web

Background

Background properties allow you to set a background colour for the current module or layout. Here you also choose if you want to designate a background image. The colours that you can choose depend on the colours that are available on the website, the colours that your permission can access, and the colours that the module has been assigned.

Background

If you choose to designate a background image to your module, you have to make size settings directly under the properties of the current module. A new view is displayed where you can select image.

Size

This sets the size of the background image with CSS. The following options appear:

  • Auto - Background image’s normal width and height
  • Contain - Rescales the image to the largest size so that both its width and its height can fit inside the content area
  • Cover - Scales the background image so that it is as large as possible, so that the background area is completely covered by the background image. Some parts of the background image may not fit.

Location

Here you set how you want to position the image, where the default is Top - left. The following options appear:

  • Top - Left
  • Top - Centre
  • Top - Right
  • Centre - Left
  • Centre - Centre
  • Centre - Right
  • Bottom - Left
  • Bottom - Centre
  • Bottom - Right

Repetition

Here you adjust whether the image should be repeated and how. The following options are available:

  • Horizontal and vertical
  • Horizontal
  • Vertical
  • No repetition

Borders

Here you can choose whether the module or layout should have a border and whether it should be all the way around (that is, top, down, right, and left) or just individual borders. Then you can select the type, colour and thickness.

Borders
  • Style - Select type from the list. The following options appear:
    • Solid
    • Dotted
    • Dashed
    • Double
    • groove
    • ridge
    • inset
    • outset
  • Color - Select a color from the list. The colors that are set as website colors are available in the list.
Remove color

Blue color selected on border. Click on the cross to the right to remove the color.

  • Thickness - Set the thickness of the border. Click the plus button to increase thickness or the minus button to reduce the thickness. You can choose between the PX or EM units. Click the arrow to change unit.
Thickness

Choose between px or em as border thickness unit

If you select Separate borders, you can select the border that you want to add by ticking one or more check boxes. You can then set the type, colour and thickness.

Separate borders

Example when Separate borders is selected

To set an additional border, such as Border top, tick the box.

To remove borders, select the "No borders" option.

Style (CSS)

If the settings in the interface are not sufficient, it is possible to set up custom CSS classes on the website. You can then designate CSS class names to the module or layout to affect the appearance or function of the module. You can also enter custom style folders in the Custom style field.

Style CSS

The linked class names must be defined on the website, and the option is only displayed if these are present and available. To mark up a module with a CSS class name, click Select. A dialogue opens with the CSS class name that is stored on the website.

To disable the custom style on the module, click the X next to the CSS class name, and it will be removed.

The Appearance panel can be found on the items:

  • Properties for a module
  • Properties for layout
  • Properties for grid/grid row/column
  • Properties for Layout with view
  • Properties for view

The page published: 2019-02-17

Find us!

SiteVision AB (Headquarter)
Vasagatan 10
702 10 Orebro
Sweden


Info: +46 19-17 30 30
Support: +46 19-17 30 39