Author Topic: Theme picker at top (Read 58991 times)

Miraenda · « **on:** April 27, 2005, 08:14:06 PM »

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:

Code: [Select]

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:

Code: [Select]

theme_name();right after:

Code: [Select]

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:

Code: [Select]

<?
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:

Code: [Select]

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:

Code: [Select]

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 · « **Reply #1 on:** April 27, 2005, 08:31:30 PM »

very useful

dtm.exe · « **Reply #2 on:** April 27, 2005, 08:44:58 PM »

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

-Dan The Man

Kirby · « **Reply #3 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:

Code: [Select]


// 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:

Code: [Select]

	// 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 · « **Reply #4 on:** April 28, 2005, 11:19:54 PM »

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

Kirby · « **Reply #5 on:** April 28, 2005, 11:22:19 PM »

Yeah I know, I just did changes more on the code side

I like the idea behind this "trick"..

Miraenda · « **Reply #6 on:** April 28, 2005, 11:29:17 PM »

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

Neol · « **Reply #7 on:** May 01, 2005, 10:19:42 AM »

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:
Code: [Select]
// 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:
Code: [Select]
// 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 && 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 · « **Reply #8 on:** May 01, 2005, 12:37:35 PM »

It should choose automatically, try...

adding this before ?>

Code: [Select]

// 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:

Code: [Select]

	$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 · « **Reply #9 on:** May 05, 2005, 10:35:00 PM »

God bless 1337 coders

mank · « **Reply #10 on:** June 01, 2005, 11:42:40 AM »

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

Ohms · « **Reply #11 on:** June 19, 2005, 12:30:44 AM »

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:

Code: [Select]

global $boarddir;
require ''.$boarddir.'/Themes/themechanger.php';

to

Code: [Select]

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 · « **Reply #12 on:** June 19, 2005, 05:15:40 AM »

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 · « **Reply #13 on:** June 19, 2005, 06:19:19 AM »

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 · « **Reply #14 on:** June 19, 2005, 06:53:07 AM »

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

Code: [Select]

					<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 · « **Reply #15 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" />".

nokonium · « **Reply #16 on:** June 19, 2005, 07:49:29 AM »

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 · « **Reply #17 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?

nokonium · « **Reply #18 on:** June 19, 2005, 08:01:29 AM »

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 · « **Reply #19 on:** June 19, 2005, 12:31:12 PM »

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:

Code: [Select]

]// 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>";
}
}

News:

Author Topic: Theme picker at top (Read 58991 times)

rolandog

bloc

bloc

bloc