Theme picker without Hitskin's skins
5 posters
Page 1 of 1
Theme picker without Hitskin's skins
Hi! I hope this is the right place for this question. Well, I want to give my users the option to choose a theme and this theme picker is perfect (https://help.forumotion.com/t135248-add-a-theme-picker#910437). However, I would like to provide them with variations of the skin I have created for the forum (http://plotbunnies.foroactivo.mx/); for example a dark skin but in this dark skin I want to rearrange the statistics board or make the avatar in the lastpost area be square, something like that. Is that possible?
Last edited by Lady Loki on May 13th 2018, 6:38 pm; edited 1 time in total
Re: Theme picker without Hitskin's skins
No sadly the only way is to install your themes on Hitskin then make them work the way it's said in the thread.
That is the only way I know how it works sorry.
That is the only way I know how it works sorry.
Re: Theme picker without Hitskin's skins
If there aren't many changes this can be done, but it's a bit tedious.
Here's the javascript:
Title: Theme picker
Placement: In all the pages
This is the only part you have to worry:
There you define the available themes (in my example 'Default' and 'Dark') and the CSS for each one.
As you can see the default one has nothing defined, because of course it uses the default CSS only.
The Dark one modifies the forum's background to black and the lastpost avatars are rounded.
Here's the javascript:
- Code:
/*
* Theme Picker
* Version: 1.0 EN (2018-05-13)
* Author: Wecoc
* Description: Simple theme (format) picker without Hitskin links
*/
$(function() {
var themes = [
// Default
["Default", ''],
// Dark
["Dark", '<style type="text/css">' +
'body, #wrap { background-color: #000; }' +
'.lastpost-avatar img { border-radius: 32px; }' +
'</style>']
];
var a = document.createElement('DIV'), b = document.createElement('SELECT');
a.id = "theme-picker";
for (i = 0; i < themes.length; i++) {
var c = document.createElement('OPTION');
c.value = themes[i][0];
c.innerHTML = themes[i][0];
b.appendChild(c);
};
a.appendChild(b);
document.querySelector('.navbar').after(a);
loadStoredThemeInfo();
b.onchange = function() {
localStorage.currentTheme = this.value;
updateThemeOnChange();
};
function loadStoredThemeInfo() {
if (!localStorage.currentTheme) return;
$('#theme-picker option[value="' + localStorage.currentTheme + '"]').attr('selected','true');
updateThemeOnChange();
}
function updateThemeOnChange() {
if (!localStorage.currentTheme) return;
var current_theme = localStorage.currentTheme;
var theme_id = themes.findIndex(x => x[0] == current_theme);
$('head .theme-data').remove();
$('head').append('<div class="theme-data">' + themes[theme_id][1] + '</div>');
}
});
Title: Theme picker
Placement: In all the pages
This is the only part you have to worry:
- Code:
// Default
["Default", ''],
// Dark
["Dark", '<style type="text/css">' +
'body, #wrap { background-color: #000; }' +
'.lastpost-avatar img { border-radius: 32px; }' +
'</style>']
There you define the available themes (in my example 'Default' and 'Dark') and the CSS for each one.
- Spoiler:
- This is the format, beware the last theme shouldn't have a comma, but the others must have it.
- Code:
[Theme Name, Theme Code],
[Theme Name, Theme Code],
[Theme Name, Theme Code],
[Theme Name, Theme Code]
As you can see the default one has nothing defined, because of course it uses the default CSS only.
The Dark one modifies the forum's background to black and the lastpost avatars are rounded.
Wecoc- Forumember
- Posts : 144
Reputation : 111
Language : Catalan, Spanish, English
Re: Theme picker without Hitskin's skins
Thank you very much. It worked perfectly until I added some changes to see how they would work. This is what I added:
When I added it, the button disappeared and it's like the code is not even there. Did I do something wrong?
- Code:
$(function() {
var themes = [
// Default
["Default", ''],
// Dark
["Dark", '<style type="text/css">' +
'body, #wrap { background-color: #000; }' +
'.lastpost-avatar img { border: 6px solid #ffd700!important; }' +
'a { color: #FFD700; }' +
'li.row { background: #FFC0CB; }'
'</style>']
];
When I added it, the button disappeared and it's like the code is not even there. Did I do something wrong?
Re: Theme picker without Hitskin's skins
HI there, @Lady Loki, you simply had a few syntax errors which made the code not work properly. Try this.
- Code:
$(function() {
var themes = [
// Default
["Default", ''],
// Dark
["Dark", '<style type="text/css">' +
'body, #wrap { background-color: #000; }' +
'.lastpost-avatar img { border: 6px solid #ffd700!important; }' +
'a { color: #FFD700; }' +
'li.row { background: #FFC0CB; }' +
'</style>']
];
});
Re: Theme picker without Hitskin's skins
Problem solved & topic archived.
|
Lost Founder's Password |Forum's Utilities |Report a Forum |General Rules |FAQ |Tricks & Tips
You need one post to send a PM.
You need one post to send a PM.
When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.
Similar topics
» My hitskins skins deletion
» Theme Picker Issue
» Add a theme picker
» Add a theme picker
» Coding question and the theme picker
» Theme Picker Issue
» Add a theme picker
» Add a theme picker
» Coding question and the theme picker
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum