Adapter sélecteur de Thème

[Kaehlyth]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Autre
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://albastrya.bbactif.com/

Description du problème

Bonjour à tous et à toutes.

Actuellement sur mon forum, un sélecteur de thème a été créé pour que lorsqu'on choisit le thème approprié, le fond d'écran changent avec le cadre médiéval. Il ne s'agit donc pas de feuille CSS chargée mais d'un code JS + CSS écrit .

Le "soucis" c'est que j'ai ajouté un code CSS+HTML me permettant d'avoir deux colonnes autour du cadre du forum comme suit (attention, style sanguinaire avec du sang) : https://media.discordapp.net/attachments/893592844923703357/997464524502343690/unknown.png

Ce que je souhaiterais c'est que lorsque je choisis le style "vampire", ces colonnes indépendantes pour le moment du sélecteur de thème, puissent changer (ici le bouton de sélecteur de thème) : https://media.discordapp.net/attachments/893592844923703357/997460248149372939/unknown.png

J'ai tenté de changer mon code de sélecteur pour intégrer les images :

Code:

/*=================== SELECTEUR DE THEME====================*/
#sstyle {border-radius: 3px;box-shadow: 0 0 4px #bd91c2;font-size: inherit;font-family: inherit;}
.style2 {/*Mystère*/
  background: url(X.png),url(X.jpg) #202020;
  background-position: center top,center top;background-repeat : repeat-y no-repeat;background-attachment: scroll,fixed;}
.style3 {/*Vampire*/
  background: url(X.png),url(X.jpg),url(X.jpg),url(X.jpg) <<< Ici les colonnes #202020;
  background-position: center top,center top,center top,center top;background-repeat : repeat-y no-repeat;background-attachment: scroll,fixed,scroll,scroll;}




$(function() {
  
  /*appliquer au forum le style en mémoire dans le cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $("body").attr("class", $.cookie("sstyle"));
  }
  
  /*intégrer le sélecteur à la page du forum*/
$("#sstyle-insert").prepend('<select id="sstyle" onChange="changestyle(this.value);"><option value="">Style par défaut</option></select>');
    
  /*liste des styles à ajouter au sélecteur*/
  addstyle("Style Mystère", "style2");
  addstyle("Style Vampire", "style3");


  /*affichage du style déjà choisi sur le sélecteur en fonction du cookie s'il existe*/
  if ($.cookie("sstyle")) {
    $('#sstyle option[value="' + $.cookie("sstyle") + '"]').attr("selected", "selected");
  }
 
});
 
 
/*fonction qui ajoute les styles au sélecteur*/
function addstyle(nom, styleclass) {
  $("#sstyle").append('<option value="' + styleclass + '">' + nom + '</option>');
};
 
/*fonction qui change la class du body et le cookie lors de l'utilisation du sélecteur*/
function changestyle(styleclass) {
  $("body").attr("class", styleclass);
  $.cookie("sstyle", styleclass, {expires:365});
};

Mais cela ne fonctionne pas.

______________________________________________
EDIT : 


J'ai tenté de fusionner cette version du sélecteur de thème avec celui présent sur FA.
En effet, j'ai un forum de multi univers.
Le sélecteur de thème a donc le thème : Mystère  qui est pour la fantasy, et un thème "Vampire" pour "Vampire la mascarade".

J'ai souhaité changer plusieurs éléments : titre des catégories, colonnes, encadrement, et fond écran.
J'ai pu changer par le code de base l'encadrement et le fond écran. Je n'ai pas su faire les titres des catégories "Catitle" et les colonnes qui sont un code HTML "Content_IMG". 

Code:

$("head").append('<link rel="stylesheet" type="text/css" id="tstyle" />');
 
if (my_getcookie("sstyle")) {
    $("#tstyle").attr("href", my_getcookie('sstyle'));
}
 
function addstyle(nom, lien) {
    $("#sstyle").append('<option value="' + lien + '">' + nom + '</option>');
}
 
function changestyle(cssurl) {
    var chatbox = true;
    my_setcookie('sstyle', $('#tstyle')[0].href = cssurl, 1, 0);
    if(chatbox == true) {
        $('#frame_chatbox').attr('data', $('#frame_chatbox').attr('data'));
    }
}
 
$(function() {
  $(function() {
      var version = 'phpbb2';
      var mobile = false;
      var selectors = {
          'phpbb2': '#sstyle',
          'phpbb3': '#search-box',
          'punbb': '#pun-visit ul',
          'invision': '#submenu li a',
          'modernbb': 'ul.linklist.top a',
          'awesomebb': '#main-menu a',
          'mobilemodern': 'main'
      };
      if ($("#mpage-body-modern").length) {
          version = 'mobilemodern';
          if(mobile == false) {
              $("#tstyle").remove();
              return;
          }
      }
 
      $("iframe[name=smilies]").load(function() {
          $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{margin:0!important;}</style>');
      });
 
      $(selectors[version]).first().before('<select id="sstyle" onChange="changestyle(this.value);"><option value="">Style par défaut</option></select>');
 
      addstyle("Style Vampire", "https://www.aht.li/3722750/StyleVampire.css");
 
      if (my_getcookie("sstyle")) {
          $('#sstyle option[value="' + my_getcookie("sstyle") + '"]').attr("selected", "selected");
      }
 
  });
});

______________________________________________



Voici le code des colonnes sur le côté :

Code:

#content_img{position: fixed;top: 10px; width: 1400px; margin: 0 auto;padding: 0;}
.imgbas1 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;right:50%;margin-right: 620px; }
.imgbas2 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;left:50%;margin-left: 625px;}


  <div class="content_img">
    <div class="imgbas1"></div>
    <div class="imgbas2"></div>
        <div class="imgbas3"></div>
  </div>

1 - Comment puis-je faire pour fusionner les colonnes du "Content_img" avec le "sélecteur de thème" ?
2 - Comment puis-je fusionner mon propre CSS du sélecteur de thème pour avoir mon "thème Mystère" en CSS sur FA et "Thème Vampire" en feuille CSS car beaucoup de détails changent ?

Merci à la ou les personnes qui pourront m'apprendre comment faire et comprendre.

Cordialement

[Toryudo]

Bonjour !
Alors, de ce que je constate, quand vous sélectionnez le style Mystère, votre élément body change sa class en "style2".
Quand vous sélectionnez le style Vampire, votre body change sa class en "style3".

Ainsi, si dans votre CSS personnalisé, vous ajoutez les propriétés suivantes, vous allez surcharger le CSS par défaut :

Code:

.style2 .imgbas1 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;right:50%;margin-right: 620px; }
.style2 .imgbas2 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;left:50%;margin-left: 625px;}

.style3 .imgbas1 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;right:50%;margin-right: 620px; }
.style3 .imgbas2 {background:transparent url("X.png");width : 190px;height : 1860px;display: block!important;position:fixed;bottom : 30px;left:50%;margin-left: 625px;}

A vous de voir ce que vous souhaiterez changer ensuite en fonction du style sélectionné, mais il suffira de toujours rajouter .style2 ou .style3 pour être pris en compte sur l'un ou l'autre des styles. N'en mettre aucun des deux vous permet d'avoir un code qui sera disponible pour les deux styles.


Pour le point 2, vous pensez que vous n'aurez pas assez de place sur le CSS personnalisé ? Il faudra changer un peu le fonctionnement du script, dites-moi si vous voulez vraiment partir là-dessus !

[Kaehlyth]

Bonjour !

Merci de votre réponse.
En fait j'ai toujours fait en style 2, 3, 4 ect mais je ne pouvais changer que le fond et les bannières, ce qui est déjà énorme ! Cependant, j'ai commencé à vouloir changer pour la campagne de vampire, les colonnes en effet sang, le fond des titres et le fonds des catégories. Ce qui veut dire que le simple .style que j'ai mis en place ne suffit pas ou alors je ne sais pas comment appeler la fonction sans qu'elle rentre en conflit plus bas dans mon css !

Pour le cas numéro deux, j'ai simplement tenté de suivre le tutoriel de base de FA avec l'hébergement extérieur d'une feuille de css qui me permet de changer des codes comme les colonnes, l'encadrement, le fond des titres, ect.

Mon but est de vraiment pouvoir avoir un style "fantasy" avec le style mystère, et de l'autre, vampire. Ce qui n'est pas possible avec le script et css actuel .

La solution 2 serait alors peut être la seule solution ?

Merci !

[Toryudo]

En fait, solution 1 ou solution 2, le CSS devra quand même être écrit de la même façon. Imaginez que vous vouliez changer le fond de votre forum, alors pour le fond par défaut, vous mettrez :

Code:

body {
  background: img(monimage.jpg);
}

Pour le fond du style2, vous mettrez :

Code:

body.style2 {
  background: img(monimage2.jpg);
}

Et pour le fond du style3, vous mettrez :

Code:

body.style3 {
  background: img(monimage3.jpg);
}

Si on veut modifier une colonne, on utilisera le même principe. Par défaut, on aura :

Code:

.imgbas1 {
  background: img(monimage.jpg);
}

Pour la même colonne dans le style2, vous mettrez :

Code:

.style2 .imgbas1 {
  background: img(monimage2.jpg);
}

Et pour la même colonne dans le style3, vous mettrez :

Code:

.style3 .imgbas1 {
  background: img(monimage3.jpg);
}

Si on veut modifier la deuxième colonne, toujours le même principe. D'abord ce qui est utilisé par défaut :

Code:

.imgbas2 {
  background: img(monimage.jpg);
}

Pour la même colonne dans le style2, vous mettrez :

Code:

.style2 .imgbas2 {
  background: img(monimage2.jpg);
}

Et pour la même colonne dans le style3, vous mettrez :

Code:

.style3 .imgbas2 {
  background: img(monimage3.jpg);
}

Pour l'instant, on ne parle pas de mettre un .css extérieur, on parle juste de mettre le CSS qui permet de bien exploiter les styles, qu'il soit dans un fichier extérieur ou dans le CSS personnalisé. Ensuite quand vous aurez fait les conversions, alors vous pourrez choisir de les placer où vous voulez, je pense que le script de la solution 2 devrait marcher. S'il ne marche pas, alors je veux bien avoir accès à une page sur lequel il devrait normalement marcher, je pourrais vérifier à ce moment-là ! (pour l'instant, c'est votre solution 1 qui est toujours en place sur votre forum)

[Kaehlyth]

Suis-je bête, j'ai déjà utilisé cette fonction ailleurs et je ne savais pas que ça pouvait s'appliquer à vraiment tout  .

Cela fonctionne du feu de Dieu, je vous remercie encore Toryudo, sans vous, mon forum ne serait pas ce qu'il est.