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 ?
Why not use variants for that (colors, fonts, etc)
Would give better user experience, right ? Most paid scripts has this feature. Then why not ElkArte users ? ;)
Then I look forward to what you come up with :D
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
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.
Also, how do add / define a new template in ElkArte ?
Is this better code to use in template_colour_picker () ?
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;
}
Ok, I should be embedding the colour picker html somewhere in the Current Theme > Theme Options section in ACP. Where should I add
<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 ?
Ok, if I am not wrong, it is somewhere in this part of ManageThemes.template.php
* 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>';
}
I would like to have the colour picker here
(http://www.elkarte.net/community/index.php?action=dlattach;topic=3000.0;attach=2943;image)
Ok, finally nailed it.
// 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>';
}
But the html loads before the style sheet and hence giving 0x0 for picker. This is how we have now
(http://www.elkarte.net/community/index.php?action=dlattach;topic=3000.0;attach=2945;image)
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.
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.
The issue I am facing is that ng-picky.css and .js is not coming to action even though they are included in index.template.php and Admin.template.php
If anybody want to check, here is the work so far.
PS : Install as theme.
This is how it should have come
(https://camo.githubusercontent.com/a5b4ed0867620be236bfbdc2d47a369b04846e62/687474703a2f2f692e696d6775722e636f6d2f555465527667332e706e67)
and what we have due to lack of js and css being called is
(http://www.elkarte.net/community/index.php?action=dlattach;topic=3000.0;attach=2948;image)
The funnier part is that both .js and css files are loaded but not called by HTML
Could it be an Angular problem ? Loaded but not called.
So far..
It is an angular issue. Working on it.
It was permission issue on XAMPP. Solved CSS calling issue, I guess
(http://www.elkarte.net/community/index.php?action=dlattach;topic=3000.0;attach=2956;image)
Fixed the colour palette. Was angularjs controller naming issue.
Colour picker is crashing. What to do ?
Use the edit-function?
Sorry, can't withstand. :-[
To be honest I find your way to ask for support kind of irritating. So much posts with so less information for others in such a short time, plus using the mentions system to bother two users directly, is something I would try to avoid if I want to be helped with a problem of mine.
Better try to solve your problems on your own first, and when you really don't know how to make progress any more, then ask for help one step at a time. Please use the edit function to edit your previous posts if you have new informations. But please stop writing so much posts in such a short time! It leads to threads nobody wants to read anymore because they are so chaotic and with no useful information.
Depends what you mean with "crashing".
Just by that I'd say it's a js issue somewhere, but more than that it's very difficult. Are you sure you used all the correct names and stuff for angular? (From time to time it's tricky because a typo in the html can lead to an undetected error in javascript...)
What for ? Let me guess
1. Personal gain
2. Not sharing experience, bottle necks with other users who may copy and compete with my themes / framework
3. Making money ( never been my first choice in life. I am a lecturer by profession. I earn enough to make a decent living )
4. Take support for free and sell closed sourced, proprietary licensed software
Yes, I see a lot of reasons.
Worry for yourselves. Posting on ElkArte forum does not compel the great Jorin to read anything. I didn't slept 2 nights to make an open source theme which I never compelled anyone to test or use. You jump into the thread and say " I won't use your theme ".
I ask fast, because I solve old problems fast myself.
Hm, I don't understand what these four points have to do with my little hint. You may not know but I owned a support forum for eight years. I think I know a a thing or two about how to work together in a support board and how informative posts should be. But I am not here to lecture you in any way. Sorry if this is what you felt.
Jorin the Great! Wow, thanks! :D
Edit: Oh, no need to discuss this any more from my side, it's too off topic. I'll keep quiet from now on on this matter. :-X
I guess I was making mistake on app.js
var myApp = angular.module('myApp',[ngPicky]);
myApp.controller('ngPicky', ['$scope', function($scope) {
// defaults
$scope.hue = 0;
$scope.color = Color.create(255, 255, 255);
$scope.selectColor = function(color) {
$scope.color = color;
$scope.pick({
$color: color
});
};
}],
It shows colour picker when I use this in app.js
angular.module('myApp', ['ngPicky'])
.controller('ngPicky', function($scope) {
});
Fixed the colour picker on ACP. Hue working, Hex not working.
Attaching work so far
Is that the same as in http://www.elkarte.net/community/index.php?topic=3004.0 ?
Yes.