Forum - Skins - Skin_transparence20

Bonjour Jean-Denis,

Je suis en train de retravailler (refaire) mon site, et j'utilise ta skin transparence20 pour laquelle je te remercie.

Par contre, j'ai un petit soucis. En effet, quand je met la largeur de page à full, j'ai une barre de défilement horizontale qui s'affiche en bas (voir : https://essai.meteotarn.fr/), alors que sur mon site actuel (https://www.meteotarn.fr) qui est en full aussi, aucune barre ne s'affiche. 

Petit précision, je n'ai encore rien touché d'autre dans les paramètres que la page en full.

Merci pour votre aide.  

Re,

Pour les codes des textes à onglets, des textes accordéons et des fenêtres modales, le code a changé... Le Style est repris à partir de ce qui est inscrit dans Config Look, mais il faut se référer au code source de ces pages désormais :

https://www.freeguppy.org/articles.php?lng=fr&pg=251009&mnuid=251005&tconfig=1#z2

Pour les onglets tu auras ce type de code (style au début de l'article) :  

<style type="text/css">
/*style tabulation onglet*/
.tab-content div.container { padding-top: 8px; }
.tab-content h2 {text-align:center; font-weight:bold;}
ul.nav-tabs { padding-bottom: 0px; }
li.nav-item { margin-left: 0; }
/*fin style tabulation onglet*/
</style>

<div class="width100 marginAuto">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">MENU1</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">MENU2</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">MENU3</a></li>
        </ul>

    <div class="tab-content">
    
        <div class="container tab-pane active" id="menu1">
            <h2>TITRE1</h2>
            <p>Contenu1</p>
        </div>

        <div class="container tab-pane fade" id="menu2">
            <h2>TITRE2</h2>
            <p>Contenu2</p>
        </div>

        <div class="container tab-pane fade" id="menu3">
            <h2>TITRE3</h2>
            <p>Contenu3</p>
        </div>
        
    </div>
</div>

à aménager et compléter... notamment sur le style, qui s'avère assez incomplet... Si tu as la moindre difficulté, reviens ici. Ainsi sur ce site j'ai dû ajouter lignes actuelles 653 à 681 dans le styleplus afin de retrouver les mêmes onglets qu'en 5.02.09...

Cordialement,

Re,

Ok, merci beaucoup pour les onglets.

J'essaierais ça dans 1 semaine, je serais en congés, et j'aurais donc plus de temps pour tester tout ça. 

Par contre, pour ce qui est des colonnes, on avait mis ça en place pour alléger les pages car trop lourdes en onglets. Aurais-tu une nouvelle procédure ? (voir exemple ICI)

J'ai aussi une autre question. Je voudrais modifier le fond des titres des boites centrales et latérales, et quand je rajoute un fond dans config look -> Titres des boites -> image de fond titre, rien ne change.

En te remerciant encore pour ton aide.

Cordialement,

Re,

Pour les colonnes, j'ai vu cela, mais ce n'est pas (sauf erreur de ma part) une procédure issue de GuppY...

Il faudrait peut-être voir avec ceux qui te l'ont proposée...

Je n'ai pas à proprement parler de nouvelle procédure... J'ai proposé sur ce site des procédés en CSS uniquement pour des onglets ou des pages accordéon, mais je ne pense pas que cela rende plus léger la gestion de l'article...

Une solution avec des fichiers html indépendants appelés dans des Iframes mis sous des onglets de GuppY pourrait peut-être te satisfaire... Cette solution serait à créer de toute pièce...

Pour les fonds... Il y a dans styleplus des règles concernant les fonds de titres

lignes 107 à 110

.titrebox { /* Titre */
    letter-spacing:1px;   
    background: linear-gradient(rgba(230, 230, 230, 0.0)0%,rgba(230, 230, 230, 0.05)40%, rgba(230, 230, 230, 0.2)60%, rgba(230, 230, 230, 0.7)95%, rgba(240, 154, 12, 0.9)100% );
}

et lignes 115 à 119

.titre {
    letter-spacing:1px;    
    background: linear-gradient(rgba(230, 230, 230, 0.0)0%,rgba(230, 230, 230, 0.05)40%, rgba(230, 230, 230, 0.2)60%, rgba(230, 230, 230, 0.7)95%, rgba(240, 154, 12, 0.9)100% );
 
}

Ce sont celles-là qui s'appliquent... il faut donc les supprimer simplement ou les mettre en commentaire pour voir. Par exemple :

.titre {
   /* letter-spacing:1px;    
    background: linear-gradient(rgba(230, 230, 230, 0.0)0%,rgba(230, 230, 230, 0.05)40%, rgba(230, 230, 230, 0.2)60%, rgba(230, 230, 230, 0.7)95%, rgba(240, 154, 12, 0.9)100% );*/
 
}

Donc... Modifier au maximum avec Config Look puis ajuster ce que tu souhaites dans styleplus. Et ne laisser dans styleplus que ce qui est différent de Config Look.

Il est évident que ce qui est dans ton styleplus actuel (dégradés de couleur) ne pouvait... et ne peut être créé dans Config Look, d'où ces règles...

N'hésite surtout pas à revenir en cas de besoin,

Cordialement,

Merci beaucoup pour toutes les réponses à mes questions.

Je modifierais cela pendant mes congés pour les onglets et pour les titres. 

Pour ce qui est des colonnes, c'est Papinou qui m'avait donné cette astuce pour éviter que les articles soient trop lourd, et que le chargement des articles soient trop long pour ceux qui ont des débit ADSL faible, comme le mien. 

Encore merci pour tout. Je te tiens au courant des avancés.

Bonne soirée.

Cordialement,

Re,

D'accord, je viens de voir comment étaient "fabriquées" ces fameuses colonnes...

En fait, pas de souci pour cela, elles fonctionnent parfaitement : ce sont des simples appels à des articles qui rechargent la page. Mais, pour avoir leur habillage habituel, il faut reporter le style actuel (de ton site en production) dans le styleplus de ton test

Actuellement, sur ton site en production, dans styleplus, lignes 419 à 431 : tu les copies et tu les colles dans le styleplus de ton test.

A titre d'information, c'est le même type de fonctionnement que ce que tu peux voir sur ce site en tête d'article ici :

https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0#z2

et pages accessibles en suivant les liens

Cordialement,

Bonjour,

Ok, j'ai remis les colonnes dans styleplus les lignes 419 à 431 que tu m'avais fait enlever .

Je regarderais plus en détail ton lien, et j'essaierais de mettre ça en place pour essayer.

Merci encore pour ton aide, et tes conseils. 

Cordialement,

Bonjour,

Citation :

j'ai remis les colonnes dans styleplus les lignes 419 à 431 que tu m'avais fait enlever

Non, non, non... Je ne t'avais pas fait enlever ces lignes...

Dans mon message #14 j'ai écris :

Citation : « JeanDenis »

Déjà tu peux supprimer lignes 302 à 311 (les codes ont complètement changé)

C'étaient les codes pour les onglets, les accordéons et la fenêtre modale...

En aucun cas je ne t'ai indiqué de supprimer le code lié au fonctionnement de  "colonnes" 

D'ailleurs il n'est pas présent, à l'origine, dans le styleplus de la skin de ton test (transparence20).

Cordialement,

Ah oui, pardon.

J'ai confondu "colonnes" et "onglets". 

C'est vrai que les colonnes ne sont pas présentes par défaut...

Merci de la rectification. 

Bonjour Jean-Denis,

Je viens de mettre en place les onglets sur cette PAGE, et j'ai quelques problèmes :

- D'abord les onglets. Ils ne s'affichent que lorsqu'on clique dessus, et pas avant.

- Puis, dès le début, toutes les pages des onglets s'affichent les uns derrière les autres (juin, puis juillet, etc...). Alors qu'ils ne devraient s'afficher un par un.

- Ensuite, si au début, je suis sur juin, et que je clique sur décembre, je me retrouve sur juillet, c'est à dire celui qui vient après juin. Mais si je clique sur les uns après les autres (juin, puis juillet, puis aout, etc...), les bons mois s'affichent... 

Si tu peux me donner quelques conseils sur ce que j'ai mal fait, je suis preneur. 

En te remerciant.

Cordialement,

Bonjour Cyrille,

Il est vrai que la nouvelle intéprétation des données de Config Look ne suffit pas à rendre aux onglets leur apparence habituelle (Je suis confronté aux mêmes difficultés...). Pour les tiens ajoute ceci dans ton styleplus :  

.nav-tabs .nav-link {
border: 2px solid #4E1625;
border-radius: 4px 4px 0px 0px; 
}

.nav-tabs .nav-link.active {
font-weight: normal;
border-bottom-width: 2px;
}

.nav-tabs .nav-link:hover {
font-weight: normal;
border-bottom-width: 2px;
}

Pour le dysfonctionnement, je penche plutôt pour une erreur de codage lorsque tu as conçu ta page (c'est complexe... j'en conviens tout à fait... ).

Mais je vais y regarder dès que possible : je récupérerai ton code et je tâcherai de voir où est le souci. Mais je vais bientôt partir pour mon "entrainement" de tir à l'arc... et je ne pourrai probablement pas y regarder avant demain...

Cordialement,

Merci pour ta réponse rapide.

Je vais rajouter ton code dans styleplus.

Pour le reste, je vais regarder de plus prés de mon côté.

Ne t'en fait pas. C'est par urgent à la minute. 

Merci beaucoup pour ton aide. 

Je crois avoir trouvé en partie :

Dans le code tu as pour le premier panneau :

<div class="container tab-pane active" id="menu1">

mais les autres tu devrais avoir :

<div class="container tab-pane fade" id="menu2">

or je lis pour les suivants :

<div class="container tab-pane active" id="menu2">

Cela ne va pas... Essaie de corriger d'active en fade pour voir pour les menu 2....x ...

Il y a peut-être autre chose, je n'ai pas testé toutes les balises...

Cordialement,

Ca fonctionne nickel. Merci pour ta réponse une nouvelle fois très rapide.

En voulant aller plus vite, j'avais fait un copié-collé de la ligne "menu1", et je l'avais collé partout en modifiant juste le N° du menu. J'avais pas fait gaffe au "active" et "fade". Merci du conseil.

Par contre, 2 autres questions :

- Est-il possible de centre les onglets sur la page ?

- Quand je clique sur un onglet, et que je vais sur un autre onglet, le premier onglet visité reste sur la même couleur du lien actif, et ne revient plus sur la couleur normale du lien non visité. (je ne sais pas si je me fais bien comprendre ).

Merci, et bon entrainement. 

Bonjour Cyrille,

Voici donc le "fruit" de mes recherches :

Citation :

- Est-il possible de centre les onglets sur la page ?

A mon avis, non... Tu peux éventuellement "tricher" en ajoutant ceci dans styleplus (en faisant varier le %)

ul.nav-tabs {  
    margin: 0 10%;  
}

Mais en fonction des écrans le résultat sera différent... Je pense qu'il vaut mieux les laisser à gauche.

Ne pas oublier d'ajouter dans mobstyle.css accessible via Config Style (RD mobile) ceci :

/*onglets pour smartphones*/
ul.nav-tabs {
    margin:0 auto;
    display: inline-block
}

afin que les onglets soient alignés les uns au-dessus des autres sur un écran

Citation :

- Quand je clique sur un onglet, et que je vais sur un autre onglet, le premier onglet visité reste sur la même couleur du lien actif, et ne revient plus sur la couleur normale du lien non visité. (je ne sais pas si je me fais bien comprendre).

Oui oui...

En fait ce sont les balises dans les onglets qui mettent le bazar... De plus, ils sont inutiles.

Si tu veux que les textes des onglets soient en police Comic sansMS, de taille 15px et en gras.... c'est du style et tu dois le renseigner dans styleplus (faute, hélas, de pouvoir le faire dans Config Look)

.nav-tabs .nav-link {
    ....
    font: bold 15px Comic sans MS;
    ....
}

Donc, pour résumer...

ceci dans l'article (et rien de plus)

<ul class="nav nav-tabs" role="tablist">
    <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">JUIN</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">JUILLET</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">AOÛT</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu4">SEPTEMBRE</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu5">OCTOBRE</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu6">NOVEMBRE</a></li>
    <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu7">DÉCEMBRE</a></li>
</ul>

et en revérifiant ton code css ceci dans styleplus devrait suffire :

.nav-tabs .nav-link {
border: 2px solid #000000;
border-radius: 8px;
font: bold 15px Comic sans MS;
}

.nav-tabs .nav-link.active {
border-bottom-width: 2px;
}

+ éventuellement la règle pour "simuler" le centrage (pas une bonne idée...)

et dans mobstyle (RD mobile) pour les onglets sur mobile (là c'est utile...)

Cordialement,

Bonjour Jean-Denis,

Merci beaucoup pour ta réponse, et tes recherches.

Tant pis pour le centrage des onglets. C’était juste pour que cela soit plus jolie visuellement parlant, et donc plus « design ». 😉

Je ne vais pas tricher pour le coup.

Pour ce qui est de la police des onglets, je pensais qu’en le mettant dans les articles, ça fonctionnerait. Merci pour ton aide de les modifier dans styleplus.

Du coup, ça fonctionne très bien.

J’ai du coup aussi modifié mobstyle.

Encore merci pour ton travail. 😊

Cordialement,

Cyrille