Incorporating background switcher code

[Chen Zhen]

I'll give a simple example and leave it up to the one who requested this for editing in their specifics.

Create a link for a stylesheet with an example id value of change_bg within every available theme index template (in head) to the end user.
example:

Code Select Expand


<link rel="stylesheet" type="text/css" id="change_bg" href="', $settings['default_theme_url'],  '/css/custombg1.css" />


Now put the following PHP within ie. a portal block (or edit into an appropriate file if you choose):

Code Select Expand


global $settings;
$css = array(
'style1' => $settings['default_theme_url'] . '/css/custombg1.css',
'style2' => $settings['default_theme_url'] . '/css/custombg2.css',
'style3' => $settings['default_theme_url'] . '/css/custombg3.css'
);
echo '
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cssnav li a").click(function() {
$("#change_bg").attr("href",$(this).attr(\'rel\'));
return false;
});
});
</script>
<ul id="cssnav">
<li><a href="#" rel="', $css['style1'],'">Background 1</a></li>
<li><a href="#" rel="', $css['style2'],'">Background 2</a></li>
<li><a href="#" rel="', $css['style3'],'">Background 3</a></li>
</ul>';


Create the appropriate style sheets with the opted background changes and put them into the default theme's css directory.

Edit -> Oops.. use settings for default theme url.

[samborabora]

Well, they're going to link to # at the end which means 'don't leave the current page' and the onclick is supposed to capture the click event, but it sounds like there's something else wrong.

Exactly, I really did do everything vkot said, I even tried it exactly the same way and it still gives a weird URL for the links, rather than an actual link to switch the theme. Any ideas?

[Chen Zhen]

samborabora,

  Just in case you tried what I posted some corrections had to be made to the initial HTML link as I had a url from the theme I was testing by mistake. It has since been corrected although it is up to you to try that method for yourself.
I did test it whereas it appears to function correctly for me if I understood what was requested.

[samborabora]

Sorry, I missed your reply on page 2, let me try again. So...

{quote}<link rel="stylesheet" type="text/css" id="change_bg" href="', $settings['default_theme_url'],  '/css/custombg1.css" />{/quote}

We're taking this...

Code Select Expand


// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


...and replacing it in my defaultstandard theme's index.template.php or are we adding this line to the index.template.php of the theme I use as default (which, I must stress ISN'T the default theme, but rather a new theme that I use as the default/standard theme for every user and guest).

Code Select Expand


global $settings;
$css = array(
'style1' => $settings['default_theme_url'] . '/css/custombg1.css',
'style2' => $settings['default_theme_url'] . '/css/custombg2.css',
'style3' => $settings['default_theme_url'] . '/css/custombg3.css'
);
echo '
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cssnav li a").click(function() {
$("#change_bg").attr("href",$(this).attr(\'rel\'));
return false;
});
});
</script>
<ul id="cssnav">
<li><a href="#" rel="', $css['style1'],'">Background 1</a></li>
<li><a href="#" rel="', $css['style2'],'">Background 2</a></li>
<li><a href="#" rel="', $css['style3'],'">Background 3</a></li>
</ul>';


I do have SimplePortal installed, but I only use it currently to add a sidebar to the index page of the forum. Would this work if I added it to a SimplePortal block for everypage anyways, or does SimplePortal have to be used on every page for it to function properly. If not, whats the best way of adding this code to the index.template.php files?

[Kindred]

1- it does not matter if you put the scripts in your custom theme directory or the default theme directory -- if the script is called bya them, using SMF variables, and is not found in the custom theme directory, it falls back to the default theme directory

2-Yes, you should probably drop it into the index.template.php for your theme rather than putting it in a portal block.

If yu are getting a "weird" url, then it supports my previous statement indicating that you used something like wordpad or word to edit the code, and thus have crap characters included instead of plain text code.

[Chen Zhen]

samborabora,

  I apologize for the delay in response but other things kept me preoccupied. I failed to use a cookie with my last code which obviously will not opt the css chosen for the session. What I am about to post holds the cookie value for 1 hour, if you want to change that just edit the expires value.

I will use an example for putting css files in your custom theme.
With this example each theme index.css file should be named index1.css, index2.css and index3.css. 

Edit your custom theme's ../index.template.php file and find:

Code Select Expand


// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


replace with:

Code Select Expand


// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" id="change_css" href="', (!empty($_COOKIE['mysitecss']) ? $_COOKIE['mysitecss'] : $settings['theme_url'] . '/css/index1.css'), '?fin20" />';


Now create a PHP portal block and set it to display everywhere.
Use the following code for it:

Code Select Expand


global $settings;
$css = array(
'style1' => $settings['theme_url'] . '/css/index1.css',
'style2' => $settings['theme_url'] . '/css/index2.css',
'style3' => $settings['theme_url'] . '/css/index3.css'
);
echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
function setCookie(key, value) {
var expires = new Date();
expires.setTime(expires.getTime() + (1 * 24 * 60 * 60 * 1000));
document.cookie = key + \'=\' + value + \';expires=\' + expires.toUTCString();
}
$(document).ready(function() {
$("#cssnav li a").click(function() {
$("#change_css").attr("href",$(this).attr(\'rel\'));
setCookie(\'mysitecss\', $(this).attr(\'rel\'));
return false;
});
});
</script>
<ul id="cssnav">
<li><a href="#" rel="', $css['style1'],'">CSS 1</a></li>
<li><a href="#" rel="', $css['style2'],'">CSS 2</a></li>
<li><a href="#" rel="', $css['style3'],'">CSS 3</a></li>
</ul>';


.. tested and works fine for me.

[vkot]

But the links just redirect to

HTTP://WWW.FORUMURL.COM/%C3%A2%E2%82%AC%C2%9D#”

rather than changing the themes, or even attempting to?

Oops! The problem is that in this part of the code there was " instead of " and ' instead of '
I am not sure how this happened (I don't use Word). I corrected my post:

Add somewhere in index.template.php code like this:

Code Select Expand

<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>

Hi there Vkot, your code is great, but it loads the default theme with $settings['default_theme_url'] as opposed to my previously index.template.php which used $settings['theme_url'] for some reason, so instead of loading my forums theme, it loads the unmodified default theme. Is there a $settings[] function that can load a theme number instead?

I like to keep the SMF default theme as my forum's default, and change only CSS (not templates), so that I'll not have problems when installing mods.

@ -Napalm-
Your code seems OK (I haven't tested it), but uses jQuery.
Personally I don't use jQuery on my forum (yet), I don't like the extra hit on Google and the extra 32.6KB. If there is a way that I can do the things I want without it, I certainly prefer it.

[samborabora]

I like to keep the SMF default theme as my forum's default, and change only CSS (not templates), so that I'll not have problems when installing mods.

That's great, but mine is all worked around via a non-default theme, is it simple enough just to switch out the $settings['default_theme_url'] value for one that matches the theme number I'm actually using?

Oops! The problem is that in this part of the code there was " instead of " and ' instead of '
I am not sure how this happened (I don't use Word). I corrected my post:

Wish this worked, but now the code is giving me syntax errors when I put the links into my template, converting it into php didn't work either?

[samborabora]

I think it may be that the ' instead of ' and " instead of " are actually causing syntax errors now. Which is correct?

[Chen Zhen]

vkot,
  jQuery is essentially a cross platform library of shorthand javascript functions and is a lot easier to implement since it saves time regarding development.  Btw - jQuery will be used by default in the upcoming  SMF 2.1 release.
  If you do not like using Google's website to host the file then you have the option of using the actual jQuery site url or downloading the same file from their website and hosting it yourself.

Using the jQuery site url:

Code Select Expand


<script type="text/javascript" src="http//code.jquery.com/jquery-1.11.0.min.js"></script>


.. or like I said you can download the file and host it yourself changing the above url content appropriately.
ref. http://jquery.com/download/

[vkot]

I think it may be that the ' instead of ' and " instead of " are actually causing syntax errors now. Which is correct?

The right characters for single & double quotes are ' & "
Like I said a couple of messages ago, I edited my original post with all the code of the style switcher. Just copy-paste.

[Matthew K.]

ummm.... guys...   WHY would you be using things like

"http://www.path-to-forum.com/back.js"

use this instead
" . $scripturl . 'back.js' ."

(and all scripts should be put in the Theme specific scripts directory, not the root forum directory!)

so, this script should be placed in Themes/YOURTHEME/scripts and you would actually be using
" . $settings['theme_url'] . '/scripts/back.js' . "

And the reason that the original used
$settings['default_theme_url']
is because  - any script not defined in a specific theme is drawn from the default theme...
so, this script should be placed in Themes/default/scripts and you would actually be using
" . $settings['default_theme_url'] . '/scripts/back.js' . "

You wouldn't use $scripturl either. You could use $boarddir, but what Arantor suggested is the best bet.

[Kindred]

lab - you use boarddir if it is looking for a DIRECTORY...   however, javascripts call for a URL...

[Arantor]

In which case you could theoretically use $boardurl but using the correct $settings variable is better.

[Kindred]

yup.. which is what I said as well, isn't it?

[Arantor]

You didn't specify what variable to be using instead of the $boarddir

[Kindred]

 

[Matthew K.]

lab - you use boarddir if it is looking for a DIRECTORY...   however, javascripts call for a URL...

Yeah, you're right. My bad. Although it isn't $scripturl either

[Arantor]

If only someone hadn't already posted the *correct* variable on the previous page.

[Kindred]

yup.. you did.