En poursuivant votre visite de ce site, vous acceptez l'utilisation de cookies pour permettre ses différents services. Voir les Mentions légales.
 
 
 
Vous êtes ici :   Accueil » Forum » Skins » Skin_transparence20
 
 
 
    Imprimer la page...
    Imprimer la section...

Forum - Skins - Skin_transparence20


clos par JeanDenis le 10/03/2020 @ 06:15  Sujet n° 88

le 28/08/2019 @ 18:55
par Cyrille81

Cyrille81

1 message

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. wink 

Site web Cyrille81
sujet clos Haut  
Réponse n° 1
--------
le 28/08/2019 @ 22:51
par JeanDenis

JeanDenis

Administrateur
185 messages

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...eek

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 2
--------
le 29/08/2019 @ 06:44
par Cyrille81

Cyrille81

2 messages

Bonjour,

Merci Jean-Denis.

Ca fonctionne à merveille. smile

Je vais pouvoir modeler tout ça maintenant.

Encore merci.

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 3
--------
le 29/08/2019 @ 07:26
par JeanDenis

JeanDenis

Administrateur
186 messages

Bonjour,

De rien...smile 

N'hésite pas à revenir ici si tu souhaites d'autres aménagements pour cette skin... ou pour d'autres installations d'astuces décrites sur ce site.

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 4
--------
le 29/08/2019 @ 19:02
par Cyrille81

Cyrille81

3 messages

Bonsoir Jean-Denis,

En mettant en place les différentes boites, la barre de défilement horizontale est réapparue.

J'ai beau chercher, mais je ne trouve pas où ça peut coincer.

Merci encore pour ton aide.

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 5
--------
le 30/08/2019 @ 09:22
par JeanDenis

JeanDenis

Administrateur
187 messages

Bonjour Cyrille81,

Je vois cela, et j'avoue ne pas trouver d'où ce souci peut provenir...frown

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 6
--------
le 30/08/2019 @ 17:53
par Cyrille81

Cyrille81

4 messages

Bonjour Jean-Denis,

Merci pour ta réponse.

Ok je vais chercher une autre skin.

Merci encore pour ton travail.

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 7
--------
le 30/08/2019 @ 18:35
par JeanDenis

JeanDenis

Administrateur
188 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 8
--------
le 30/08/2019 @ 19:19
par Cyrille81

Cyrille81

5 messages

Re, re,

Merci beaucoup Jean-Denis.

Je suis en train de tester d'autres skins pour le moment (notamment la transparence18 qui me plait beaucoup).

Je reviendrais peut-être sur la transparence20 une fois que tu l'aura modifiée.

J'ai pas encore fais mon choix.

Merci encore pour ton aide. smile

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 9
--------
le 31/08/2019 @ 11:27
par JeanDenis

JeanDenis

Administrateur
189 messages

Bonjour,

J'ai effectué quelques légères modifications à cette skin_transparence20 afin qu'elle s'affiche correctement en Full.

Elle est disponible au téléchargement. Me signaler, éventuellement s'il reste des soucis.

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 10
--------
le 31/08/2019 @ 18:18
par Cyrille81

Cyrille81

6 messages

Bonjour,

Merci pour ton travail.

Je vais la télécharger et la tester, et je te dirais si ça fonctionne, ou pas.

Cordialement,

EDIT : C'est bon, ça fonctionne très bien maintenant.

Bravo pour ton travail, et ta réactivité. wink


Rectifié par Cyrille81 le 31/08/2019 @ 19:11
Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 11
--------
le 28/12/2019 @ 12:58
par Gamelle

Gamelle

4 messages

Bonjour,

J'ai suivi toute votre discussion. Cette skin est très jolie et très tentante. Je pense arriver à l'utiliser pour un prochain site qui demande cette finesse.

Merci.

smile

Gamelle

Site web Gamelle
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 12
--------
le 28/12/2019 @ 13:20
par JeanDenis

JeanDenis

Administrateur
198 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 13
--------
le 28/12/2019 @ 18:36
par Cyrille81

Cyrille81

7 messages

Bonjour Jean-Denis,

Après avoir fait la mise à jour Guppy 5.03, et après avoir réinstallé la skin 20, j'ai de nouveau la barre de défilement horizontale qui est réapparue.

Idem pour la skin 18. La barre est aussi apparue.

Que dois-je modifier ?

Merci pour ton aide.

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 14
--------
le 29/12/2019 @ 07:02
par JeanDenis

JeanDenis

Administrateur
199 messages

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... rolleyes

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...frown)

Et à ce propos, je te remercie wink  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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 15
--------
le 29/12/2019 @ 13:37
par Cyrille81

Cyrille81

8 messages

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. wink

Encore une fois, merci beaucoup pour ton aide, et pour tout ton travail, ainsi que pour ta disponibilité. wink

Bonnes fêtes de fin d'année à toi aussi, ainsi qu'à tes proches.

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 16
--------
le 29/12/2019 @ 13:54
par JeanDenis

JeanDenis

Administrateur
200 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 17
--------
le 29/12/2019 @ 17:15
par Cyrille81

Cyrille81

9 messages

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. wink

   

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,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 18
--------
le 29/12/2019 @ 17:36
par JeanDenis

JeanDenis

Administrateur
201 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 19
--------
le 29/12/2019 @ 21:03
par Cyrille81

Cyrille81

10 messages

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

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

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. cry

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

Bonne soirée.

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 20
--------
le 29/12/2019 @ 23:16
par JeanDenis

JeanDenis

Administrateur
202 messages

Re,

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

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 21
--------
le 30/12/2019 @ 16:46
par Cyrille81

Cyrille81

11 messages

Bonjour,

   

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

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. wink

   

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 22
--------
le 30/12/2019 @ 17:13
par JeanDenis

JeanDenis

Administrateur
203 messages

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...frown

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" tongue

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

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 23
--------
le 30/12/2019 @ 17:19
par Cyrille81

Cyrille81

12 messages

Ah oui, pardon.

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

   

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

Merci de la rectification. wink

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 24
--------
le 07/01/2020 @ 16:36
par Cyrille81

Cyrille81

13 messages

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... eek

   

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

   

En te remerciant.

   

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 25
--------
le 07/01/2020 @ 16:49
par JeanDenis

JeanDenis

Administrateur
204 messages

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... smile et je ne pourrai probablement pas y regarder avant demain...

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 26
--------
le 07/01/2020 @ 16:54
par Cyrille81

Cyrille81

14 messages

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. wink

   

Merci beaucoup pour ton aide. yes

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 27
--------
le 07/01/2020 @ 16:59
par JeanDenis

JeanDenis

Administrateur
205 messages

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...eek

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 28
--------
le 07/01/2020 @ 17:25
par Cyrille81

Cyrille81

15 messages

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 smiley).

   

Merci, et bon entrainement. yes

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 29
--------
le 08/01/2020 @ 10:55
par JeanDenis

JeanDenis

Administrateur
206 messages

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.angel

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...wink

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

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...cool

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...frown)

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

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 30
--------
le 08/01/2020 @ 13:12
par Cyrille81

Cyrille81

16 messages

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

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 31
--------
le 08/01/2020 @ 15:23
par Cyrille81

Cyrille81

17 messages

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) :

ONGLETS

   

Par contre, sur les colonnes, il faut absolument être sur les caractères de l'onglet pour être cliqué :

COLONNES

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... cry (il faudrait que je fasse une formation CSS biggrin).

   

Je te remercie encore une fois pour ton aide. smile

   

Je vais ensuite m'attaquer au visuel de ma page d'accueil genre caméras. cheeky

   

Merci encore pour tout.

   

Cordialement,

   

Cyrille.

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 32
--------
le 08/01/2020 @ 16:35
par JeanDenis

JeanDenis

Administrateur
207 messages

Re,

J'avoue avoir du mal à saisir ta première demande... eek

Tu veux mettre une image dans un onglet ?

C'est possible, bien sûr !biggrin

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.cool

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 33
--------
le 08/01/2020 @ 17:02
par Cyrille81

Cyrille81

18 messages

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. biggrin

   

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
Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 34
--------
le 08/01/2020 @ 17:50
par JeanDenis

JeanDenis

Administrateur
209 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 35
--------
le 08/01/2020 @ 22:21
par Cyrille81

Cyrille81

19 messages

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... smile

   

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&amp;pg=251#z2">France</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
	<li><a href="articles.php?lng=fr&amp;pg=258#z2">Nord-IDF</a></li>
</ul>
</div>

   

 Merci pour ton aide.yes

   

Bonne soirée.

   

Cordialement,

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 36
--------
le 08/01/2020 @ 23:04
par JeanDenis

JeanDenis

Administrateur
211 messages

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,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 37
--------
le 09/01/2020 @ 07:59
par JeanDenis

JeanDenis

Administrateur
212 messages

Bonjour Cyrille,

Comme promis... un long message...rolleyes

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 ensuitewink

.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&amp;pg=251#z2">France</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=258#z2">Nord-IDF</a></li>
    </ul>
</div>

Tu vois que cela ressemble fort au procédé colonnes...cool

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&amp;pg=251#z2">France</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=252#z2">Sud-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=253#z2">Sud-Est/Corse</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=254#z2">Centre-Ouest</a></li>
        <li class="selected"><a href="articles.php?lng=fr&amp;pg=255#z2">Centre-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=256#z2">Nord-Ouest</a></li>
        <li><a href="articles.php?lng=fr&amp;pg=257#z2">Nord-Est</a></li>
        <li><a href="articles.php?lng=fr&amp;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...eek

Je ferai peut-être un tutoriel à ce sujet dans les astuces en pur css...wink

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 38
--------
le 09/01/2020 @ 16:15
par Cyrille81

Cyrille81

20 messages

Bonjour Jean-Denis,

  

Excellent travail. Tu as bossé toute la nuit ? wink

  

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. yes

   

Citation : « Jean-Denis »

Il est vrai que tout cela sort "un peu" du sujet du fil...

Un tout petit peu. biggrin

   

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. yes

   

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, smile

Site web Cyrille81
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
Réponse n° 39
--------
le 10/01/2020 @ 11:54
par JeanDenis

JeanDenis

Administrateur
218 messages

Bonjour Cyrille,

Merci de tes compliments smile

Ravi d'avoir pu t'être utile... et si tu as besoin d'aide pour Camera... n'hésite pas !

Bonne continuation,

Cordialement,

Site web JeanDenis
clos par JeanDenis le 10/03/2020 @ 06:15 Haut  
actif sujet actif   clos sujet clos   Important! Important!   Nouveau Nouveau message
Rectifier Rectifier message   Clôturer Clôturer sujet   Remonter Remonter