Page 1 of 1

Design-Time look - Render HTML in Extension Builder

Posted: Tue Feb 02, 2016 9:55 am
by alexh225
Hi guys,
I have a question related to the point how to ensure consistent look & feel for extensions.
As far I understand the only way to control the visual aspects of the the extension can be done by using "Render HTML" .
This has to contain the preview HTML and ALL CSS styles that should be available in the preview at design-time.
For example:
I have a option property (lets call it btn-type) where the user can select different style of a button - btn-red, btn-orange.
The live preview seems to consider only what is added under "Render HTML"
So my content there looks like:

Code: Select all

<button type="button" class="$btn-type$" id='$ID$' style="width: 100%; height: 100%;">
  $btn-text$   
</button>

<style type="text/css">
.btn-red{
  /* Styles for btn-red */
}
.btn-orange{
  /* Styles for btn-orange */
}
Is this the only way to add design time related styles?

At the same I have the same styles added to the "Between <head> tag", "Between <style> tag", but they seems to be only relevant for runtime.

Best Regards
Alex

Re: Design-Time look - Render HTML in Extension Builder

Posted: Tue Feb 02, 2016 10:28 am
by Pablo
Is this the only way to add design time related styles?
Yes. There is no other way. Extensions run in their own environment, they do not have access to global styles.