The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Theme picker without Hitskin's skins

5 posters

Go down

Solved Theme picker without Hitskin's skins

Post by Lady Loki 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
Lady Loki
Lady Loki
Forumember

Female Posts : 28
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 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.


Theme picker without Hitskin's skins Left1212Theme picker without Hitskin's skins Center11Theme picker without Hitskin's skins Right112
Theme picker without Hitskin's skins Ape_b110
Theme picker without Hitskin's skins Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19358
Reputation : 2006
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 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:

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
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

Post by Lady Loki 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?
Lady Loki
Lady Loki
Forumember

Female Posts : 28
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 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>']
  ];
});
Draxion
Draxion
Helper
Helper

Male Posts : 2518
Reputation : 321
Language : English
Location : USA

https://www.talesoftellene.com/

Back to top Go down

Solved Re: Theme picker without Hitskin's skins

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

@Wecoc @Draxion Now it works perfectly! Thank you both so so so much!! Theme picker without Hitskin's skins 1f64c
Lady Loki
Lady Loki
Forumember

Female Posts : 28
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 May 13th 2018, 9:10 pm

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


Theme picker without Hitskin's skins Slgray10

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

Male Posts : 51514
Reputation : 3523
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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