Create the Stylesheet

Your stylesheet files live in the css directory for your element. You need to create a file named element.css.

Editor vs. Published Stylesheets

​Your element is displayed in the editor using an element placeholder. By default, this is the same as your element on a published site, and so uses the same stylesheet. However, you can also provide an editor_element.css file to be used only within the editor. This allows you to specify different styles when editing or configuring your element within the editor. This may be necessary when your element requires interactivity with the user on a published site, as the element placeholder in the editor cannot be interactive.

Style Your Element to Work with Themes

How Weebly websites look - their colors, styles, layout - are determined by themes. Web site owners can change themes to change the look and feel of their website. Apps that you create need to look as though they belong on the site, regardless of the theme that the owner chooses.

For example, here’s the Price Chart using one theme:

Price Chart on a site using Theme A

And here it is displayed using a different theme:

Price Chart on a site using Theme B

Weebly themes use LESS and CSS to style the web page, both when in the editor and on the published site. For the most part, you should allow the theme to style your element rather than providing styles in the css file. Only style components that must appear the same in every site, no matter the theme.

Here are classes used by the Weebly LESS and CSS styles that you may want to use to style your element appropriately for a given theme. Don’t ever override these classes:

  • .wsite-form-input: All input element used in forms. These include text input as well as radios and checkboxes.
  • .form-select: All select components in forms.
  • Buttons: Use .wsite-button and .wsite-button-inner These classes can be used on either link or button components.

LESS CSS

Before rendering your CSS to the page, it is run through the LESS CSS preprocessor, so you can use LESS CSS in your element.css and editor_element.css files. Your CSS is wrapped in a scoped selector, meaning the CSS affects the styling of only the contents within your elements.

Access Settings

You access your element as a class. All of your settings are available as LESS variables in your CSS files. Simply access them as you would expect to in standard LESS fashion.

.price-chart {
    @border: 1px solid @borderColor;
    width: 100%;
    background-color: @backgroundColor;
    border: @border;
    border-spacing: 0;

Access Additional Data

You can access the path to your element’s assets, similar to the way you access settings, using the assets_path variable. This is the HTTP accessible root path to your elements’ assets folder, in protocol-agnostic form. It is accessible as a property of your Element object:

.example {
    background-image: url("@{assets_path}file.png");
}

Help make these docs better!









Tags:
elements