I've found a fairly simple background switcher code that can be seen in fully working condition here: http://jsfiddle.net/Lse3V/7/
Now, I'm trying to get this into my index.template.php, however, a few things aren't working. namely, the <body> tag is supposed to be modified to <body class="orig"> and this seems to get stripped of the child class when the page is loaded. The switcher doesn't change when it's clicked and all of the js seems broken, yet it worked perfect when I put the code into a plain .html or .php file on my server. What exactly would need to be changed to have this work in SMF? Here is the html code that needs incorporating:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body class="orig">
<a href="javascript:void(0);" id="backgroundswap"></a>
And here is the javascript:
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
$(document).ready(function(){
window.new_bg = ["blue","red","grey","orig","green"];
window.old_bg = ["green","blue","red","grey","orig"];
if($.cookie('backswap')) {
$('body').removeClass().addClass(old_bg[$.cookie('backswap')]);
};
//Switch backgrounds and create the cookie...
$("#backgroundswap").click(function(){
currentClass = $('body').attr("class");
$('body').removeClass().addClass(new_bg[old_bg.indexOf(currentClass)]);
$.cookie('backswap', old_bg.indexOf($('body').attr("class")), { path: '/', expires: 365 });
});
});
//head//
(function(a){var b=a.documentElement,c=navigator.userAgent.toLowerCase().indexOf("msie")!=-1,d=false,e=[],f={},g={},h=a.createElement("script").async===true||"MozAppearance"in a.documentElement.style||window.opera;var i=window.head_conf&&head_conf.head||"head",j=window[i]=window[i]||function(){j.ready.apply(null,arguments)};var k=0,l=1,m=2,n=3;h?j.js=function(){var a=arguments,b=a[a.length-1],c=[];r(b)||(b=null),q(a,function(d,e){d!=b&&(d=p(d),c.push(d),v(d,b&&e==a.length-2?function(){s(c)&&b()}:null))});return j}:j.js=function(){var a=arguments,b=[].slice.call(a,1),c=b[0];if(!d){e.push(function(){j.js.apply(null,a)});return j}c?(q(b,function(a){r(a)||u(p(a))}),v(p(a[0]),r(c)?c:function(){j.js.apply(null,b)})):v(p(a[0]));return j},j.ready=function(a,b){r(a)&&(b=a,a="ALL");var c=g[a];if(c&&c.state==n||a=="ALL"&&s()){b();return j}var d=f[a];d?d.push(b):d=f[a]=[b];return j};function o(a){var b=a.split("/"),c=b[b.length-1],d=c.indexOf("?");return d!=-1?c.substring(0,d):c}function p(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:o(a),url:a};var d=g[b.name];if(d)return d;for(var e in g)if(g[e].url==b.url)return g[e];g[b.name]=b;return b}function q(a,b){if(a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a){a=a||g;for(var b in a)if(a[b].state!=n)return false;return true}function t(a){a.state=k,q(a.onpreload,function(a){a.call()})}function u(a,b){a.state||(a.state=l,a.onpreload=[],w({src:a.url,type:"cache"},function(){t(a)}))}function v(a,b){if(a.state==n&&b)return b();if(a.state==m)return j.ready(a.name,b);if(a.state==l)return a.onpreload.push(function(){v(a,b)});a.state=m,w(a.url,function(){a.state=n,b&&b(),q(f[a.name],function(a){a()}),s()&&q(f.ALL,function(a){a.done||a(),a.done=true})})}function w(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=false,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d(),d.done=true)},b.appendChild(e)}setTimeout(function(){d=true,q(e,function(a){a()})},300),!a.readyState&&a.addEventListener&&(a.readyState="loading",a.addEventListener("DOMContentLoaded",handler=function(){a.removeEventListener("DOMContentLoaded",handler,false),a.readyState="complete"},false))})(document)
And finally, the css:
body.green{background: #3F0 url(background1.jpg) center top fixed repeat}
body.blue{background: #00F url(background2.jpg) center -80px fixed repeat}
body.red{background: #F00 url(background3.jpg) center top fixed repeat}
body.grey,html{background: #666 url(background4.jpg) repeat}
body{min-height:800px}
#backgroundswap{display:block;display:inline-block;zoom:1;width:101px;height:22px;background-image:url(http://i57.tinypic.com/21j2d94.png);background-repeat:no-repeat;margin-bottom:12px;}
body.green #backgroundswap{background-position:center bottom}
body.blue #backgroundswap{background-position:0 -66px}
body.red #backgroundswap{background-position:0 -44px}
body.grey #backgroundswap{background-position:0 -22px}
body.orig{background-position:0 0}
body.orig{
background: #FF0 url(background5.jpg) center top fixed repeat
}
This should be fairly easy, right?
did you get this working if not dont add
<body class="orig">
just leave it as <body>
also with the css
dont add
body.orig{
background: #FF0 url(background5.jpg) center top fixed repeat
}
just overwrite the background in the already existent body tag in index.css
should work
I have incorporated a style switcher in my forum, it changes not only the background but the whole CSS file to another CSS file. It also stores the selection in a cookie so that it will remain.
Check it out at http://forum.kithara.gr , click at the sun and moon icon at the top, and tell me if you want me to try to remember what I did and take out the code for you...
Hi there, thanks so much for your help both of you, sorry about the late reply! I HAVE got it working on the root page of the forum, but it isn't currently working on ANY subpage ie: any forum posts, forums themselves, subforums, JUST the front index of the forum it is working. I didn't even have to modify anything from what I posted, belive it or not, it just seemed to start working when I picked it up again today. Any ideas why this appears to be only working on the front page?
And yes, vkot, I'd LOVE the code, it would be immensely useful for seeing what I should be doing!
I hope this helps:
In index.template.php, replace:
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
with:
echo '
<link rel="stylesheet" type="text/css" title="default" href="', $settings['default_theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="alternate stylesheet" type="text/css" title="alternate" href="...path.to.the.dark.theme.../css/index.css?fin20">';
(replace "...path.to.the.dark.theme..." accordingly)
Add in index.template.php:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/styleswitcher.js?fin20"></script>
(Somewhere inside <head></head>, meaning somewhere in the section after where it says "// Here comes the JavaScript bits!")
Add somewhere in index.template.php code like this:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>
Put your index.css file in the appropriate directory (and also any image files that the CSS may call)
Put the attached styleswitcher.js in Themes/default/scripts/
Edit: This is a great styleswitcher BUT I discovered that it conflicts with PMs' auto-complete recipient and pop-up notification (http://www.simplemachines.org/community/index.php?topic=520369.msg3723843#msg3723843))
Really appreciate the code, looking really good! I think your switcher is going to be way more stable than the one I'm using, not only does mine not work on any page higer than the index, but it fails on my laptop for some reason, can't work out why. Can I just ask one question? Is it possible to incorporate the five style selector that I'm using in conjunction with your switcher code? I can try and hack the two together, but I am not as experienced with js as you guys! I have been trying to hack the code I have into SMF and, as I said, it works on one of my computers on the front page, but is hit and miss on any of the posts or forum page. The switcher code I have simply sets the background position of an image with five images in one to a different position, and everything is stored into a cookie. Can this be put together with your js switcher code? I'd really, really appreciate any help with this!
You can have as many stylesheets as you want.
Add more <link rel="alternate stylesheet" ... and <a href="#" onclick="setActiveStyleSheet(' ... lines, giving each stylesheet a different name. The rest of the code remains the same.
This is excellent, do I have to have the entire theme replicated in each css file? Or can I just place the background image inside the .css files and then have the switcher change only the background image?
Each CSS file of each of your themes has to define all the selectors, like the default theme's CSS file does.
Each CSS file will point to background images, in certain declarations of properties. The styleswitcher switches the CSS file only, the images are declared in the CSS. Just make sure that the pathnames of the images in the CSS are correct.
(I am not very sure of what you ask... if the above didn't help, please rephrase your question)
Quote from: vkot on May 22, 2014, 04:58:23 AM
Each CSS file of each of your themes has to define all the selectors, like the default theme's CSS file does.
Each CSS file will point to background images, in certain declarations of properties. The styleswitcher switches the CSS file only, the images are declared in the CSS. Just make sure that the pathnames of the images in the CSS are correct.
(I am not very sure of what you ask... if the above didn't help, please rephrase your question)
Sorry, meant, can it be possible to, basically, have the background switcher stylesheet only contain the changes to the background and have all of the other theme information still stored in the default theme css? This way, any changes to the theme can be made in the themes css file, and the background switcher can change just that, the background, without having to define alll of the css for the theme in every background changer stylesheet?
Okay, I got my code working great with this in my header:
<head>';
echo '
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />';
echo '
<script type="text/javascript" src="/head.js"></script>';
echo '
<script type="text/javascript">head.js( "http://www.PATH-TO-FORUM.com/jquery.js","http://www.PATH-TO-FORUM.com/script.js","http://www.PATH-TO-FORUM.com/back.js", function() { });</script>';
The contents of style.css being:
body.green{background: #3F0 url(background1.jpg) center top fixed repeat}
body.blue{background: #00F url(background2.jpg) center -80px fixed repeat}
body.red{background: #F00 url(background3.jpg) center top fixed repeat}
body.grey,html{background: #666 url(background4.jpg) repeat}
body{min-height:800px}
#backgroundswap{display:block;display:inline-block;zoom:1;width:101px;height:22px;background-image:url(backgroundswap.png);background-repeat:no-repeat;margin-bottom:12px;}
body.green #backgroundswap{background-position:center bottom}
body.blue #backgroundswap{background-position:0 -66px}
body.red #backgroundswap{background-position:0 -44px}
body.grey #backgroundswap{background-position:0 -22px}
body.orig{background-position:0 0}
body.orig{
background: #FF0 url(background5.jpg) center top fixed repeat
}
Head.js is what it is, as is jquery and script.js. Back.js contains this:
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
$(document).ready(function(){
window.new_bg = ["blue","red","grey","orig","green"];
window.old_bg = ["green","blue","red","grey","orig"];
if($.cookie('backswap')) {
$('body').removeClass().addClass(old_bg[$.cookie('backswap')]);
};
$("#backgroundswap").click(function(){
currentClass = $('body').attr("class");
$('body').removeClass().addClass(new_bg[old_bg.indexOf(currentClass)]);
$.cookie('backswap', old_bg.indexOf($('body').attr("class")), { path: '/', expires: 365 });
});
});
I took out <body class="orig"> and left it as <body>.
The one last thing I can't seem to figure out is how to get the background images to cache and not reload each time I change page? This is the one final hurdle, and I can put this ridiculous background switching problem to rest after three months, and hopefully it may be of use to someone.
I believe that you are making your life more complicated. And you don't need jQuery.
If you only want to change a few CSS attributes and don't want to have alternative CSS file, you can set them with javascript. http://answers.oreilly.com/topic/1819-how-to-change-an-elements-css-properties-with-javascript/
If you also want to read/store this setting in a cookie, use simple javascript too. http://www.w3schools.com/js/js_cookies.asp
I agree with you, my code didn't work on my laptop, so I'm giving up with that. Your code seems rock solid, I might implement it when I have my theme finished, then I can just take three copies and alter the background code.
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?
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' . "
I wasn't using that URL, I just changed it for the sake of posting it here. As for $settings['default_theme_url'], that is in vkot's script and not in mine. I just need vkots script to by default NOT use the actual default theme but the theme the forum uses by default.
Quote from: Kindred on June 01, 2014, 09:55:39 AM
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' . "
In which case you want $settings['theme_url'].
Quote from: vkot on May 08, 2014, 08:19:28 AM
I hope this helps:
In index.template.php, replace:
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
with:
echo '
<link rel="stylesheet" type="text/css" title="default" href="', $settings['default_theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="alternate stylesheet" type="text/css" title="alternate" href="...path.to.the.dark.theme.../css/index.css?fin20">';
(replace "...path.to.the.dark.theme..." accordingly)
Add in index.template.php:
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/styleswitcher.js?fin20"></script>
(Somewhere inside <head></head>, meaning somewhere in the section after where it says "// Here comes the JavaScript bits!")
Add somewhere in index.template.php code like this:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>
Put your index.css file in the appropriate directory (and also any image files that the CSS may call)
Put the attached styleswitcher.js in Themes/default/scripts/
Changed $settings['default_theme_url'] to $settings['theme_url'] in both
Quote
echo '
<link rel="stylesheet" type="text/css" title="default" href="', $settings['default_theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />
<link rel="alternate stylesheet" type="text/css" title="alternate" href="...path.to.the.dark.theme.../css/index.css?fin20">';
and
Quote
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/styleswitcher.js?fin20"></script>
And added the footer text,
Quote
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>
But the links just redirect to
QuoteHTTP://WWW.FORUMURL.COM/%C3%A2%E2%82%AC%C2%9D#â€
rather than changing the themes, or even attempting to?
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.
looks like someone pasted from word... look at the crap characters at the end of the URL... suggests that the closing quotes are word's "curvy quotes" - which are not valid in code and might screw up the next code of onclick since the href was never properly closed
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:
<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):
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.
Quote from: ZombieCoder on June 01, 2014, 12:03:45 PM
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?
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.
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...
// 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).
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?
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.
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:
// 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:
// 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:
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.
Quote from: samborabora on June 01, 2014, 12:02:25 PMBut the links just redirect to QuoteHTTP://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:
Quote from: vkot on May 08, 2014, 08:19:28 AM
Add somewhere in index.template.php code like this:
<a href="#" onclick="setActiveStyleSheet('default'); return false;">Change style to default</a>
<a href="#" onclick="setActiveStyleSheet('alternate'); return false;">Change style to alternate</a>
Quote from: samborabora on June 01, 2014, 07:48:10 AM
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.
Quote from: vkot on June 04, 2014, 06:41:23 AM
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?
Quote from: vkot on June 04, 2014, 06:41:23 AM
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?
I think it may be that the ' instead of ' and " instead of " are actually causing syntax errors now. Which is correct?
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:
<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/
Quote from: samborabora on June 05, 2014, 04:20:34 PM
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 (http://www.simplemachines.org/community/index.php?topic=520369.msg3694074#msg3694074) with all the code of the style switcher. Just copy-paste.
Quote from: Kindred on June 01, 2014, 09:55:39 AM
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.
lab - you use boarddir if it is looking for a DIRECTORY... however, javascripts call for a URL...
In which case you could theoretically use $boardurl but using the correct $settings variable is better.
yup.. which is what I said as well, isn't it?
You didn't specify what variable to be using instead of the $boarddir ;)
:P
Quote from: Kindred on June 08, 2014, 01:05:38 PM
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 :P
If only someone hadn't already posted the *correct* variable on the previous page.
yup.. you did. :P
Quote from: vkot on May 12, 2014, 03:27:14 AM
You can have as many stylesheets as you want.
Add more <link rel="alternate stylesheet" ... and <a href="#" onclick="setActiveStyleSheet(' ... lines, giving each stylesheet a different name. The rest of the code remains the same.
Why didn't you just use the already existing variant system that 2.0.x has always had?
Quote from: Antechinus on June 10, 2014, 06:09:01 PMWhy didn't you just use the already existing variant system that 2.0.x has always had?
Because:
Quote from: vkot on June 04, 2014, 06:41:23 AMI 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.
...I don't like having to make mod changes to other themes' template files. And changing CSS is only 1(one) click and 0(zero) loading of web pages.
Yeah but a basic background switcher? It's still a one click change. You wouldn't have to hack the templates for that. It'd just be make the extra stylesheet(s) and call the variant(s). That's basically what you're doing anyway.
What's the basic idea here, then? So far none of the code I've tried has successfully worked correctly, which is a bit of a shame as it's looking like there's some interesting ideas going around. The actual SMF guide says to duplicate the default theme, work on that, and leave the default theme alone from what I recall, so is there an easy way of incorporating these scripts so as they cooperate with a non-default theme, that is actually, er, the DEFAULT picked theme for the forum?
You just want to change the body background?
Up in the function template_init() section of index.template.php, add this, just before the closing }
/* Sometimes, we see other colours without licking frogs. This is one of those times. */
$settings['theme_variants'] = array('red', 'blue', 'green', 'white');
Just substitute whatever variant names you like. There is no limit on how many you have.
Then down where it calls the stylesheets, replace this:
// 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" />';
With this:
// 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.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
That will call the original index.css to handle most of the theme, with the variant stylesheet just doing your background switching. Content of index_red.css would be like:
body {background: red;}
That's basically all you need for it to actually work. If you want a changer on the forum somewhere, you can have that too (needs to be changed in profile by default).
Example of a changer thingy on the forum can be found here: http://www.simplemachines.org/community/index.php?topic=520678.msg3706003#msg3706003
Or just check out some of the existing multi-colour themes.
Believe it or not, but I've actually gotten this working really well! Just took the code from the other page you posted and combined it with this, and lo and behold the background changer actually works! Is there a way to have this take effect without a page reload? The reason I ask is that the example vkot posted, and my hacked-up original post happened in realtime, and I was wondering this was possible, or does the very nature of it reply upon it being reloaded to take effect?
No it relies on a reload, but IMO that's not a big deal. People tend to stick with a particular look, for at least several days at a time, once they have found one they like. So in practice, an extra page load every few days or weeks isn't a nuisance.
Now if you were really keen, you could probably revamp the PHP behind it to use AJAX. That would do it without a page load, but me no savvy AJAX so you'll have to ask someone smarter. ;)
Quote from: Antechinus on June 15, 2014, 07:03:21 PM
No it relies on a reload, but IMO that's not a big deal. People tend to stick with a particular look, for at least several days at a time, once they have found one they like. So in practice, an extra page load every few days or weeks isn't a nuisance.
Now if you were really keen, you could probably revamp the PHP behind it to use AJAX. That would do it without a page load, but me no savvy AJAX so you'll have to ask someone smarter. ;)
Trying it so far by just using your default code without adjusting yet, to ensure it works properly, but the only problem I have is that if I click the theme changer once, it adds, say "?variant=Bronze" to my url in the title bar, and then if I try to click on the theme changer a second time, it adds to that (so I end up with www.FORUMURL.COM/?variant=Bronze?variant=Bronze?variant=Bronze?variant=Bronze eventually), and doesn't actually work until I either manually clear the title bar, or click a different link first. Is there a way of not having the theme changer append the variant to the url?
Right, so what variant names does your theme use for the stylesheets and images?
My apologies but I would like to mention that what I posted earlier works as requested if my instructions to implement it are followed.
Adjusting template file names within the code and creating style sheets is a chore left to the person using the code.
If you look at this url: http://webdevelop.comli.com/ ... the top 3 links titled CSS1, CSS2 & CSS3 change the css of the page without a page refresh and the cookie remembers for when the user browses the site. I did not make the css proper for what is implemented as it is just an example but it gives you the idea by changing the style sheet to what is opted.
Quote from: Antechinus on June 19, 2014, 06:42:45 PM
Right, so what variant names does your theme use for the stylesheets and images?
Well, the same as yours currently, because I'm still working on it, and I haven't had a chance to use my own names, which I will when it works. The only problem is, as I said, if you click a link, it puts a string in the header, and this conflicts if you click on a theme changer button again, I just need a way of the URL not being changed.
We have quite a few ways of accomplishing this so far, so I'll keep running through each of them to find the best solution, but I can't really say for certain so far which is working the best, so more testing is in order...
Attach a copy of your index.template.php. I want to see exactly what you have there.
Quote from: Antechinus on June 20, 2014, 05:20:21 AM
Attach a copy of your index.template.php. I want to see exactly what you have there.
<?php
/**
* Simple Machines Forum (SMF)
*
* @package SMF
* @author Simple Machines
* @copyright 2011 Simple Machines
* @license http://www.simplemachines.org/about/smf/license.php BSD
*
* @version 2.0
*/
/* This template is, perhaps, the most important template in the theme. It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below. It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.
The init sub template should load any data and set any hardcoded options.
The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.
The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.
The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.
The menu sub template should display all the relevant buttons the user
wants and or needs.
For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/
// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;
/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';
/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';
/* The version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0';
/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;
/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;
/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;
/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;
/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;
/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = true;
/* Sometimes, we see other colours without licking frogs. This is one of those times. */
$settings['theme_variants'] = array('Bronze', 'Darkside', 'Emerald', 'Hellfire', 'Jade', 'Opal', 'Pinkbitz', 'Ruby');
}
// The main sub template above the content.
function template_html_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"', $context['right_to_left'] ? ' dir="rtl"' : '', '>
<head>';
// 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.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';
// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7', 'ie6', 'webkit') as $cssfix)
if ($context['browser']['is_' . $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/', $cssfix, '.css" />';
// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/rtl.css" />';
// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/theme.js?fin20"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "', $settings['theme_url'], '";
var smf_default_theme_url = "', $settings['default_theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
var smf_scripturl = "', $scripturl, '";
var smf_iso_case_folding = ', $context['server']['iso_case_folding'] ? 'true' : 'false', ';
var smf_charset = "', $context['character_set'], '";', $context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' . $txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' : '', '
var ajax_notification_text = "', $txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "', $txt['modify_cancel'], '";
// ]]></script>';
echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';
// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />';
// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="', $context['canonical_url'], '" />';
// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" />
<link rel="search" href="', $scripturl, '?action=search" />
<link rel="contents" href="', $scripturl, '" />';
// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="', $context['forum_name_html_safe'], ' - ', $txt['rss'], '" href="', $scripturl, '?type=rss;action=.xml" />';
// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="', $scripturl, '?topic=', $context['current_topic'], '.0;prev_next=next" />';
// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="', $scripturl, '?board=', $context['current_board'], '.0" />';
// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];
echo '
</head>
<body><a href="../"><div id="jovilogo"></div></a>';
}
function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo $context['tapatalk_body_hook'];
echo !empty($settings['forum_width']) ? '
<div id="wrapper" style="width: ' . $settings['forum_width'] . '">' : '', '
<div id="header"><div class="frame">
<div id="top_section">
<h1 class="forumtitle">
<a href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name'] . '" />', '</a>
</h1>';
echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.png" alt="Simple Machines Forum" title="Simple Machines Forum" />' : '<div id="siteslogan" class="floatright">' . $settings['site_slogan'] . '</div>', '
</div>
<div id="upper_section" class="middletext"', empty($options['collapse_header']) ? '' : ' style="display: none;"', '>
<a href="http://www.twitter.com/bonjovishort" target="new"><div id="socialtwitter"></div></a>
<a href="http://www.facebook.com/bonjovishort" target="new"><div id="socialfacebook"></div></a>
<div class="user">
';
// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
echo '
<p class="avatar">', $context['user']['avatar']['image'], '</p>';
echo '
<ul class="reset">';
// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '
<li class="notice">', $txt['maintain_mode_on'], '</li>';
// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '
<li>', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=admin;area=viewmembers;sa=browse;type=approve">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'], '</li>';
if (!empty($context['open_mod_reports']) && $context['show_open_reports'])
echo '
<li><a href="', $scripturl, '?action=moderate;area=reports">', sprintf($txt['mod_reports_waiting'], $context['open_mod_reports']), '</a></li>';
echo '
</ul>';
}
// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
elseif (!empty($context['show_login_bar']))
{
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/sha1.js"></script>
<form id="guest_form" action="', $scripturl, '?action=login2" method="post" accept-charset="', $context['character_set'], '" ', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' . $context['session_id'] . '\');"' : '', '>
<div class="info">', sprintf($txt['welcome_guest'], $txt['guest_title']), '</div>
<input type="text" name="user" size="10" class="input_text" />
<input type="password" name="passwrd" size="10" class="input_password" />
<select name="cookielength">
<option value="60">', $txt['one_hour'], '</option>
<option value="1440">', $txt['one_day'], '</option>
<option value="10080">', $txt['one_week'], '</option>
<option value="43200">', $txt['one_month'], '</option>
<option value="-1" selected="selected">', $txt['forever'], '</option>
</select>
<input type="submit" value="', $txt['login'], '" class="button_submit" /><br />
';
if (!empty($modSettings['enableOpenID']))
echo '
<br /><input type="text" name="openid_identifier" id="openid_url" size="25" class="input_text openid_login" />';
echo '
<input type="hidden" name="hash_passwrd" value="" />
</form>';
}
echo '
</div>
</div>
<br class="clear" />';
// Define the upper_section toggle in JavaScript.
echo '
<script type="text/javascript"><!-- // --><![CDATA[
var oMainHeaderToggle = new smc_Toggle({
bToggleEnabled: true,
bCurrentlyCollapsed: ', empty($options['collapse_header']) ? 'false' : 'true', ',
aSwappableContainers: [
\'upper_section\'
],
aSwapImages: [
{
sId: \'upshrink\',
srcExpanded: smf_images_url + \'/upshrink.png\',
altExpanded: ', JavaScriptEscape($txt['upshrink_description']), ',
srcCollapsed: smf_images_url + \'/upshrink2.png\',
altCollapsed: ', JavaScriptEscape($txt['upshrink_description']), '
}
],
oThemeOptions: {
bUseThemeSettings: ', $context['user']['is_guest'] ? 'false' : 'true', ',
sOptionName: \'collapse_header\',
sSessionVar: ', JavaScriptEscape($context['session_var']), ',
sSessionId: ', JavaScriptEscape($context['session_id']), '
},
oCookieOptions: {
bUseCookie: ', $context['user']['is_guest'] ? 'true' : 'false', ',
sCookieName: \'upshrink\'
}
});
// ]]></script>';
// Show the menu here, according to the menu sub template.
template_menu();
echo '
<br class="clear" />
</div></div>';
// The main content should go here.
echo '
<div id="content_section"><div class="frame">
<div id="main_content_section">';
// Custom banners and shoutboxes should be placed here, before the linktree.
// Show the navigation tree.
theme_linktree();
}
function template_body_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
</div>
</div></div>';
/* tapatalk start 20131119 */
//ob_start();
$content = @ ob_get_contents();
@ ob_end_clean();
$content = preg_replace_callback('/(<img [^>]*?src=")(http:\/\/img.tapatalk.com\/d\/[0-9]{2}\/[0-9]{2}\/[0-9]{2})(.*?)(".*?>)/i',
create_function(
'$matches',
'return \'<a href="http://tapatalk.com/tapatalk_image.php?img=\'.urlencode(base64_encode($matches[2].\'/original\'.$matches[3])).\'" target="_blank" class="externalLink">\'.$matches[1].$matches[2].\'/thumbnail\'.$matches[3].$matches[4].\'</a>\';'
),
$content);
if (!isset($_GET['action']) || (isset($_GET['action']) && ($_GET['action'] != 'post'))) {
$exttMbqIsSsl = false;
if(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] === 1)){ //Apache
$exttMbqIsSsl = true;
}elseif(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] === 'on')){ //IIS
$exttMbqIsSsl = true;
}elseif(isset($_SERVER['SERVER_PORT']) && ($_SERVER['SERVER_PORT'] == 443)){ //other
$exttMbqIsSsl = true;
}
$exttMbqProtocol = $exttMbqIsSsl ? 'https' : 'http';
$content = preg_replace('/\[emoji(\d+)\]/i', '<img src="'.$exttMbqProtocol.'://s3.amazonaws.com/tapatalk-emoji/emoji$1.png" />', $content);
}
echo $content;
//ob_start();
/* tapatalk end 20131119 */
// Changer thingy. Permanent selection without changing pages!
if (empty($context['theme_settings']['disable_user_variant']))
echo '
<ul class="changer">
<li class="changerB"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Bronze" onclick="set_theme_variant(\'Bronze\');" ><img src="../Themes/Captain%20Kidd/images/theme/ritch_theme_icon.png" width="24" height="24" /></a></li>
<li class="changerD"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Darkside" onclick="set_theme_variant(\'Darkside\');" ><img src="../Themes/Captain%20Kidd/images/theme/ritch_theme_icon.png" width="24" height="24" /></a></li>
<li class="changerE"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Emerald" onclick="set_theme_variant(\'Emerald\');" > </a></li>
<li class="changerH"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Hellfire" onclick="set_theme_variant(\'Hellfire\');" > </a></li>
<li class="changerJ"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Jade" onclick="set_theme_variant(\'Jade\');" > </a></li>
<li class="changerO"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Opal" onclick="set_theme_variant(\'Opal\');" > </a></li>
<li class="changerP"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Pinkbitz" onclick="set_theme_variant(\'Pinkbitz\');" > </a></li>
<li class="changerR"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Ruby" onclick="set_theme_variant(\'Ruby\');" > </a></li>
</ul>';
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer_section"><div class="frame">
<ul class="reset">
<li class="copyright"><a href="http://jovistyle.com/?theme=5">Mobile Version</a></li>
<li class="copyright">', theme_copyright(), '</li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a></li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', '
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li>
</ul>';
// Show the load time?
if ($context['show_load_time'])
echo '
<p>', $txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</p>';
echo '
</div></div>', !empty($settings['forum_width']) ? '
</div>' : '';
}
function template_html_below()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
</body></html>';
}
// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;
// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;
echo '
<div class="navigate_section">
<ul>';
// Each tree item has a URL and name. Some may have extra_before and extra_after.
$count = count($context['linktree']) - 1;
foreach ($context['linktree'] as $link_num => $tree)
{
if($link_num == $count)
$tree['name'] = '<b>' . $tree['name'] . '</b>';
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];
// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';
// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];
// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' »';
echo '
</li>';
}
echo '
</ul>
</div>';
$shown_linktree = true;
}
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;
echo '
<div id="top_shadow"></div>
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';
foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';
foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';
foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';
echo '
</ul>';
}
echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}
echo '<div style="float:right;"><form id="search_form" action="', $scripturl, '?action=search2" method="post" accept-charset="', $context['character_set'], '">
<input type="text" name="search" value="" class="input_text" />
<input type="submit" name="submit" value="', $txt['search'], '" class="button_submit" />
<input type="hidden" name="advanced" value="0" />';
// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="', $context['current_topic'], '" />';
// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd[', $context['current_board'], ']" value="', $context['current_board'], '" />';
echo '</form></div>';
echo '
</ul>
</div>';
}
// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;
if (!is_array($strip_options))
$strip_options = array();
// List the buttons in reverse order for RTL languages.
if ($context['right_to_left'])
$button_strip = array_reverse($button_strip, true);
// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '
<li><a' . (isset($value['id']) ? ' id="button_strip_' . $value['id'] . '"' : '') . ' class="button_strip_' . $key . (isset($value['active']) ? ' active' : '') . '" href="' . $value['url'] . '"' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a></li>';
}
// No buttons? No button strip either.
if (empty($buttons))
return;
// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);
echo '
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '
</ul>
</div>';
}
?>I will be changing the default names ie: Bronze, Dark, etc, just as soon as it works, I just wanted to keep the code as pure as possible until it worked.
Ok, code there looks fine so it must be something else. I just loaded my old multi theme on my local test site, and it works perfectly. No problems with the changer at all. So, that leads me to think that maybe it's down to having the changer bits stuffed into an already-installed theme, which it may not like (must admit, never tried that, now that I think of it).
Suggestion: zip up a copy of the theme, then reinstall that with a different name, and see how that goes. Make sure variant image folders and css sheets are correctly named too. Image folders should be sitting inside the main /images folder, and each variant folder should be named like _Bronze _Darkside _Emerald etc. They need the underscore in front of the name. CSS sheets should be named as index_Bronze.css etc.
To get the theme installed under a different name, you'll need to edit the name in theme_info.xml (no need to worry about any other files).
Quote from: Antechinus on June 20, 2014, 10:56:36 AM
Ok, code there looks fine so it must be something else. I just loaded my old multi theme on my local test site, and it works perfectly. No problems with the changer at all. So, that leads me to think that maybe it's down to having the changer bits stuffed into an already-installed theme, which it may not like (must admit, never tried that, now that I think of it).
Suggestion: zip up a copy of the theme, then reinstall that with a different name, and see how that goes. Make sure variant image folders and css sheets are correctly named too. Image folders should be sitting inside the main /images folder, and each variant folder should be named like _Bronze _Darkside _Emerald etc. They need the underscore in front of the name. CSS sheets should be named as index_Bronze.css etc.
To get the theme installed under a different name, you'll need to edit the name in theme_info.xml (no need to worry about any other files).
Here: http://jovistyle.com if you try clicking on the buttons at the bottom, you can see the problem is just in the URL of the page having ?varient in it, and another ?variant being added on top of that, cause if you clear the url, and try again, it works. Is it a PHP problem?
Probably.
Quote from: Antechinus on June 20, 2014, 05:52:51 PM
Probably.
So far it's working really well, I'll be changing it to fit my names soon, it just needed putting here:
// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer_section"><div class="frame">';
// Changer thingy. Permanent selection without changing pages!
if (empty($context['theme_settings']['disable_user_variant']))
echo '
<div id="centreicons">
<ul class="changer">
<li class="changerB"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Bronze" onclick="set_theme_variant(\'Bronze\');" ><img src="/Themes/Captain%20Kidd/images/theme/ritch_theme_icon.png" width="24" height="24" /></a></li>
<li class="changerD"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Darkside" onclick="set_theme_variant(\'Darkside\');" ><img src="/Themes/Captain%20Kidd/images/theme/ritch_theme_icon.png" width="24" height="24" /></a></li>
<li class="changerE"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Emerald" onclick="set_theme_variant(\'Emerald\');" > </a></li>
<li class="changerH"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Hellfire" onclick="set_theme_variant(\'Hellfire\');" > </a></li>
<li class="changerJ"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Jade" onclick="set_theme_variant(\'Jade\');" > </a></li>
<li class="changerO"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Opal" onclick="set_theme_variant(\'Opal\');" > </a></li>
<li class="changerP"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Pinkbitz" onclick="set_theme_variant(\'Pinkbitz\');" > </a></li>
<li class="changerR"><a href="' . $_SERVER['REQUEST_URL'] . (strpos($_SERVER['REQUEST_URL'], '.php?') !== false ? ';' : '?') . 'variant=Ruby" onclick="set_theme_variant(\'Ruby\');" > </a></li>
</ul>
</div>
<br class="clear" />';
echo '
<div class="bottomtext">
<ul class="reset">
<li class="copyright"><a href="http://jovistyle.com/?theme=5">Mobile Version</a></li>
<li class="copyright">', theme_copyright(), '</li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="', $txt['valid_xhtml'], '"><span>', $txt['xhtml'], '</span></a></li>
', !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' . $scripturl . '?action=.xml;type=rss" class="new_win"><span>' . $txt['rss'] . '</span></a></li>' : '', '
<li class="last"><a id="button_wap2" href="', $scripturl , '?wap2" class="new_win"><span>', $txt['wap2'], '</span></a></li>
</ul>
</div>';
// Show the load time?Thanks again to everyone, really appreciate all of the replies and help with this long withstanding issue I've had for months and months!!
Good. :)
I am sorry, I have discovered a problem with the styleswitcher code that I posted, similar to the one that this guy posted in this thread: http://www.simplemachines.org/community/index.php?topic=473095
The code conflicts with the auto-complete / auto-suggest recipient, when sending PM... and the pop-up notification when a new PM is received (both are core functions of SMF), making them not work. (I don't know why) :-[
I have narrowed down the problem of my styleswitcher code to this:
window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}
When the above is NOT present in the javascript, everything works normally. In fact, just the existence of
window.onload = function(e) {
}
makes the PM recipient autosuggest and the PM pop-up notification not work.
I cannot understand how this is conflicting with the autosuggest script (http://media.simplemachinesweb.com/smf/default/scripts/suggest.js) and the PM Pop-up script. Why a window.onload call stops these specific scripts from working? Can someone help?
(I'm sorry if I shouldn't post to other person's thread, but I have posted my code only in this thread.)