Create the Stylesheet
Your stylesheet files live in the
css directory for your element.
You need to create a file named
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:
And here it is displayed using a different theme:
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-innerThese classes can be used on either link or button components.
Before rendering your CSS to the page, it is run through the LESS CSS preprocessor, so you can use LESS CSS in your
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.
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.
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: