Template Style mapping dictionary

[RaymondChameleon]

Hi Team,
wondering if there's a Styling Mapping dictionary for Silex template creation?
Things like this from the existing template:

"editable-style"
"image-element"
"page-home"
"paged-element"
Will be great to have such information available which will convenient ppl creating template for this cool engine.

Chrs
Ray

[lexoyo]

Cool, good idea!
As far as I know, there are the text styles (which you can use in the text editor, they appear in the "style" drop down list)

.title,
.heading1,
.heading2,
.heading3,
.normal {
    /* text styles */
}

And the elements classes

.container-element,
.image-element,
.text-element,
.html-element{
    /* elements by type (container, image, text, html box) */
}
[data-silex-href]
a{
    /* links before and after the site is published */
}
.editable-style{
    /* all editable elements */
}
.paged-element{
    /* elements visible only on some pages */
}
.paged-element-visible{
    /* elements of the current page */
}
.page-link-active{
    /* internal links which lead to the current page */
}

And the "special" classes used by Silex for editing

.loading-image{
    /* the element which appears in Silex editor while an image is loading */
}
.silex-selected{
    /* currently selected elements in Silex editor */
}
.silex-runtime{
    /* css class applied to the body only outside Silex editor (when the site is live) */
}

[RaymondChameleon]

Fantastic Lexa, exactly what I want, You Are the Champion!!

[RaymondChameleon]

I reopen this tix may help others or along the updates it may apply more new tags upcomming.

[lexoyo]

👍

[Stuff31]

Hi,

I would like to add font styles in the text editor.

.heading4,
.heading5,
.heading6,

... etc.

Is that possible?

[singchan]

I do not think so :-/

But what I do is add a class to define what type of text block it is (nav, footer, ...) and I define different styles for each one

.nav .heading1,
.nav .heading2,
.nav .heading3 {
   /* ... */
}
.footer .heading1,
.footer .heading2,
.footer .heading3 {
   /* ... */
}

[Stuff31]

Ok, I did it that way too.
thank you singchan