How to use "Style Settings" when you create a Style

So, for sometime now. I wanted to make a theme where almost everything customizable. But I don't really know how to use the Style Settings. If anyone could tell me or link me to a tutorial that would be awesome. Oh, and I have read this , and it doesn't really help me.


  • edited March 2016 Firefox
    Yea had the same issue, never found a guide iirc, got a few tips from others here. It all revolves around 'install keys' which are just placeholders using /*[[____]]*/ in the main 'CSS' window (and can be named anything you want)

    Drop-Down Setting and Image Setting are multiple choice & only their first (primary) install keys are relevant, the others are just to keep track of what users install. Add the primary install key to the 'CSS' window where you want the snippet of code to go in the style order (any amount/section of code can go in the boxes, can divide the whole style into them or just target single rule) eg

    /*browser specific*/ /*[[firefox-chrome]]*/
    Name: Are you using Firefox or Chrome? > Install Key: firefox-chrome

    Name: Firefox > Install key: Firefox
    code here

    Name: Chrome > Install key: Chrome
    code here
    and whichever box has the 'default' radio button selected will be whats shown as the pre-selected choice even if not first

    Color Setting: this' to replace a single color value with users preference, eg if you decided to default a background red, but wanto give the option to change it, would add

    background-color: /*[[bgC]]*/ ; -or- background: /*[[bgC]]*/ ;
    Name: Background color > Install key: bgC > Default: #FF0000

    Text Setting: same format as Color Setting simply whatever text users add there shows up in the style verbatim, so needs to be short and simple, like content text labels, and you also need to input placeholder text there, a couple dots is enough, eg

    content: "/*[[your-contenthere]]*/" ;
    Name: Add your sig > Install key: your-contenthere > Default ...
    so good idea to qualify it so users can opt out by having a drop-down asking to confirm they want add custom content

    Image Settings: a little confusing, instead of the boxes of the drop-down settings (where anything can be put) image settings only accepts image urls as the content (cause it adds a preview function for each image) , and all choices are laid out on the style page with radio buttons (example) and make sure to format the 'CSS' install key between the (" ") like

    background: url("/*[[fast-cars]]*/") ;
    Name: Choose background > Install key: fast-cars

    Name: lambo > Install key: lambo
    h ttp://w

    Name: porsche > Install key: porshce
    h ttp://w
  • Sweet! Thanks! :D
Sign In or Register to comment.