Theme Options Capability?

Cansili

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.

R_J

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.

Cansili

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?

phreak

@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.

R_J

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

R_J

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...

Cansili

@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 http://docs.vanillaforums.com/theming/themeoptions/

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.

R_J

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.