Silex CSS editor #184

Open
singchan opened this Issue Aug 26, 2014 · 2 comments

Projects

None yet

2 participants

@singchan
Contributor
singchan commented Aug 26, 2014 edited

Silex CSS editor

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 the topics Silex and HTML, and Javascript in Silex.

How to?

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

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
    • background = the main container which is by default in a new website
    • editable-style = the elements which you have added in your website (images, texts, containers, html boxes)
    • container-element = containers
    • text-element = text fields
    • image-element = images
    • html-element = html boxes
  • 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 this 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.

edit CSS classes of an element

CSS effects

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

Widgets to apply effects in your website

@lexoyo
Member
lexoyo commented Oct 9, 2014

And the events by the pageable plugin

  • pageChanged
@lexoyo lexoyo added doc question and removed question labels Dec 29, 2014
@lexoyo
Member
lexoyo commented Jan 9, 2015

This page needs an examples for each class available in Silex

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment