Silex CSS editor

Alex Hoyau edited this page Feb 7, 2018 · 32 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)
  • text styles
    • title
    • heading1
    • heading2
    • heading3
    • normal

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.

CSS effects

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

Widgets to apply effects in your website:

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.