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.
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.
To control radius of all corners of the selected element, use Radius slider in Corners section.
0px: no radius
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
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.
To control color, text color or background color of the selected element in Edjet, the Color picker is used.
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.
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.
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.
In order to achieve realistic, semi-transparent shadow effect, we recommend to use following parameters:
You can experiment with values until you are satisfied with the result.