pagetop
cloud_upload Upload

Styles

Using styles you can fully customize the look and feel of your course. All styling options for the selected element are listed in The Inspector panel.

[video]

Depending on a selected element you can adjust opacity, corners radius, border and background attributes, text properties, padding shadow and more.

Changing opacity

To control element transparency, use Opacity slider in Transparency section.

100%: element is not transparent at all

99-1%: element is semi-transparent

0%: element is fully transparent and became invisible

Keep in mind: Find and select fully transparent element can be hard, as you have to hover over the element to see the bounding box to select it. We recommend to avoid invisible elements until not necessary.

Changing corner radius

To control radius of all corners of the selected element, use Radius slider in Corners section.

0px: no radius

Creating a circle elements

To create an effect of circle element, for example photo of person or circle button, the element has to be square (same width and height dimensions) and the radius has to be at least ½ of the width or more.

[image] – show rounded photo of person, rounded button

Changing border

To control border of all sides of the selected element, use controls in Border section.

[image] – multiple lements showing all border styles

Keep in mind: Border Style none can be used to keep border width and color, but turn of the border completely for some time.

Border width 0px: no border

Keep in mind: There is a known issue in Firefox. When using dotted or dashed border style together with corner radius, the corners are render as solid.

Changing colors

To control color, text color or background color of the selected element in Edjet, the Color picker is used.

Using color picker

The large color picker is based on the HSL (Hue, Saturation, Lightness) color model.

To make your color more or less vibrant, drag the point horizontally.

To adjust the lightness of the color, drag the point vertically.

To change the color tone (or hue), click-and-drag the colorful slider on right of large picker.

To adjust the alpha, or opacity for the color use the semi-transparent slider below.

You can always see a live preview of the selected color below and also on the element in page.

Entering colors to color picker

HEX mode – use this input if you are having your colors in web-friendly format, example #C54D4D

RGBA mode – use this inputs if you need to enter colors including transparency (Alpha), example R:192, G:178, B: 72, A: 0.4

HSL mode – use this inputs if you have a your colors in this color space

Keep in mind: If you have your colors in other color space, for example CMYK, you have to convert the colors using Photoshop or other tool.

Changing shadow

To control shadow of the selected element, use controls in Shadow section.

To make shadow positioned to the left or right relatively to your element, use slider Offset X.

To make shadow positioned to the top or bottom relatively to your element, use slider Offset Y.

0px Offset X and Y: shadow is behind the element.

To make shadow edges soft, use slider Blur.

0px Blur: shadow has hard edges.

To control shadow color, use Color picker.

Making realistic shadow

In order to achieve realistic, semi-transparent shadow effect, we recommend to use following parameters:

  • Offset X and Y: 3px
  • Blur 18px or more
  • Black color RGBA 0, 0, 0, 0.5 (0.5 is transparency)

You can experiment with values until you are satisfied with the result.

Comments • 0

Sign In to Comment

keyboard_arrow_up Top