_template

Current box CSS:

background color: %%form_data{background}%%
box height: %%form_data{box-height}%%
font color: %%form_data{color}%%
font-size: %%form_data{size}%%
font weight: %%form_data{weight}%%
font style: %%form_data{style}%%

It's possible to change the CSS on a specific page from values set in the dataform on that page. This is because dataform values can be passed into a CSS module. There are limited use-cases for this but it is useful if, for example, you have a box which you want the user to be able to change the font size, weight, background etc of. A live version of this is at http://www.greentree.co for the green box at the top of the screen where the end user asked to be able to change the font color and size.

With this method it is not possible to change the site-wide CSS which is a good thing!


Syntax

To view the syntax for this please view the page source on the live template page here.

CSS

The Vineyard CSS is here.

====

[[form]]
fields:
  background:
    label: Change background color to
    type: text
    width: 75
    hint: Use colorname or hex value
  box-height:
    label: Change the height of the box to
    width: 75
    hint: Use px
  color:
    label: Change font color to
    type: text
    width: 75
    hint: Use colorname or hex value
  size:
    label: Change font size to
    type: text
    width: 50
    hint: Enter a number followed by px or %
  weight:
    label: Change font weight to
    type: select
    values:
      normal: normal
      bold: bold
    default: normal
  style:
    label: Change font style to
    type: select
    values:
      normal: normal
      italic: italic
    default: normal 
[[/form]]

Site Design, Syntax and Examples by Rob Elliott 2008-2016