CSS Option Types

If you need set static CSS just add to your style.css. The power of CSS option type is combine with other options to generate dynamic CSS. If you just want to prevent user edit any fields you can use CSS to hide that fields.

Just to clarify, I am using a colour picker to change a feature colour on the site.
I think by saying default value I may have given the wrong impression.
What I mean was pre-populate the CSS option type with something like:

#header, #footer{
{{colour_picker}}
}

Then hide it so that CSS can’t be edited by an end user.
It’s a nice feature to have the CSS option type accept IDs, but for the general public adding CSS is too complex. Let alone introducing uncommon CSS syntax and trying to find the IDs of other option types. I would rather set it all up then have them only worry about using colour pickers.
I can achieve what I want by using ot_get_option and adding styles in the page header, but this bypasses dynamic.css altogether and in my opinion is pretty messy.

Version 2.0.12 added IDs (base on your field id) to wrapper tag of fields so you can easy to hide specific field. In case if you are using old version of OT and made some changes in OT source (so you can’t update to new version of OT) you can use jQuery to hide fields.

Thanks for the suggestions, but it didn’t work out in my case. I ended up creating a function to output the options to a new css file.
I would just like to add that the IDs are handy for styling elements but not for hiding them. The wrapper and label are left in place and only the element is hidden.

Maybe you did not get my idea. Following example is my idea:
– create a CSS option type with ID “my_dynamic_css“
– create a ColorPicker option type with ID “my_color“
– in option page, set “my_dynamic_css”‘s value: a {color:{{my_color}};}
– save changes
From now, when you (or your user) change ColorPicker (with ID: my_color) OT will re-generate dynamic.css file with new color.

But you still worry about CSS option type (with ID: my_dynamic_color) that your user can make mistake when modify theme settings (ex: delete “a {color:{{my_color}};}” line) ? OK, do following:
– Open ot-admin.css (in [OT folder]/assets/css/), append this: #setting_my_dynamic_css {display:none;}
– Boom! general users will not see and can not make mistake with your CSS field.

Is it clear ?

p/s: Above idea will work with OT version 2.0.10+. If you use OT version 2.0.9 or older you must make a small patch to give fields wrapper an ID (in this case you can ask me if you have trouble)