Skip to content

Silex CSS editor

Jump to bottom
Alex Hoyau edited this page Jul 11, 2021 · 41 revisions

Silex CSS editor

What for?

The CSS editor in Silex free website builder is useful when you want to add CSS rules to your website:

  • to add interactivity, i.e. change the style of an element on mouse over, when a link has been visited already, when a given page is opened, etc...
  • give several elements the same style
  • use advanced styles not available in Silex with a click of the mouse

It is the complementary to the HTML and Javascript languages, which are also available in Silex. See Silex and HTML and Silex and Javascript pages.

How to?

Open the editor with the view menu, CSS style editor item.

There you can add standard CSS rules. Feel free to get started with CSS here.

Silex CSS classes

When you add a CSS rule to your website in the CSS editor, it is applied to the whole website, not just an element - e.g. this changes the border of all the elements of your website:

div{
    border: 1px solid black;
}

You also can target specific elements with the CSS classes which are applied by Silex:

  • elements
    • editable-style= all the elements (images, texts, containers, html boxes)
    • section-element= sections
    • container-element = containers
    • text-element= text fields
    • image-element= images
    • html-element= HTML boxes
  • components
    • silex-component = all the components
    • silex-component-skill-bars = skill bar components
    • silex-component-form = form components
    • silex-component-map = map components
    • silex-component-share = share bar components
    • silex-component-slideshow = slideshows
  • pages
    • paged-element= elements which are visible only in some pages, not everywhere in the website
    • paged-element-hidden= elements which are hidden in the current page
    • paged-element-visible= elements which are visible in the current page
    • page-link-active = links which open the current page when clicked
    • page-[page name]= elements wich are visible on the page [page name]
  • editor vs website
    • silex-selected= selected elements - in the editor only, not in the produced website
    • silex-runtime= applied to the body only outside Silex editor (when the site is live)
    • silex-editor= applied to the body only while editing in Silex editor
  • text styles
    • title
    • heading1
    • heading2
    • heading3
    • normal
  • behavior modifiers
    • prevent-scale to prevent the element from scaling, which otherwise happens outside the editor when the browser window is smaller than the website
    • fixed to make an element stay in place when the user scrolls (only outside the editor in preview or published website), this is the "position: fixed" css style and the css style will not work in Silex as the website may be scaled and this breaks the css fixed elements
    • hide-on-mobile and hide-on-desktop are used to show or hide an element on desktop / mobile, this is what is used when you change the visibility in the element properties
    • silex-use-height-not-minheight can be used to force Silex to use height instead of minHeight to set the height of an element, this is useful if the element has content with height set to 100%
    • prevent-resizable to prevent the resize UI in the editor
    • prevent-draggable to make the element "not draggable" in the editor
    • prevent-droppable to prevent a container to receive new elements in it
    • prevent-mobile-style to prevent mobile styles to apply to the element (you will be able to apply the styles like in desktop mode)
    • prevent-auto-z-index to let the components handle their z-index
  • context: Silex adds these CSS classes to the body depending on the context, read this doc for mode details
    • silex-editor: in the editor
    • silex-runtime: outside the editor (preview and published)
    • silex-published: added in the published version

This is an example of what can be added in the CSS editor to change the font of all titles in your website

.title,
.heading1,
.heading2,
.heading3 {
    font-family: "calibri", Garamond, 'Comic Sans';
}

To discuss these classes and know more about how to use them, see https://github.com/silexlabs/Silex/issues/129 discussion about styles in Silex.

Custom CSS classes

The CSS rules may select an element, e.g. this changes the background color of the elements with class name my-css-class:

.my-css-class{
    background-color: blue;
}

To apply this style to an element, you will want to add the class name my-css-class to it. To do so, enter Silex advanced "Apollo" mode with Tools > Apollo mode.

Then select an element. In the properties you will see a text filed named "CSS classes" (the single line text input). Add a class name there, for example my-css-class.

HTML attributes

When you need to add HTML attributes to the selected element(s), you can write them to this field

HTML attributes HTML attributes

For example it can be useful to set an HTML ID (for anchors or else), Aria accessibility attributes, ...

CSS effects

Several useful links which discuss styles, effects and CSS techniques in Silex:

Widgets to apply effects in your website:

This is the documentation for Silex website builder. It is a collaborative effort, click edit and start contributing. Also have a look at these discussions.

WARNING: Support for Silex v2 has stopped. Try Silex v3 alpha, Read about it, Subscribe to the newsletter

Clone this wiki locally