Theme picker without Hitskin's skins

Go down

Solved Theme picker without Hitskin's skins

Post by Lady Loki on May 10th 2018, 8:38 pm

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
avatar
Lady Loki
Forumember

Female Posts : 25
Reputation : 2
Language : English, Spanish

http://alternate-universe.foroactivo.mx

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by APE on May 11th 2018, 11:39 pm

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.



avatar
APE
Administrator
Administrator

Male Posts : 12728
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

http://chatworld.forumotion.co.uk/

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by Wecoc on May 13th 2018, 12:42 am

If there aren't many changes this can be done, but it's a bit tedious.
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.
avatar
Wecoc
Forumember

Male Posts : 134
Reputation : 94
Language : Catalan, Spanish, English

http://www.mundo-maker.com/

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by Lady Loki on May 13th 2018, 4:51 am

Thank you very much. It worked perfectly until I added some changes to see how they would work. This is what I added:
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?
avatar
Lady Loki
Forumember

Female Posts : 25
Reputation : 2
Language : English, Spanish

http://alternate-universe.foroactivo.mx

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by Draxion on May 13th 2018, 8:14 am

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>']
  ];
});


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 2188
Reputation : 278
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by Lady Loki on May 13th 2018, 6:37 pm

@Wecoc @Draxion Now it works perfectly! Thank you both so so so much!!
avatar
Lady Loki
Forumember

Female Posts : 25
Reputation : 2
Language : English, Spanish

http://alternate-universe.foroactivo.mx

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by SLGray on May 13th 2018, 9:10 pm

Problem solved & topic archived.
Please read our forum rules:  ESF General Rules


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 43893
Reputation : 3124
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum