News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Theme picker at top

Started by Miraenda, April 27, 2005, 08:14:06 PM

Previous topic - Next topic

Miraenda

Hi,

I had a friend who has greater PHP skills than I do to help me add a theme picker to the very top of my forum.  I picked my beta forum as that is the one where I have a bunch of themes on it.  If you'd like to see the theme picker in action, it is at http://miraenda.com/

Now, I asked the friend if it would be okay for me to provide the code to the SMF community before he was going to do it, so this is also with his approval.  Here are the instructions he provided to me:

First, put the following in the Sources/Load.php file:

function theme_name(){
  global $db_prefix,$context,$scripturl;
$resultaa=db_query("
        SELECT * from {$db_prefix}themes WHERE `variable` = 'name' ORDER by `value`", __FILE__, __LINE__);
while($rowaa=mysql_fetch_array($resultaa)){
$theme_rowa=$rowaa['ID_THEME'];
$theme_row_namea=$rowaa['value'];
$context['theme_options']="".$context['theme_options']."<option value=\"$scripturl?theme=$theme_rowa\">$theme_row_namea</option>";
}
}


Then, add in the index.php file:
theme_name();
right after:
loadTheme();

Then, put the theme changer in a global file so you can change it for all your themes in one file, create a file called themechanger.php in the Themes directory. In the themechanger.php file put the following:
<?
global $context;
echo '<center><form name="jumpurl1" onSubmit="return jumpit()">
                <select size="1" name="jumpurl2">
                      '.$context['theme_options'].'
                </select>
                <input type="button" value="Change it!" onClick="jumpit()"></form></center>
                   <script>
                       function jumpit(){
                          window.location=document.jumpurl1.jumpurl2.value
                          return false
                       }
                   </script>';
?>


Now, for all the themes you want to have the theme changer on, you would put the following in the index.template.php file in each of the Theme folders:
global $boarddir;
require ''.$boarddir.'/Themes/themechanger.php';


The best location might be right after the <body>'; tag.

Now, if you want to put the code just directly into the theme file instead of having a global file do this instead:
In the index.template.php file in the themes you wish to have the theme change in put the following:
echo '<center><form name="jumpurl1" onSubmit="return jumpit()">
                <select size="1" name="jumpurl2">
                      '.$context['theme_options'].'
                </select>
                <input type="button" value="Change it!" onClick="jumpit()"></form></center>
                   <script>
                       function jumpit(){
                          window.location=document.jumpurl1.jumpurl2.value
                          return false
                       }
                   </script>';


And that's It!

Let me know if you anyone uses it and/or likes it (or if you have any issues with it working for that matter).

Have a Blessed Day :)

Nyx


dtm.exe

Thanks.  Maybe I'll try that on my website.

-Dan The Man

Kirby

#3
Here is what I'd do

Open index.template.php
Scroll to the end, right before ?> and add:


// This neat function finds and returns info about all of our themes.
function getThemeData()
{
global $db_prefix, $user_info, $scripturl, $settings, $options, $modSettings;

$themes = array();

// Get all of our themes.
$request = db_query("
SELECT value, ID_THEME
FROM {$db_prefix}themes
WHERE variable = 'name'
AND ID_THEME != $settings[theme_id]" . (empty($modSettings['theme_default']) ? '
AND ID_THEME != 1' : '') . "
ORDER BY value", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($request))
{
$themes[] = array(
'id' => $row['ID_THEME'],
'name' => $row['value'],
);
}
return $themes;
}


Then you can just add this to where you want your theme chooser:

// Simplify this..
$themes = getThemeData();

if (!empty($themes))
{
echo '
<form action="', $scripturl ,'" name="themeForm">
<select name="theme" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 ? 0 : 1);">';

foreach($themes as $theme)
echo '
<option value="?theme=', $theme['id'] ,'">' .$theme['name'] . '</option>';

echo '
</select>
</form>';
}


Tested and working with latest 1.1 beta :)

Miraenda

I think mine works with 1.1 Beta 1 as that is what my board runs on anyway as well... :)

Kirby

Yeah I know, I just did changes more on the code side :)
I like the idea behind this "trick"..

Miraenda

Now if we can just get SMF to add something like this to a demo gallery of themes for this site ;)

Neol

Quote from: Kirby on April 28, 2005, 11:12:51 PM
Here is what I'd do

Open index.template.php
Scroll to the end, right before ?> and add:


// This neat function finds and returns info about all of our themes.
function getThemeData()
{
global $db_prefix, $user_info, $scripturl, $settings, $options, $modSettings;

$themes = array();

// Get all of our themes.
$request = db_query("
SELECT value, ID_THEME
FROM {$db_prefix}themes
WHERE variable = 'name'
AND ID_THEME != $settings[theme_id]" . (empty($modSettings['theme_default']) ? '
AND ID_THEME != 1' : '') . "
ORDER BY value", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($request))
{
$themes[] = array(
'id' => $row['ID_THEME'],
'name' => $row['value'],
);
}
return $themes;
}


Then you can just add this to where you want your theme chooser:

// Simplify this..
$themes = getThemeData();

if (!empty($themes))
{
echo '
<form action="', $scripturl ,'" name="themeForm">
<select name="theme" name="jumpto" id="jumpto" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 ? 0 : 1);">';

foreach($themes as $theme)
echo '
<option value="?theme=', $theme['id'] ,'">' .$theme['name'] . '</option>';

echo '
</select>
</form>';
}


Tested and working with latest 1.1 beta :)

Kirby, I used your code but there is a problem. There is a theme chooser, but no button to change after I have choose a theme!

Here is a screenshot.


Kirby

#8
It should choose automatically, try...

adding this before ?>

// This neat function finds and returns info about all of our themes.
function getThemeData()
{
global $db_prefix, $user_info, $scripturl, $settings, $options, $modSettings;

$themes = array();

// Get all of our themes.
$request = db_query("
SELECT value, ID_THEME
FROM {$db_prefix}themes
WHERE variable = 'name'
AND ID_THEME != $settings[theme_id]" . (empty($modSettings['theme_default']) ? '
AND ID_THEME != 1' : '') . "
ORDER BY value", __FILE__, __LINE__);
while ($row = mysql_fetch_assoc($request))
{
$themes[] = array(
'id' => $row['ID_THEME'],
'name' => $row['value'],
);
}
return $themes;
}


and this where you want the select box:

$themes = getThemeData();
// Super duper theme changer slash! :D
if (!empty($themes))
{
echo '
<form action="', $scripturl ,'" name="themeForm">
<select name="theme" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + \'?theme=\' + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 ? 0 : 1);">';

foreach($themes as $theme)
echo '
<option value="', $theme['id'] ,'">' .$theme['name'] . '</option>';

echo '
</select>
<input type="submit" value="Change Themes!" />
</form>';
}


I updated a few things as well.

rolandog


mank

I used Kirbys code on 1.1 beta 2 and it works a treat  ;D

Ohms

This is an excellent hack. I really needed it for my non-techie users to realize there actually were more themes. I did modify one thing, though:
I changed this:global $boarddir;
require ''.$boarddir.'/Themes/themechanger.php';

to
if ($modSettings['theme_allow']){   
    global $boarddir;
    require ''.$boarddir.'/Themes/themechanger.php';
    }


So if I turn off the ability for users to change their theme, the theme chooser is not shown at all.
Thanks a million for this!

nokonium

Quote from: ??? on May 01, 2005, 12:37:35 PM
It should choose automatically, try...

I updated a few things as well.

I've installed it in our 1.1beta2 test site, after the Search & Advanced Search. We have a range of colour variations based on the default theme. To allow anyone using a theme to select a new theme I have copied the indextemplate to each theme directory

It does choose automatically, on the selector on all except the first one in the list. If I use the button, it brings up the Search: in the selected theme. saying "Did you forget to put something to search for?"

If you then click the button, it does the same with the new first on the list. This one is OK when selected via the drop down.



bloc

Probably because the submit button in the theme form interfere with the search form. Did you put the code  inside the <form></form> for the search - or in a new form underneath?

nokonium

I pasted in exactly as above, which includes <form action..........  </form> and I inserted it immediately above // If we're on a certain board, limit it to this board ;).

This is the code of both forms

<form action="', $scripturl, '?action=search2" method="post" style="margin: 0; margin-top: 7px;">
<b>', $txt[182], ': </b><input type="text" name="search" value="" style="width: 175px;" />&nbsp;
<input type="submit" name="submit" value="', $txt[182], '" style="width: 8ex;" />&nbsp;
<a href="', $scripturl, '?action=search;advanced">', $txt['smf298'], '</a>
<input type="hidden" name="advanced" value="0" />';

$themes = getThemeData();
// Super duper theme changer slash! :D
if (!empty($themes))
{
echo '
<form action="', $scripturl ,'" name="themeForm">
<select name="theme" onchange="if (this.selectedIndex > 0 &amp;&amp; this.options[this.selectedIndex].value) window.location.href = smf_scripturl + \'?theme=\' + this.options[this.selectedIndex].value.substr(smf_scripturl.indexOf(\'?\') == -1 ? 0 : 1);">';

foreach($themes as $theme)
echo '
<option value="', $theme['id'] ,'">' .$theme['name'] . '</option>';

echo '
</select>
<input type="submit" value="Change Themes!" />
</form>';
}



bloc

#15
Nokonium, you need to close the first form..add a </form> right after the "input type="hidden" name="advanced" value="0" />".


nokonium

Quote from: Bloc on June 19, 2005, 07:14:10 AM
Nokonium, you need to close the first form..add a </form> right after the "input type="hidden" name="advanced" value="0" />".


Thanks Bloc, that has sorted the search problem.

Unfortunately now they are on different lines. Is it possible to keep them on the same line?

I have saved the other code and may try it later, when I feel braver  ;)



bloc

That code had some error, so don't use it - yet. I will fix it later. :)

I don't think they can be on the same line..since forms are like div's ..maybe if you did a style="position: relative; float: right;" on the second form it might help?

nokonium

Quote from: Bloc on June 19, 2005, 07:53:15 AM
That code had some error, so don't use it - yet. I will fix it later. :)

I don't think they can be on the same line..since forms are like div's ..maybe if you did a style="position: relative; float: right;" on the second form it might help?

Thanks for the warning.

If that doesn't work, I'll see if I can put it underneath the Key stats or inside the User info, I'd like to try and keep it in the header.



Ohms

I forgot to mention that I was using Miraenda's code and that I also changed the code that was supposed to go in Sources/Load.php slightly. I changed it so that the current theme the member is using is the one selected in the dropdown menu:]// Quick theme changer
function theme_name(){
// Added $settings to the global definition
  global $settings,$db_prefix,$context,$scripturl;
$resultaa=db_query("
        SELECT * from {$db_prefix}themes WHERE `variable` = 'name' ORDER by `value`", __FILE__, __LINE__);
while($rowaa=mysql_fetch_array($resultaa)){
$theme_rowa=$rowaa['ID_THEME'];
$theme_row_namea=$rowaa['value'];
// Reset $selected to ""
$selected = "";
// Find the theme the member is currently using and set it to be the one selected in the form
if ($settings['theme_id'] == $theme_rowa){
   $selected = "selected";
   }
$context['theme_options']="".$context['theme_options']."<option value=\"$scripturl?theme=$theme_rowa\" $selected>$theme_row_namea</option>";
}
}


Advertisement: