Skip to main content
Topic: Theme Options Page in ACP (Read 8602 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

Theme Options Page in ACP

How can I create a theme options page in ACP through which I can offer control over various elements like color, font, etc of a theme ? Possible to have control using custom.css ?
Last Edit: October 11, 2015, 08:38:16 pm by Wizard

Re: Theme Options Page in ACP

Reply #1

Why not use variants for that (colors, fonts, etc)

Re: Theme Options Page in ACP

Reply #2

Would give better user experience, right ? Most paid scripts has this feature. Then why not ElkArte users ? ;)

Re: Theme Options Page in ACP

Reply #3

Then I look forward to what you come up with :D

Re: Theme Options Page in ACP

Reply #4

I need some help with index.template.php. I tried adding a colour picker to it ( Angular plugin ). But when I place the code as a function, it loaded individually before everything loads and stays on top. How to embed or make the html colour picker into the home page.

You can see the function as given below

Code: [Select]
function template_colour_picker()

{
echo'
    <div ng-app="myApp" ng-controller="ngPicky">
   
   
     <div class="category_header forum_category" style="background:{{color | toHex}};"></div>
  <picker color="color"></picker>';
}

template_colour_picker();



PS : Just in early alpha of integration. Just learning right now.


Re: Theme Options Page in ACP

Reply #5

Also, how do add / define a new template in ElkArte ?

Re: Theme Options Page in ACP

Reply #6

@Spuds @emanuele

Re: Theme Options Page in ACP

Reply #7

Is this better code to use in template_colour_picker () ?

Code: [Select]
function template_colour_picker() {
    $html = '<div ng-app="myApp" ng-controller="ngPicky">
<div class="category_header forum_category" style="background:{{color | toHex}};"></div><picker color="color"></picker>';
    return $html;
}

Re: Theme Options Page in ACP

Reply #8

Ok, I should be embedding the colour picker html somewhere in the Current  Theme > Theme Options section in ACP. Where should I add

Code: [Select]
<div ng-app="myApp" ng-controller="ngPicky">
<div class="category_header forum_category" style="background:{{color | toHex}};"></div><picker color="color"></picker>';

in Admin.template.php ? Or is it under ManageThemes.template.php ?

Re: Theme Options Page in ACP

Reply #9

Ok, if I am not wrong, it is somewhere in this part of ManageThemes.template.php

Code: [Select]
 * Template to allow to set options.
 */
function template_set_options()
{
global $context, $scripturl, $txt;

echo '
<div id="admincenter">
<h2 class="category_header">', $txt['theme_options_title'], ' - ', $context['theme_settings']['name'], '</h2>
<div class="information">
', $context['theme_options_reset'] ? $txt['themeadmin_reset_options_info'] : $txt['theme_options_defaults'], '
</div>';
echo '
<form id="admin_form_wrapper" action="', $scripturl, '?action=admin;area=theme;th=', $context['theme_settings']['theme_id'], ';sa=reset" method="post" accept-charset="UTF-8">
<input type="hidden" name="who" value="', $context['theme_options_reset'] ? 1 : 0, '" />
<h3 class="category_header">', $context['theme_settings']['name'],'</h3>
<dl class="settings windowbg content', $context['theme_options_reset'] ? ' theme_options' : '', '">';

foreach ($context['options'] as $setting)
{
echo '
<dt>';

// Show the change option box ?
if ($context['theme_options_reset'])
echo '
<select name="', !empty($setting['default']) ? 'default_' : '', 'options_master[', $setting['id'], ']" onchange="this.form.options_', $setting['id'], '.disabled = this.selectedIndex != 1;">
<option value="0" selected="selected">', $txt['themeadmin_reset_options_none'], '</option>
<option value="1">', $txt['themeadmin_reset_options_change'], '</option>
<option value="2">', $txt['themeadmin_reset_options_default'], '</option>
</select>';

// Display checkbox options
if ($setting['type'] == 'checkbox')
{
echo '
<label for="options_', $setting['id'], '">', $setting['label'], '</label>';
if (isset($setting['description']))
echo '
<br /><span class="smalltext">', $setting['description'], '</span>';

echo '
</dt>
<dd>
<input type="hidden" name="' . (!empty($setting['default']) ? 'default_' : '') . 'options[' . $setting['id'] . ']" value="0" />
<input type="checkbox" name="', !empty($setting['default']) ? 'default_' : '', 'options[', $setting['id'], ']" id="options_', $setting['id'], '"', !empty($setting['value']) ? ' checked="checked"' : '', $context['theme_options_reset'] ? ' disabled="disabled"' : '', ' value="1" class="input_check floatleft" />';
}
// How about selection lists, we all love them
elseif ($setting['type'] == 'list')
{
echo '
<label for="options_', $setting['id'], '">', $setting['label'], '</label>';

if (isset($setting['description']))
echo '
<br /><span class="smalltext">', $setting['description'], '</span>';

echo '
</dt>
<dd>
<select class="floatleft" name="', !empty($setting['default']) ? 'default_' : '', 'options[', $setting['id'], ']" id="options_', $setting['id'], '"', $context['theme_options_reset'] ? ' disabled="disabled"' : '', '>';

foreach ($setting['options'] as $value => $label)
echo '
<option value="', $value, '"', $value == $setting['value'] ? ' selected="selected"' : '', '>', $label, '</option>';

echo '
</select>';
}
// a textbox it is then
else
{
echo '
<label for="options_', $setting['id'], '">', $setting['label'], '</label>';

if (isset($setting['description']))
echo '
<br /><span class="smalltext">', $setting['description'], '</span>';

echo '
</dt>
<dd>
<input type="text" name="', !empty($setting['default']) ? 'default_' : '', 'options[', $setting['id'], ']" id="options_', $setting['id'], '" value="', $setting['value'], '"', $setting['type'] == 'number' ? ' size="5"' : '', $context['theme_options_reset'] ? ' disabled="disabled"' : '', ' class="input_text" />';
}

// End of this defintion
echo '
</dd>';
}

// Close the option page up
echo '
</dl>
<input type="submit" name="submit" value="', $txt['save'], '" class="right_submit" />
<input type="hidden" name="', $context['session_var'], '" value="', $context['session_id'], '" />
<input type="hidden" name="', $context['admin-sto_token_var'], '" value="', $context['admin-sto_token'], '" />
</form>
</div>';
}

Re: Theme Options Page in ACP

Reply #10

I would like to have the colour picker here


Re: Theme Options Page in ACP

Reply #11

Ok, finally nailed it.

Code: [Select]
// Do we allow theme variants?
if (!empty($context['theme_variants']))
{
echo '
<h3 class="category_header hdicon cat_img_config">
', $txt['theme_variants'], '
</h3>
<div class="windowbg2 content">
<dl class="settings">
<dt>
<label for="variant">', $txt['theme_variants_default'], '</label>
</dt>
<dd>
<select id="variant" name="options[default_variant]" onchange="changeVariant(this.value)">';

foreach ($context['theme_variants'] as $key => $variant)
echo '
<option value="', $key, '" ', $context['default_variant'] == $key ? 'selected="selected"' : '', '>', $variant['label'], '</option>';

echo '
</select>
</dd>
<dt>
<label for="disable_user_variant">', $txt['theme_variants_user_disable'], '</label>
</dt>
<dd>
<input type="hidden" name="options[disable_user_variant]" value="0" />
<input type="checkbox" name="options[disable_user_variant]" id="disable_user_variant"', !empty($context['theme_settings']['disable_user_variant']) ? ' checked="checked"' : '', ' value="1" class="input_check" />
</dd>
</dl>
<img src="', $context['theme_variants'][$context['default_variant']]['thumbnail'], '" id="variant_preview" alt="" />
</div>';
//colour picker
         echo'
    <div ng-app="myApp" ng-controller="ngPicky">
  
  
     <div class="category_header forum_category" style="background:{{color | toHex}};"></div>
  <picker color="color"></picker>';
}

Re: Theme Options Page in ACP

Reply #12

But the html loads before the style sheet and hence giving 0x0 for picker. This is how we have now




Re: Theme Options Page in ACP

Reply #13

Just a reminder: I'm not sure where are you from, though I'm from Italy and I have a daily job where I'm not allowed to browse the internet (to the stupidity level that in order to find companies to get quotes from I have to use google's cache... *facepalm*). So, do not expect an immediate answer from me at any time, I was used to be around for about 18 hours a day and answer almost immediately, now I have to balance my answers with my job. ;)

The theme options page is not as flexible as it should be (I wanted to make it more flexible and bloated, but Norv stopped me at the time :P), but if I got it right, you should be able to obtain the effect you want using a "$setting['type']" equal to 'list' and populating the drop down with the colors. Then use some javascript magic if you need more stuff.
Bugs creator.
Features destroyer.
Template killer.

Re: Theme Options Page in ACP

Reply #14

I am sorry. I didn't want to nag you. Could you please just tell me how to use html inside php and at the same time it does not gets loaded before style sheet.