Forum - Skins - Skin_transparence20
le 28/08/2019 @ 18:55
par Cyrille81
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.
--------
le 28/08/2019 @ 22:51
par JeanDenis
Administrateur
Bonsoir Cyrille81,
Merci d'utiliser une des skins proposées sur ce site...
A priori, je pense que c'est un padding à modifier dans deux endroits dans Config Look > BANDEAUX :
Dans MAIN > Marges intérieures, tu as 4px . Remplace par 4px 0px
Même chose pour BOTTOM.
Puis fais également cette opération dans Config Look > ZONES CENTRALES
pour tous les items où tu trouveras Marges intérieures à 4px.
J'avoue ne plus me rappeler pourquoi j'ai mis cette marge qui n'est gênante qu'en full...
Sur un de mes sites qui a la même skin de base, il n'y a pas ce souci... ( https://www.lacompagniedeselles.fr/ )
Cordialement,
--------
le 30/08/2019 @ 09:22
par JeanDenis
Administrateur
Bonjour Cyrille81,
Je vois cela, et j'avoue ne pas trouver d'où ce souci peut provenir...
Je chercherai encore... Mais en attendant, je te conseille plutôt de trouver une autre skin (quitte, si tu le souhaites, à y installer la police de caractères de celle-ci...).
Ne ferme pas ce fil, j'y posterai ma réponse... si j'en trouve une...
Désolé...
Cordialement,
--------
le 30/08/2019 @ 18:35
par JeanDenis
Administrateur
Re...
Je pense avoir trouvé ce qui cloche...
après les modifications effectuées précédemment, il faut supprimer la règle se trouvant dans styleplus.css accessible via Config Style
/******************************************* * Mise en page des blocks dans le header */ div.logo { /* block logo */ margin: 0px -10px 0px 10px; }
ou la mettre en commentaire ainsi
/******************************************* * Mise en page des blocks dans le header */ div.logo { /* block logo */ /* margin: 0px -10px 0px 10px; */ }
et cela devrait fonctionner.... (je corrigerai cette erreur sur la skin au téléchargement...)
Mais si tu as trouvé ton bonheur avec une autre skin ici ou ailleurs... pas de souci...
Cordialement,
--------
le 30/08/2019 @ 19:19
par Cyrille81
--------
le 31/08/2019 @ 11:27
par JeanDenis
Administrateur
--------
le 31/08/2019 @ 18:18
par Cyrille81
--------
le 28/12/2019 @ 13:20
par JeanDenis
Administrateur
Bonjour,
@Gamelle : si tu télécharges cette skin, n'oublie pas de voir cette FAQ https://www.71site.fr/faq.php?lng=fr&pg=722
Elle sera ensuite fonctionnelle, mais il y aura des aménagements à faire, et si tu y tiens, je pourrai t'y aider...
Cordialement,
--------
le 28/12/2019 @ 18:36
par Cyrille81
--------
le 29/12/2019 @ 07:02
par JeanDenis
Administrateur
Bonjour Cyrille81,
Tout d'abord, je te remercie pour ta patience... et pour ta persévérance !
L'organisation de la page dans cette nouvelle version a changé et manifestement cela entraîne des modifications...
J'ai réussi à reproduire le souci. La "solution" que je te propose de tester est simple. Si elle ne te convient pas, tu reviens en arrière sans souci. Et si tu changes de skin, je le comprendrai fort bien... hélas...
Sur le site d'essai https://essai.meteotarn.fr/
Dans Config Look, à Pages/Parallaxe : laisse largeur de page à full
et dans Bandeaux : Passe TOP MAIN BOTTOM FOOTER à 98% ou 99%
Enregistre.
Tu peux essayer de varier juste TOP en laissant les autres à 100% (apparemment chez toi cela suffit... Ce qui n'était pas le cas sur mon essai...)
Et à ce propos, je te remercie de m'avoir fait cherché cette "pseudo-solution", je la placerai dans la FAQ de 71site en tant qu'astuce pour les skins qui dysfonctionnent ainsi en full !
Il serait possible de faire cela avec styleplus... mais cela ne me parait pas raisonnable d'ajouter des règles, il vaudrait mieux simplifier encore davantage ce styleplus...
Ainsi, si tu le souhaites, une fois ton site en ligne définitivement, reviens sur le forum, et je regarderai quelles règles peuvent être supprimées ou modifiées sans crainte.
Déjà tu peux supprimer lignes 302 à 311 (les codes ont complètement changé)
* Onglets et accordéons */ #gytabcontent { color: #000000; } #gyaccordion li li { color: #000000; } .gypopup_block{ color: #000000; }
et ici aussi 291 à 294 (modifie la boite ainsi : DDV6 : c'est ton menu vertical)
.tblbox.DDV6 { /* transparence menus deroulants a adapter aux n° des boites */ background: transparent; border:none; }
Encore une fois, désolé de tous ces désagréments... Bonne fin d'année à toi et à tes proches.
Cordialement,
--------
le 29/12/2019 @ 13:37
par Cyrille81
Bonjour Jean-Denis,
Merci pour ta réponse rapide et complète.
J'ai donc modifié TOP MAIN BOTTOM FOOTER, et j'ai tout passé à 99%, et ça fonctionne très bien. La barre a disparue. Et je vais laisser tout à 99% pour être sûr que ça ne revienne pas lors d'autres modifications.
Pour ce qui est des onglets et colonnes, j'ai supprimé les lignes 302 à 311 comme demandé. Par contre, je ne connais pas les nouveaux codes.
Pour les colonnes, je m'en servais dans la rubrique Observations -> Précipitations -> Radars de pluie
Pour les onglets, je m'en servais dans la rubrique Bilans climatiques -> Bulletins de 20.. à 20.. -> Mensuels de 20..
Mais du coup, aucunes des colonnes et onglets ne fonctionnent maintenant.
Si tu as les solutions, je suis preneur. Je regarderais quand-même sur FreeGuppy pour voir si je trouve les changements liés à cette nouvelle version de Guppy 5.03.
J'ai également modifié le menu DDV6 dans styleplus.
Encore une fois, merci beaucoup pour ton aide, et pour tout ton travail, ainsi que pour ta disponibilité.
Bonnes fêtes de fin d'année à toi aussi, ainsi qu'à tes proches.
Cordialement,
--------
le 29/12/2019 @ 13:54
par JeanDenis
Administrateur
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,
--------
le 29/12/2019 @ 17:15
par Cyrille81
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,
--------
le 29/12/2019 @ 17:36
par JeanDenis
Administrateur
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,
--------
le 29/12/2019 @ 21:03
par Cyrille81
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,
--------
le 29/12/2019 @ 23:16
par JeanDenis
Administrateur
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,
--------
le 30/12/2019 @ 16:46
par Cyrille81
--------
le 30/12/2019 @ 17:13
par JeanDenis
Administrateur
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,
--------
le 07/01/2020 @ 16:36
par Cyrille81
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,
--------
le 07/01/2020 @ 16:49
par JeanDenis
Administrateur
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,
--------
le 07/01/2020 @ 16:59
par JeanDenis
Administrateur
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,
--------
le 07/01/2020 @ 17:25
par Cyrille81
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.
--------
le 08/01/2020 @ 10:55
par JeanDenis
Administrateur
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,
--------
le 08/01/2020 @ 13:12
par Cyrille81
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
--------
le 08/01/2020 @ 15:23
par Cyrille81
Re,
J'ai un petit soucis au niveau des colonnes.
Sur les onglets, je peux cliquer sur l'onglet lui-même sans forcément être sur les caractères de l'onglet (je voulais rajouter une image, mais je ne peux pas, donc je mets l'url de la page) :
Par contre, sur les colonnes, il faut absolument être sur les caractères de l'onglet pour être cliqué :
Et je n'arrive pas à avoir les mêmes couleurs que sur les onglets. Je n'arrive pas à comprendre le code dans styleplus des colonnes. Ce que je dois rajouter, ou modifier... (il faudrait que je fasse une formation CSS ).
Je te remercie encore une fois pour ton aide.
Je vais ensuite m'attaquer au visuel de ma page d'accueil genre caméras.
Merci encore pour tout.
Cordialement,
Cyrille.
--------
le 08/01/2020 @ 16:35
par JeanDenis
Administrateur
Re,
J'avoue avoir du mal à saisir ta première demande...
Tu veux mettre une image dans un onglet ?
C'est possible, bien sûr !
par exemple pour ton premier onglet c'est ce type de code :
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#menu1">JUIN <img src="img/cadeau.gif" /></a></li>
en supposant que tu veuilles mettre un cadeau en juin ! attention, à bien respecter l'appel à l'image entre les balises :
<a> et </a>
Pour les colonnes... je te rappelle que je ne suis pas à l'origine de cette disposition...
Par contre, le fait que le clic se fasse sur le mot et non sur l'onglet... c'est du codage... Pour les couleurs également...
C'est Papinou qui t'a proposé cette disposition, je te suggère de t'adresser à lui pour les modifications, non pas que je n'en soit pas capable, mais la courtoisie veut que je te renvoie vers lui.
Désolé, mais si je veux exiger la même chose, je me dois de la respecter.
Mais, si tu regardes ici : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0
tu verras que le clic se fait sur l'onglet.
Si jamais tu optais pour ce dispositif tout à fait similaire au tien, je pourrais bien sûr t'aider à le mettre en place (L'origine de celui-ci est, comme je l'indique dans mon styleplus ligne 261 à 307 de jac83 que je remercie encore...)
C'est assez simple à mettre en place et à paramétrer pour avoir le même rendu que tes onglets.
Cordialement,
--------
le 08/01/2020 @ 17:02
par Cyrille81
Citation : « Jean-Denis »
J'avoue avoir du mal à saisir ta première demande...
Tu veux mettre une image dans un onglet ?
Non non. Je voulais rajouter une image sur le message, mais je n'y arrive pas. Donc, j'ai mis une URL à la place.
En fait, si je comprends bien, le système d'onglets que tu me propose pour remplacer les colonnes, ferait la même chose, mais est-ce que ça n'alourdirait pas la page en question, car il y a beaucoup d'images (radars de pluie) de différentes régions ?
En gros, est-ce que tout sera sur le même article, ou est-ce que les onglets feront appel à d'autres articles ? (d'après ce que j'ai compris, les onglets seraient sur le même article).
Oui, je comprends très bien. Si je dois rester sur le système des colonnes, je demanderais à Papinou. Désolé de t'avoir demandé pour ça.
Merci quand-même.
Cordialement,
Rectifié par Cyrille81 le 08/01/2020 @ 17:05
--------
le 08/01/2020 @ 17:50
par JeanDenis
Administrateur
Re,
Euh... Je ne comprends toujours pas :
Citation :
Je voulais rajouter une image sur le message, mais je n'y arrive pas. Donc, j'ai mis une URL à la place
Quel message ?
Pour le principe de colonnes, tu fais bien entendu ce que tu veux. En ce qui me concerne, il n'y a aucun souci...
Le dispositif sur ces pages : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0
est basé strictement sur le même fonctionnement : des liens , en haut, appellent d'autres articles (déclarés ou pas en option de menu, peu importe...).
Donc, un clic sur chaque lien appelle un nouvel article, ce qui, effectivement, allège le poids numérique de l'ensemble...
Ce ne sont pas des onglets... les liens appelés ne sont pas dans le même article.
Mais encore une fois, c'est toi qui choisis !
Citation :
Désolé de t'avoir demandé pour ça.
Ne sois pas désolé... Chacun devrait pouvoir utiliser les solutions qu'il souhaite, et obtenir les aides nécessaires auprès des "distributeurs" dans le respect des travaux de chacun d'eux...
Après, si tu souhaites continuer à utiliser le système colonnes, et que Papinou ne te propose aucune solution qui te convienne, alors je pourrai, bien sûr, intervenir.
Cordialement,
--------
le 08/01/2020 @ 22:21
par Cyrille81
Re,
Citation : « Jean-Denis »
Quel message ?
Sur le message N° 31 du forum plus haut. Je voulais mettre une image dans le message en question, mais j'ai pas trouvé comment. Mais c'est pas grave...
Je suis en train de faire un essai avec tes onglets (version 3) sur cet article : ARTICLE, mais je ne sais pas où mettre le N° de l'article qui enverrait sur l'article en question (article 251 pour France, 252 pour Sud-Ouest, 253 pour le Sud-Est, etc...).
<section class="tabs"> <input checked="checked" class="tab-selector-1" id="tab-1" name="radio-set" type="radio" /> <label class="tab-label-1" for="tab-1">France</label> <input class="tab-selector-2" id="tab-2" name="radio-set" type="radio" /> <label class="tab-label-2" for="tab-2">Sud-Ouest</label> <input class="tab-selector-3" id="tab-3" name="radio-set" type="radio" /> <label class="tab-label-3" for="tab-3">Sud-Est/Corse</label> <input class="tab-selector-4" id="tab-4" name="radio-set" type="radio" /> <label class="tab-label-4" for="tab-4">Centre-Ouest</label> <input class="tab-selector-5" id="tab-5" name="radio-set" type="radio" /> <label class="tab-label-5" for="tab-5">Centre-Est</label> <input class="tab-selector-6" id="tab-6" name="radio-set" type="radio" /> <label class="tab-label-6" for="tab-6">Nord-Ouest</label> <input class="tab-selector-7" id="tab-7" name="radio-set" type="radio" /> <label class="tab-label-7" for="tab-7">Nord-Est</label> <input class="tab-selector-8" id="tab-8" name="radio-set" type="radio" /> <label class="tab-label-8" for="tab-8">Nord-IDF</label> <div class="clear-shadow"></div>
Comme pour les colonnes :
<div style="text-align:center;width:100%;margin:auto;"> <ul class="colonnes"> <li><a href="articles.php?lng=fr&pg=251#z2">France</a></li> <li><a href="articles.php?lng=fr&pg=252#z2">Sud-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=253#z2">Sud-Est/Corse</a></li> <li><a href="articles.php?lng=fr&pg=254#z2">Centre-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=255#z2">Centre-Est</a></li> <li><a href="articles.php?lng=fr&pg=256#z2">Nord-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=257#z2">Nord-Est</a></li> <li><a href="articles.php?lng=fr&pg=258#z2">Nord-IDF</a></li> </ul> </div>
Merci pour ton aide.
Bonne soirée.
Cordialement,
--------
le 08/01/2020 @ 23:04
par JeanDenis
Administrateur
Re,
Non, je suis désolé, mais tu confonds... Je me suis mal expliqué :
Le procédé qui est semblable à "colonnes" fonctionne avec les liens en haut de l'article :
Certes, ici : https://www.71site.fr/articles.php?lng=fr&pg=659&mnuid=19&tconfig=0
mais, par exemple ici aussi : https://www.71site.fr/articles.php?lng=fr&pg=619&mnuid=19&tconfig=0
Il n'y a pas de tutoriel sur le site à ce propos, mais je te préparerai un message demain.
Quant aux images, je viens de comprendre... Non on ne peut pas placer d'image dans le forum (c'est plutôt un choix de sécurité qu'autre chose : cela se paramètre...)
Cordialement,
--------
le 09/01/2020 @ 07:59
par JeanDenis
Administrateur
Bonjour Cyrille,
Comme promis... un long message...
Ci-dessous le code à placer dans ton styleplus (il est paramétré pour se comporter exactement comme tes onglets, j'ai donc modifié un peu mon propre code)
si tu modifies tes onglets natifs de GuppY (couleur, police...) il faut reporter ces modifications dans ce code pour reproduire le même style.
Laisse les commentaires, cela t'aidera à l'adapter ensuite
.more { /*menu en tête d°article : merci à jac83 ( https://thorame-haute.fr/ )*/ position:relative; clear:both; width: 100%; /*largeur totale dans l'article*/ margin: 0 auto; /*marges extérieures*/ } .more ul { display:block; text-align:center; /*centre le dispositif - left pour le placer à gauche -*/ } .more ul li { display: inline-block; padding: 0; /*marges intérieures*/ margin:0px 5px; /*marges extérieures : la 2° valeur permet de rapprocher +ou- les onglets -peut être négatif -> -2px et les onglets se touchent-*/ } .more ul li.selected a { /*attribut onglet actif*/ background:#FF7F50; /*couleur fond*/ color:#4E1625; /*couleur texte*/ } .more ul li.selected a:hover { /*attribut onglet survolé actif*/ background:#735056; /*couleur fond*/ color:#DCDF38; /*couleur texte*/ } .more ul li a { /*attributs onglets général*/ color:#4E1524; /*couleur texte*/ float:left; background:#DCDF38; /*couleur fond*/ line-height: 25px; /*hauteur de ligne*/ vertical-align: middle; /*centrage dans l'onglet*/ border-radius: 8px; /*arrondis*/ border: 2px solid #000000; /*bordure : taille nature couleur*/ padding: 2px 8px; /*marges intérieures*/ font-weight:bold; /*gras police : bold ou normal*/ font-family:comic sans ms; /*famille police*/ font-size:15px; /*taille police*/ } .more ul li a:hover { /*attributs onglet survolé*/ background:#735056; /*couleur fond*/ color:#DCDF38; /*couleur texte*/ -webkit-transition: all .3s ease-in; -moz-transition: all .3s ease-in; transition: all .3s ease-in; /*transition au survol*/ } /*fin menu en tête d"article*/
Ensuite, dans chacun de tes articles tu places dans le code source, en haut (après le style éventuel de l'article), comme ceci :
<div class="more"> <ul> <li class="selected"><a href="articles.php?lng=fr&pg=251#z2">France</a></li> <li><a href="articles.php?lng=fr&pg=252#z2">Sud-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=253#z2">Sud-Est/Corse</a></li> <li><a href="articles.php?lng=fr&pg=254#z2">Centre-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=255#z2">Centre-Est</a></li> <li><a href="articles.php?lng=fr&pg=256#z2">Nord-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=257#z2">Nord-Est</a></li> <li><a href="articles.php?lng=fr&pg=258#z2">Nord-IDF</a></li> </ul> </div>
Tu vois que cela ressemble fort au procédé colonnes...
Mais il faut varier la position de
<li class="selected">
dans l'article 251 il doit être comme ci-dessus (c'est pour l'onglet = la page active)
De la même manière tu devras échanger les positions ainsi, pour, par exemple ton article 255, tu auras dans le code source en haut de l'article
<div class="more"> <ul> <li><a href="articles.php?lng=fr&pg=251#z2">France</a></li> <li><a href="articles.php?lng=fr&pg=252#z2">Sud-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=253#z2">Sud-Est/Corse</a></li> <li><a href="articles.php?lng=fr&pg=254#z2">Centre-Ouest</a></li> <li class="selected"><a href="articles.php?lng=fr&pg=255#z2">Centre-Est</a></li> <li><a href="articles.php?lng=fr&pg=256#z2">Nord-Ouest</a></li> <li><a href="articles.php?lng=fr&pg=257#z2">Nord-Est</a></li> <li><a href="articles.php?lng=fr&pg=258#z2">Nord-IDF</a></li> </ul> </div>
J'espère avoir été à peu près clair...
Il est vrai que tout cela sort "un peu" du sujet du fil...
Je ferai peut-être un tutoriel à ce sujet dans les astuces en pur css...
Cordialement,
--------
le 09/01/2020 @ 16:15
par Cyrille81
Bonjour Jean-Denis,
Excellent travail. Tu as bossé toute la nuit ?
Je ne sais pas comment te remercier pour tout ce boulot.
Le rendu est excellent : RADARS DE PLUIE
J'ai appliqué le code dans Styleplus comme indiqué, et j'ai modifié l'ancien code des colonnes, par celui que tu m'a donné dans les différents articles.
J'en ai fait de même pour cet autre article qui faisait appel aussi aux colonnes : RADARS DE NEIGE
Citation : « Jean-Denis »
J'espère avoir été à peu près clair...
Oui très clair. Je te remercie.
Citation : « Jean-Denis »
Il est vrai que tout cela sort "un peu" du sujet du fil...
Un tout petit peu.
En tout cas, je garde ce code. Il fonctionne vraiment bien, et il est très complet.
Encore une fois, je ne sais pas comment te remercier, pour tout le travail que tu as fait. C'est vraiment top.
Je vais m'attaquer au système de caméra pour ma page d'accueil. Mais si j'ai un soucis, j'ouvrirais un autre sujet pour ne pas encombrer celui-ci.
Cordialement,
Rectifier message Clôturer sujet Remonter