Adding a CSS Stylesheet with pre-typed selectors?

[Former Member]

If I want to add a 'stylesheet with pre-typed selectors' to a plugin that I am building, how do I do that, please?

Explanation:
The plugin will have a tab containing the 'CSS stylesheet' for the plugins elements.
The style sheet will have all of the plugins element's selectors pre-typed.

Ex.

#top_table (
)
#middle_table {
}
#picture_cell {
}

This way the person using this plugin just needs to fill in the declaration block with the properties and values.

How is this done?

[Former Member]

Hold up! I just need to go User Interface/Add Tab/Code Box/CSS to create a CSS box,
Then switch from 'Build Plugin' to 'Manage Plugin' and add the selectors.
And when I export my plugin, that css will remain there.

^Is this all correct?

[Wormopolis]

it will stay there, but you will need to leave the plugin as editable in order for the users to make changes to it

[Pebble]

Why not just have the CSS classes in the instructions? Many people will want different CSS for each theme so just adding it to the instructions will enable them to do that. ( I decided a long time ago not to add CSS to plugins , unless needed, as everyone wants something a bit different )

[Chris]

Another alternative is to add the CSS rules to a global header component added to the plugin then add variables so the values reflect whatever the user has chosen in settings (just like a layout template), for example the following in the header component of the plugin would be automatically filled out with the values the user has chosen for those variables

<style type="text/css">
#top_table {
background-color: $[plugin.settings.top_table_background];
width: $[plugin.settings.top_table_width];
}
#middle_table {
background-color: $[plugin.settings.middle_table_background];
width: $[plugin.settings.middle_table_width];
}
#picture_cell {
vertical-align: bottom;
background-color: $[plugin.settings.picture_cell_background];
width: $[plugin.settings.picture_cell_width];
}
</style>

SPOILER: Click to show

Variables:

• top_table_background
• top_table_width
• middle_table_background
• middle_table_width
• picture_cell_background
• picture_cell_width

would all be names of variables you have created in the plugin so the user can fill in a value. Of course it can be any number of names (whatever you want to call it) or any CSS not just background-color or width. The good thing with CSS is if the user enters something nonsensical for that value it will simply ignore it and skip to the next CSS property:value pair.

Edit:

---

You could even use a {foreach} loop on an autoform if you wish to have the user specify both cssproperty (e.g. "background-color") and cssvalue (e.g. "#f00baa"):

<style type="text/css">
#top_table {
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.top_table_css]}
$[plugin.settings.top_table_css.property]:$[plugin.settings.top_table_css.value];
{/foreach}
}
#middle_table {
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.middle_table_css]}
$[plugin.settings.middle_table_css.property]:$[plugin.settings.middle_table_css.value];
{/foreach}
}
#picture_cell {
vertical-align: bottom;
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.picture_cell_css]}
$[plugin.settings.picture_cell_css.property]:$[plugin.settings.picture_cell_css.value];
{/foreach}}


Where

• top_table_css
• middle_table_css
• picture_cell_css

would all be an autoform each with a "property" and a "value" field so the user could add to their heart's content, all from within the confines of the plugin. If they set a new value for one of the defaultsVals then according to the rules of CSS the last value wins, so if a background of red is set as defaultVal1 and they add a new background and set it to blue then blue wins.

[Former Member]

Sept 20, 2014 10:19:33 GMT -8 Wormopolis said:

it will stay there, but you will need to leave the plugin as editable in order for the users to make changes to it

Cool deal, that was the step I was missing. Thanks.

Sept 20, 2014 11:11:39 GMT -8 Pebble said:

Why not just have the CSS classes in the instructions? Many people will want different CSS for each theme so just adding it to the instructions will enable them to do that. ( I decided a long time ago not to add CSS to plugins , unless needed, as everyone wants something a bit different )

Hmm, good point. I didn't think of that. Thanks.

Sept 20, 2014 13:30:29 GMT -8 Chris said:

Another alternative is to add the CSS rules to a global header component added to the plugin then add variables so the values reflect whatever the user has chosen in settings (just like a layout template), for example the following in the header component of the plugin would be automatically filled out with the values the user has chosen for those variables

<style type="text/css">
#top_table {
background-color: $[plugin.settings.top_table_background];
width: $[plugin.settings.top_table_width];
}
#middle_table {
background-color: $[plugin.settings.middle_table_background];
width: $[plugin.settings.middle_table_width];
}
#picture_cell {
vertical-align: bottom;
background-color: $[plugin.settings.picture_cell_background];
width: $[plugin.settings.picture_cell_width];
}
</style>

SPOILER: Click to show

Variables:

• top_table_background
• top_table_width
• middle_table_background
• middle_table_width
• picture_cell_background
• picture_cell_width

would all be names of variables you have created in the plugin so the user can fill in a value. Of course it can be any number of names (whatever you want to call it) or any CSS not just background-color or width. The good thing with CSS is if the user enters something nonsensical for that value it will simply ignore it and skip to the next CSS property:value pair.

Edit:

---

You could even use a {foreach} loop on an autoform if you wish to have the user specify both cssproperty (e.g. "background-color") and cssvalue (e.g. "#f00baa"):

<style type="text/css">
#top_table {
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.top_table_css]}
$[plugin.settings.top_table_css.property]:$[plugin.settings.top_table_css.value];
{/foreach}
}
#middle_table {
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.middle_table_css]}
$[plugin.settings.middle_table_css.property]:$[plugin.settings.middle_table_css.value];
{/foreach}
}
#picture_cell {
vertical-align: bottom;
defaultProp1:defaultVal1;
defaultProp2:defaultVal2;
defaultPropN:defaultValN;
{foreach $[plugin.settings.picture_cell_css]}
$[plugin.settings.picture_cell_css.property]:$[plugin.settings.picture_cell_css.value];
{/foreach}}


Where

• top_table_css
• middle_table_css
• picture_cell_css

would all be an autoform each with a "property" and a "value" field so the user could add to their heart's content, all from within the confines of the plugin. If they set a new value for one of the defaultsVals then according to the rules of CSS the last value wins, so if a background of red is set as defaultVal1 and they add a new background and set it to blue then blue wins.

Lol, I'm gonna need a minute to sink this all in. Thanks Eton.