Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Theme Options Capability?

CansiliCansili New
edited February 2016 in Vanilla 2.0 - 2.8

Is it possible for a Vanilla theme to have different options, i.e.:

  1. Color Styles (I have already seen this on some free themes) but using dropdowns.
  2. Use checkboxes to enable/disable some features in the theme, i.e. sticky header, collapsible category heading, etc.
  3. Use input text field to add some data to the theme.


  • Options
    R_JR_J Ex-Fanboy Munich Admin

    You can add text boxes in the theme options but no other controls. You can do it like that:

    <?php defined('APPLICATION') or die;
    $ThemeInfo['YourTheme'] = array(
        'Name' => 'Your Theme',
        'Description' => 'Theme options example',
        'Version' => '0.1',
        'Author' => 'You!',
        'RequiredApplications' => array('Vanilla' => '>=2.2'),
        'Options' => array(
            'Description' => 'You can give additional descriptions here.',
            'Styles' => array(
                'Standard' => array(
                    'Basename' => '%s',
                    'Description' => 'Standard theme.'
                'AmazingAlternative' => array(
                    'Basename' => '%s_amazing',
                    'Description' => 'Amazing Alternative: this will look in folder yourtheme/design for a file called custom_amazing.css.'
            'Text' => array(
                'Data' => array(
                    'Default' => '',
                    'Description' => 'Go on and put a lot of text here!',
                    'Type' => 'TextArea' // default
                'PrimaryColor' => array(
                    'Description' => 'Enter a valid css color code',
                    'Type' => 'TextBox'
                'SecondaryColor' => array(
                    'Description' => 'another color please...'

    Later on, you can access that values with echo c('ThemeOption.SecondaryColor', 'default value');

    There is a problem though that saved values are not shown in the theme options any more, but the next version of Vanilla should include a fix for that.

  • Options

    Thanks a lot for your answer @R_J :)

    Is it also possible to put the values in CSS?

    And how to make a conditional out of these values?

  • Options
    phreakphreak Vanilla*APP (White Label) & Vanilla*Skins Shop MVP
    edited February 2016

    @Cansili: Vanilla adds a specific ID to every page body tag. Based on that you can give every inherited class a different appearance. That's not exactly an answer to your question but may also solve your problem.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • Options
    R_JR_J Ex-Fanboy Munich Admin
    edited February 2016

    Rethink your question: CSS doesn't allow variables by itself ;)

    I can think of 2 or 3 ways to use them.

    You can add the css inline

    If you just want to style a few elements, using inline css based on the theme settings would be the easiest and probably best way.

    You can create a css file in your plugins design folder

    After the theme has saved, you would create a file in your themes design folder. Theoretically, but I wouldn't recommend that. If your board is set up with correct permissions, you do not have write permissions in the plugin folder.

    Create a css file in the /cache folder

    Basically the same idea as the one before. I would do it like that:
    1. Hook base_render_before in the themehooks file
    2. Check if /cache/mycssfile.css exists
    3. If not, create a less/sass file with the variables
    4. Start the css file compiling process and output the file to /cache/mycssfile
    5. Add my css file from cache

    The only problem that I see is that you have to invalidate your cached css file or immediately overwrite it, after the theme options have changed. I've only taken a quick look but I saw no event that is fired after theme options has been saved.*
    But if you have only a few options, you would be able to reference your file as "filename_valuefoption1_valueofoption2.css" and as such you would always load the correct file...

    Concerning your conditional question question:

    if (c('ThemeOption.NavBarFixed', 'no') == 'no') {
        $class = '';
    } else {
        $class ='fixed';
    echo '<nav class="'.$class.'"...';

    I guess your next question will be how to use that in the template ;)

    The template is using Smarty and I guess you can insert text like that: {text code="NavBarFixed" default='no'} but I have no clue how to use that in a conditional. Sorry, I have nearly no experience with Smarty...

    * = I guess I will make a pull request for that, but it might take some time before that event will make its way into the official Vanilla release

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    As a second thought you might better use your own subdirectory in /cache because troubleshooting errors in Vanilla often includes deleting the ini files in /cache and someone might confuse that with deleting all files in /cache...

  • Options
    CansiliCansili New
    edited February 2016

    @R_J said:
    Rethink your question: CSS doesn't allow variables by itself ;)

    I was expecting the Theme Options to be like XenForo (called it Style Properties) where you can have checkboxes, text, styles, etc. and you can use the variables in both CSS and template files. But I just found out it can't be done after reading

    The design of my theme is that it has 4 categories layout and at least 3 discussion layout and I want users to choose either of them. Since this can't be done via Theme Options, is it possible to modify the Homepage (index.php?p=/dashboard/settings/homepage) in the Dashboard via theme hooks? I want to do this so that I can insert the additional layout that my theme has and change the strings "Modern Layout, Table Layout, Mixed Layout" and if possible the screenshots too.

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    Theme options are not that sophisticated in Vanilla. It would surely be possible to create a solution but that would involve writing code. You could start by looking at the CSSEdit plugin. It already solves the "problem" of using variables in CSS by making use of less. Adding another paragraph which shows some textboxes/checkboxes would be quite easy.

    But the theme manager and the theme options doesn't include any events that you can hook into. So you would have to all your changes at another place. I would try to add a link to the description. That link could point to an extra settings screen.

Sign In or Register to comment.