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 » Nouvelles des Amis -
 
 
 
    Imprimer la page...

Nouvelles des Amis -

Menu escamotable spécial Mobile - par JeanDenis le 24/04/2020 @ 16:18 

Un menu escamotable spécial Mobile

Ce menu, visible ci-contre, fonctionne à l'identique sur ce site même. Vous le verrez si vous le consultez sur un mobile.

C'est le mélange de deux astuces présentées ici :

Des boutons fixes déployables

CSS Textes en accordéon 

Je vous invite à les consulter, au moins pour en connaitre les sources. smiley

C'est suite à un post sur le forum de freeguppy.org, sur lequel je n'ai pas pu m'exprimer puisque je suis exclu définitivement de guppy -et,  encore une fois, mon droit de réponse d'auteur et d'adaptateur est bafoué...- L'auteur (Luxman) évoquait pour un menu mobile, sur ce site une adaptation des boutons fixes déployables qu'il avait trouvée sur ce présent site en me citant. J'ai trouvé l'idée élégante et j'ai décidé de l'améliorer encore un peu en lui ajoutant les textes en accordéon. Merci à lui, en tout cas de m'avoir indirectement suggéré ce tutoriel.

Il est entièrement en CSS.

Ci-dessous le code de style (commenté le plus possible) qu'il est possible de mettre dans le fichier styleplus, ou mobstyle (RD mobile, puisque censé n'être mis en place que sur mobile)... ou au début de la boite libre dans laquelle il sera placé encadré par les balises . Ou encore, comme c'est le cas ici, dans une feuille de style dédiée.

Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de nouveauté et de MAJ à votre configuration. Il est possible de ne placer qu'une image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }... et de remplacer les images de nouveauté et de MAJ par du texte :     content: 'NEW'); color: #FF0000; par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label).

#menu-deployable {
    position:relative; /* mettre fixed pour fixer */
    z-index:5000; /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page en utilisation mobile*/
    top:10px; /* position en haut */
    right:0px; /* position à droite */
}
#menu-deployable li{ /* Attributs d'une ligne d'un bouton */
    list-style:none;
    height:48px; /* hauteur */
    padding:0px;
    width:48px; /* largeur */
}
#menu-deployable bandeau{ /* Attributs du bandeau non survolé */
    right:290px; /* position à droite (=largeur bandeau) : d'où juxtaposé avec son bouton*/
    padding:0px;
    position:absolute;
    opacity:0; /* opacité = 0 donc non visible */
    transform:scale(0); /* échelle 0 : donc non visible */
    transform-origin: top right; /* déroulement à partir du haut à droite */
    transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#menu-deployable bouton{ /* Attributs de la zone d'un bouton = idem li ci-dessus */
    height:48px; /* hauteur */
    width:48px; /* largeur */
    display:block;
    position:relative;
}
#menu-deployable bouton:hover bandeau{ /* Attributs du bandeau survolé */
    position:relative;
    width:290px; /* largeur  en pixels */
    height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
    padding:5px; /* marges intérieures du bandeau */
    display:block;
    border-radius:6px; /* arrondis */
    opacity:1; /* opacité = 1 donc visible */
    transform:scale(1); /*échelle 1 : donc visible*/
}
#menu-deployable .Item { /* Attributs du menu non survolé */
    background:url('images/iconemenu64.png')no-repeat;  /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item:hover { /* Attributs du menu survolé */
    background:url('images/iconemenu64h.png')no-repeat; /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item bandeau { /* Attributs du bandeau */
    background-color:#f6f6f6; /* couleur de fond */
    color:inherit; /* couleur du texte */
    border:2px solid #616161; /* bordure : épaisseur nature couleur */
}

.md-bandeau-menu{ /*attributs du bandeau*/
    width: 100%; /*largeur du bandeau*/
    margin: 10px auto 30px; /*marges extérieures H DG B*/
    text-align: left; /*alignement texte gauche*/
}
.md-bandeau-menu titre { /*attributs des titres-menu*/
    font-family: Verdana, sans-serif; /*police*/
    font-size: 25px; /*taille police*/
    line-height: 40px; /*hauteur ligne*/
    padding-left: 10px; /*marge intérieure gauche*/
    color: #ce662e; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
    font-family: Verdana, sans-serif; /*police*/
    font-size: 19px; /*taille police*/
    line-height: 28px; /*hauteur ligne*/
    padding: 5px 5px; /*marges intérieures*/
    margin: 1px; /*marges extérieures*/
    position: relative;
    z-index: 20;
    display: block;
    height: 40px; /*hauteur*/
    cursor: pointer;
    color: #3c3c3c; /*couleur texte*/
    background: linear-gradient(#ebebeb 0%,#e1e1e1 100%); /*couleur fond*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}

.md-bandeau-menu label::before { /*pseudo classe image triangle bas avant*/
    content: ''; /*contenu*/
    font-size: 18px; /*taille police*/
    color: #C2662E; /*couleur texte*/
    margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
    content: ''; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*sélectionné pseudo classe image triangle droite avant*/
    content: ''; /*contenu*/
    color: #ebebeb; /*couleur texte*/
}

.md-bandeau-menu label:hover{
    background: #ebebeb; /*couleur fond au survol*/
}
.md-bandeau-menu input:checked + label,
.md-bandeau-menu input:checked + label:hover{ /*attributs des titres sélectionnés et au survol*/
    background: linear-gradient(#c0c0c0 0%,#808080 100%); /*couleur fond*/
    color: #ebebeb; /*couleur texte*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.md-bandeau-menu input{
    display: none;
}
.md-bandeau-menu article{ /*attributs des articles-liens masqués*/
    background: #ffffff; /*couleur fond*/
    margin-top: -5px; /*marge extérieure haute*/
    overflow: hidden;
    height: 0px; /*hauteur = 0 -> invisible*/
    transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
    transform-origin: top; /*origine transformation : ici haut*/
    position: relative;
    z-index: 10;
}
.md-bandeau-menu article p{ /*attributs des paragraphes-liens*/
    font-style: italic; /*à ajuster ou supprimer*/
    color: #777777; /*couleur*/
    font-size: 14px; /*taille police*/
    line-height: 23px; /*hauteur ligne*/
    margin:0; /*marges extérieures*/
    padding: 8px 10px; /*marges intérieures*/
}
.md-bandeau-menu article p.new::after { /*pseudo classe image new après*/
    content: url('images/new.png');
    margin-left:5px;    
}
.md-bandeau-menu article p.maj::after { /*pseudo classe image maj après*/
    content: url('images/maj.png');
    margin-left:5px;    
}
.md-bandeau-menu input:checked ~ article{ /*attributs des articles à la sélection*/
    transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.md-bandeau-menu input:checked ~ article.md{ /*attributs des articles à la sélection*/
    height: auto; /*hauteur*/
    transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}

Si vous fixez ce bouton dans le style ci-dessus, il sera toujours présent (il faut donc choisir judicieusement sa place) et ce menu sera accessible à tout moment... ce qui peut être bien pratique sur un mobile... Mais, sur guppy, en fonction de l'affichage de certaines pages, le résultat est très imparfait... (page devant être "scrollée" horizontalement...). Personnellement, sur ce site, je ne l'ai pas fixé. Mais, sur un autre de mes sites : http://cuirs.71site.fr/ conçu avec le CMS adHoc le même type de menu, à droite sur mobile est fixé, et fonctionne de manière tout à fait satisfaisante.

Ci dessous le code d'intégration du bouton et du menu simplifié tel qu'il se présente ci-contre. A placer dans une boite libre. Notez bien que les liens présentés peuvent être internes ou externes au site... A vous de composer le menu qui vous semble le plus utile...

right ;">



Ce sont les parties surlignées en blanc qu'il faudra adapter pour votre menu.

Le bouton est placé à droite (d'où float:right; ) : à modifier pour le placer à gauche, et donc également les différentes positions dans le style... (me contacter au besoin...)

La notion de survol est absente des mobiles. C'est donc au clic que réagira ce menu. Y compris pour le fermer (clic au dehors). Il ne se fermera donc pas tout seul, contrairement à cette version sur ordinateur, dès qu'on ne le survole plus. Pour permettre de naviguer dans ce menu, j'ai ajouté ce conteneur

500px; overflow: auto;">...

qui permet de mettre en place un ascenseur vertical dès que le contenu dépasse 500px. Valeur à adapter évidemment...

Pas d'inquiétude sur l'imbrication du code. Une fois copié et collé, vous n'avez plus qu'à ajouter les titres, catégories (label) et items nécessaires, et ce, possible directement dans l'éditeur. Voir aussi comment insérer les classes .new et .maj. pour les items à mettre en évidence... là encore à adapter à vos besoins...

Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... Tout dépend de la position de cette boite, en MOBILE (et/ou en WEB si vous le souhaitez)... donc, pour cela et pour tout le reste...

N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides, ou directement par courriel, via le Contact de ce site.

Menu escamotable spécial Mobile - par JeanDenis le 24/04/2020 @ 16:18 

Un menu escamotable spécial Mobile

Ce menu, visible ci-contre, fonctionne à l'identique sur ce site même. Vous le verrez si vous le consultez sur un mobile.

C'est le mélange de deux astuces présentées ici :

Des boutons fixes déployables

CSS Textes en accordéon 

Je vous invite à les consulter, au moins pour en connaitre les sources. smiley

C'est suite à un post sur le forum de freeguppy.org, sur lequel je n'ai pas pu m'exprimer puisque je suis exclu définitivement de guppy -et,  encore une fois, mon droit de réponse d'auteur et d'adaptateur est bafoué...- L'auteur (Luxman) évoquait pour un menu mobile, sur ce site une adaptation des boutons fixes déployables qu'il avait trouvée sur ce présent site en me citant. J'ai trouvé l'idée élégante et j'ai décidé de l'améliorer encore un peu en lui ajoutant les textes en accordéon. Merci à lui, en tout cas de m'avoir indirectement suggéré ce tutoriel.

Il est entièrement en CSS.

Ci-dessous le code de style (commenté le plus possible) qu'il est possible de mettre dans le fichier styleplus, ou mobstyle (RD mobile, puisque censé n'être mis en place que sur mobile)... ou au début de la boite libre dans laquelle il sera placé encadré par les balises . Ou encore, comme c'est le cas ici, dans une feuille de style dédiée.

Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de nouveauté et de MAJ à votre configuration. Il est possible de ne placer qu'une image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }... et de remplacer les images de nouveauté et de MAJ par du texte :     content: 'NEW'); color: #FF0000; par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label).

#menu-deployable {
    position:relative; /* mettre fixed pour fixer */
    z-index:5000; /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page en utilisation mobile*/
    top:10px; /* position en haut */
    right:0px; /* position à droite */
}
#menu-deployable li{ /* Attributs d'une ligne d'un bouton */
    list-style:none;
    height:48px; /* hauteur */
    padding:0px;
    width:48px; /* largeur */
}
#menu-deployable bandeau{ /* Attributs du bandeau non survolé */
    right:290px; /* position à droite (=largeur bandeau) : d'où juxtaposé avec son bouton*/
    padding:0px;
    position:absolute;
    opacity:0; /* opacité = 0 donc non visible */
    transform:scale(0); /* échelle 0 : donc non visible */
    transform-origin: top right; /* déroulement à partir du haut à droite */
    transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#menu-deployable bouton{ /* Attributs de la zone d'un bouton = idem li ci-dessus */
    height:48px; /* hauteur */
    width:48px; /* largeur */
    display:block;
    position:relative;
}
#menu-deployable bouton:hover bandeau{ /* Attributs du bandeau survolé */
    position:relative;
    width:290px; /* largeur  en pixels */
    height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
    padding:5px; /* marges intérieures du bandeau */
    display:block;
    border-radius:6px; /* arrondis */
    opacity:1; /* opacité = 1 donc visible */
    transform:scale(1); /*échelle 1 : donc visible*/
}
#menu-deployable .Item { /* Attributs du menu non survolé */
    background:url('images/iconemenu64.png')no-repeat;  /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item:hover { /* Attributs du menu survolé */
    background:url('images/iconemenu64h.png')no-repeat; /* URL de l'image */
    background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item bandeau { /* Attributs du bandeau */
    background-color:#f6f6f6; /* couleur de fond */
    color:inherit; /* couleur du texte */
    border:2px solid #616161; /* bordure : épaisseur nature couleur */
}

.md-bandeau-menu{ /*attributs du bandeau*/
    width: 100%; /*largeur du bandeau*/
    margin: 10px auto 30px; /*marges extérieures H DG B*/
    text-align: left; /*alignement texte gauche*/
}
.md-bandeau-menu titre { /*attributs des titres-menu*/
    font-family: Verdana, sans-serif; /*police*/
    font-size: 25px; /*taille police*/
    line-height: 40px; /*hauteur ligne*/
    padding-left: 10px; /*marge intérieure gauche*/
    color: #ce662e; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
    font-family: Verdana, sans-serif; /*police*/
    font-size: 19px; /*taille police*/
    line-height: 28px; /*hauteur ligne*/
    padding: 5px 5px; /*marges intérieures*/
    margin: 1px; /*marges extérieures*/
    position: relative;
    z-index: 20;
    display: block;
    height: 40px; /*hauteur*/
    cursor: pointer;
    color: #3c3c3c; /*couleur texte*/
    background: linear-gradient(#ebebeb 0%,#e1e1e1 100%); /*couleur fond*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        1px 0px 0px 0px rgba(255,255,255,0.9) inset,
        0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}

.md-bandeau-menu label::before { /*pseudo classe image triangle bas avant*/
    content: ''; /*contenu*/
    font-size: 18px; /*taille police*/
    color: #C2662E; /*couleur texte*/
    margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
    content: ''; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*sélectionné pseudo classe image triangle droite avant*/
    content: ''; /*contenu*/
    color: #ebebeb; /*couleur texte*/
}

.md-bandeau-menu label:hover{
    background: #ebebeb; /*couleur fond au survol*/
}
.md-bandeau-menu input:checked + label,
.md-bandeau-menu input:checked + label:hover{ /*attributs des titres sélectionnés et au survol*/
    background: linear-gradient(#c0c0c0 0%,#808080 100%); /*couleur fond*/
    color: #ebebeb; /*couleur texte*/
    box-shadow:
        0px 0px 0px 1px rgba(155,155,155,0.3),
        0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.md-bandeau-menu input{
    display: none;
}
.md-bandeau-menu article{ /*attributs des articles-liens masqués*/
    background: #ffffff; /*couleur fond*/
    margin-top: -5px; /*marge extérieure haute*/
    overflow: hidden;
    height: 0px; /*hauteur = 0 -> invisible*/
    transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
    transform-origin: top; /*origine transformation : ici haut*/
    position: relative;
    z-index: 10;
}
.md-bandeau-menu article p{ /*attributs des paragraphes-liens*/
    font-style: italic; /*à ajuster ou supprimer*/
    color: #777777; /*couleur*/
    font-size: 14px; /*taille police*/
    line-height: 23px; /*hauteur ligne*/
    margin:0; /*marges extérieures*/
    padding: 8px 10px; /*marges intérieures*/
}
.md-bandeau-menu article p.new::after { /*pseudo classe image new après*/
    content: url('images/new.png');
    margin-left:5px;    
}
.md-bandeau-menu article p.maj::after { /*pseudo classe image maj après*/
    content: url('images/maj.png');
    margin-left:5px;    
}
.md-bandeau-menu input:checked ~ article{ /*attributs des articles à la sélection*/
    transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.md-bandeau-menu input:checked ~ article.md{ /*attributs des articles à la sélection*/
    height: auto; /*hauteur*/
    transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}

Si vous fixez ce bouton dans le style ci-dessus, il sera toujours présent (il faut donc choisir judicieusement sa place) et ce menu sera accessible à tout moment... ce qui peut être bien pratique sur un mobile... Mais, sur guppy, en fonction de l'affichage de certaines pages, le résultat est très imparfait... (page devant être "scrollée" horizontalement...). Personnellement, sur ce site, je ne l'ai pas fixé. Mais, sur un autre de mes sites : http://cuirs.71site.fr/ conçu avec le CMS adHoc le même type de menu, à droite sur mobile est fixé, et fonctionne de manière tout à fait satisfaisante.

Ci dessous le code d'intégration du bouton et du menu simplifié tel qu'il se présente ci-contre. A placer dans une boite libre. Notez bien que les liens présentés peuvent être internes ou externes au site... A vous de composer le menu qui vous semble le plus utile...

right ;">



Ce sont les parties surlignées en blanc qu'il faudra adapter pour votre menu.

Le bouton est placé à droite (d'où float:right; ) : à modifier pour le placer à gauche, et donc également les différentes positions dans le style... (me contacter au besoin...)

La notion de survol est absente des mobiles. C'est donc au clic que réagira ce menu. Y compris pour le fermer (clic au dehors). Il ne se fermera donc pas tout seul, contrairement à cette version sur ordinateur, dès qu'on ne le survole plus. Pour permettre de naviguer dans ce menu, j'ai ajouté ce conteneur

500px; overflow: auto;">...

qui permet de mettre en place un ascenseur vertical dès que le contenu dépasse 500px. Valeur à adapter évidemment...

Pas d'inquiétude sur l'imbrication du code. Une fois copié et collé, vous n'avez plus qu'à ajouter les titres, catégories (label) et items nécessaires, et ce, possible directement dans l'éditeur. Voir aussi comment insérer les classes .new et .maj. pour les items à mettre en évidence... là encore à adapter à vos besoins...

Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... Tout dépend de la position de cette boite, en MOBILE (et/ou en WEB si vous le souhaitez)... donc, pour cela et pour tout le reste...

N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides, ou directement par courriel, via le Contact de ce site.

(24/04/2020 @ 16:18)

Fork changer icones options de menu - par JeanDenis le 19/03/2020 @ 08:27 

Fork pour changer les icones des options de menu

Vous avez sans doute remarqué les icones font-awesome utilisées désormais (depuis la version 5.03.00).


Certaines sont jolies... d'autres moins...


et notamment, les très laides (à mon point de vue rolleyes) icones en forme de porte ouverte ou fermée placées devant les catégories des options de menu (liste dynamique n°2)

On peut, à tout le moins, choisir la liste  dynamique n°1 ( carré + et carré - ), moins disgracieuses.

On peut aussi remplacer l'une ou l'autre série par d'autres couples d'icones

Dans inc/func_boxes.php


lignes 3086 à 3095 (versions 5.03.00 / 5.03.01 / 5.03.02 ) ou lignes 3084 à 3093 (version 5.03.03) vous avez :       

/**********************************************************************/
        case "2" : // menu liste dynamique n°1
            $openimg = 'far fa-plus-square';
            $closeimg = 'far fa-minus-square';
/**********************************************************************/
        case "3" : // menu liste dynamique n°2
            if ($type_menu == "3") {
                $openimg = 'fas fa-door-closed';
                $closeimg = 'fas fa-door-open';
            }


            Remplacer par (par exemple) :
                $openimg = 'fas fa-chevron-down';
                $closeimg = 'fas fa-chevron-up';

 


                
                ou
                $openimg = 'fas fa-arrow-circle-down';
                $closeimg = 'fas fa-arrow-circle-up';

 


                
                ou
                $openimg = 'fas fa-arrow-right';
                $closeimg = 'fas fa-arrow-up'; 

 

                       

D'autres combinaisons sont possibles, bien sûr... Mais toutes les icones font-awesome ne sont pas, hélas, utilisables... Il y a quand même de quoi faire...

Bien sûr, à refaire si une prochaine version modifie inc/func_boxes.php

Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.

Fork changer icones options de menu - par JeanDenis le 19/03/2020 @ 08:27 

Fork pour changer les icones des options de menu

Vous avez sans doute remarqué les icones font-awesome utilisées désormais (depuis la version 5.03.00).


Certaines sont jolies... d'autres moins...


et notamment, les très laides (à mon point de vue rolleyes) icones en forme de porte ouverte ou fermée placées devant les catégories des options de menu (liste dynamique n°2)

On peut, à tout le moins, choisir la liste  dynamique n°1 ( carré + et carré - ), moins disgracieuses.

On peut aussi remplacer l'une ou l'autre série par d'autres couples d'icones

Dans inc/func_boxes.php


lignes 3086 à 3095 (versions 5.03.00 / 5.03.01 / 5.03.02 ) ou lignes 3084 à 3093 (version 5.03.03) vous avez :       

/**********************************************************************/
        case "2" : // menu liste dynamique n°1
            $openimg = 'far fa-plus-square';
            $closeimg = 'far fa-minus-square';
/**********************************************************************/
        case "3" : // menu liste dynamique n°2
            if ($type_menu == "3") {
                $openimg = 'fas fa-door-closed';
                $closeimg = 'fas fa-door-open';
            }


            Remplacer par (par exemple) :
                $openimg = 'fas fa-chevron-down';
                $closeimg = 'fas fa-chevron-up';

 


                
                ou
                $openimg = 'fas fa-arrow-circle-down';
                $closeimg = 'fas fa-arrow-circle-up';

 


                
                ou
                $openimg = 'fas fa-arrow-right';
                $closeimg = 'fas fa-arrow-up'; 

 

                       

D'autres combinaisons sont possibles, bien sûr... Mais toutes les icones font-awesome ne sont pas, hélas, utilisables... Il y a quand même de quoi faire...

Bien sûr, à refaire si une prochaine version modifie inc/func_boxes.php

Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.

(19/03/2020 @ 08:27)

Fork empêcher fermeture boite menu - par JeanDenis le 10/03/2020 @ 14:19 

Fork pour "empêcher" la fermeture non souhaitée des boites menu

Peut-être avez-vous remarqué qu'une boite menu, déclarée statique par défaut se présente ouverte et nul signe de fermeture ne se situe sur son titre... Si c'est ce que l'on souhaite, c'est parfait...


Sauf que si on souhaite, en plus, des images de nouveauté (ou de MAJ) dans les options de menus...


eh bien dès l'apparition d'une imagette new ou maj... une icone de fermeture de la boite apparait à droite de son titre ! confused (avant la version 5.03.xx, en bas de la boite)
Pourquoi ? Mystère !...
eek J'ai personnellement toujours considéré cela comme un couic, ou à tout le moins comme un défaut de conception...


Si vous avez constaté cette apparition et que celle-ci vous gêne...
Un fork est possible et très simple à mettre en oeuvre :

dans styleplus.css (accessible via Config Style) mettre
 

.dispArrow {display:none;}


plus d'icone (mais encore la possibilité de fermer la boite en cliquant à l'aveugle sur le bandeau du titre...)
Cela peut vous suffire.

Mais si vous souhaitez ne plus permettre ce clic, il faut "forker" le fichier inc/funcskin.inc
Versions 5.03.00 / 5.03.01 / 5.03.02 / 5.03.03
Cherchez la ligne 82
Cherchez 'none'
Remplacez par 'block'

'.$title.'

';

'.$title.'

';

Et le tour est joué...
Bien sûr, à refaire si une prochaine version modifie inc/funcskin.inc

PS : Tous mes sites (sauf démoskins, puisque sans images de nouveauté) font usage de ces modifications.

Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.

Fork empêcher fermeture boite menu - par JeanDenis le 10/03/2020 @ 14:19 

Fork pour "empêcher" la fermeture non souhaitée des boites menu

Peut-être avez-vous remarqué qu'une boite menu, déclarée statique par défaut se présente ouverte et nul signe de fermeture ne se situe sur son titre... Si c'est ce que l'on souhaite, c'est parfait...


Sauf que si on souhaite, en plus, des images de nouveauté (ou de MAJ) dans les options de menus...


eh bien dès l'apparition d'une imagette new ou maj... une icone de fermeture de la boite apparait à droite de son titre ! confused (avant la version 5.03.xx, en bas de la boite)
Pourquoi ? Mystère !...
eek J'ai personnellement toujours considéré cela comme un couic, ou à tout le moins comme un défaut de conception...


Si vous avez constaté cette apparition et que celle-ci vous gêne...
Un fork est possible et très simple à mettre en oeuvre :

dans styleplus.css (accessible via Config Style) mettre
 

.dispArrow {display:none;}


plus d'icone (mais encore la possibilité de fermer la boite en cliquant à l'aveugle sur le bandeau du titre...)
Cela peut vous suffire.

Mais si vous souhaitez ne plus permettre ce clic, il faut "forker" le fichier inc/funcskin.inc
Versions 5.03.00 / 5.03.01 / 5.03.02 / 5.03.03
Cherchez la ligne 82
Cherchez 'none'
Remplacez par 'block'

'.$title.'

';

'.$title.'

';

Et le tour est joué...
Bien sûr, à refaire si une prochaine version modifie inc/funcskin.inc

PS : Tous mes sites (sauf démoskins, puisque sans images de nouveauté) font usage de ces modifications.

Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.

(10/03/2020 @ 14:19)

Édito Mobile Friendly avec Camera - par JeanDenis le 01/03/2020 @ 07:44 

Utiliser Camera dans un diaporama ÉDITO "Mobile Friendly"

Le slider ci-dessous utilise les fonctions natives de Camera, et d'autres instructions qui lui permettent de générer une étiquette "thème" mais surtout une instruction en javascript lui permettant, en fonction de la taille de l'écran d'affichage, de placer le texte au dessous de l'image et non plus à sa droite : Ce slider devient donc "Mobile Friendly" ! Testez son affichage sur smartphone...

La demande initiale de ce travail a été faite par OMT (développeur du plugin "sommaire"), merci à lui de m'avoir fait chercher ces astuces...

carambole
Billard français
» règles
» ff billard
américain
Billard américain
» règles
» ff billard
snooker
Billard snooker
» règles
» ff billard
blackball
Billard blackball ou 8-pool
» règles
» ff billard

Le code, ci-dessous est commenté le plus possible. Vous pouvez vous référer utilement au tutoriel initial de Camera afin d'en comprendre les différentes options.

Cette première partie est à placer dans le code source au début de l'article, de la page, de la boite libre...

Dans la partie

Utiliser Camera dans un diaporama ÉDITO "Mobile Friendly"

Le slider ci-dessous utilise les fonctions natives de Camera, et d'autres instructions qui lui permettent de générer une étiquette "thème" mais surtout une instruction en javascript lui permettant, en fonction de la taille de l'écran d'affichage, de placer le texte au dessous de l'image et non plus à sa droite : Ce slider devient donc "Mobile Friendly" ! Testez son affichage sur smartphone...

La demande initiale de ce travail a été faite par OMT (développeur du plugin "sommaire"), merci à lui de m'avoir fait chercher ces astuces...

carambole
Billard français
» règles
» ff billard
américain
Billard américain
» règles
» ff billard
snooker
Billard snooker
» règles
» ff billard
blackball
Billard blackball ou 8-pool
» règles
» ff billard

Le code, ci-dessous est commenté le plus possible. Vous pouvez vous référer utilement au tutoriel initial de Camera afin d'en comprendre les différentes options.

Cette première partie est à placer dans le code source au début de l'article, de la page, de la boite libre...

Dans la partie

Feature Carousel - par JeanDenis le 25/12/2019 @ 06:44 

Feature Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.

Ce carousel est une création de Brian Osborne : http://www.bkosborne.com

Il est édité sous la licence GPLv3.

Son fonctionnement est identique à ce que son auteur a prévu. J'ai ajouté l'option de réglage de l'opacité des images latérales et j'ai adapté le tout pour son intégration dans GuppY et/ou des Iframes.

Le zip d'intégration majdoc.gif est téléchargeable ici.

Attention, ce zip a changé : avec la version 5.03.00 de GuppY, l'ancienne installation ne fonctionne plus !

Si vous aviez installé Feature Carousel avant et qu'il ne fonctionne plus majdoc.gif : Supprimez sans remord par FTP :

¤ le fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY

¤ le fichier feature-carousel.css dans le dossier inc/csshead de GuppY

¤ le dossier NavFeature (et son contenu) placé dans le dossier img de GuppY.

Vous pouvez installer ce nouveau zip avec la fonction Installer dans l'admin de GuppY ou bien décompresser le zip et envoyer par FTP le dossier FeatureCarousel et son contenu dans le dossier photo de GuppY.

arbor-featurev1.jpg

Dans ce dossier FeatureCarousel, il y a
* le dossier js qui contient les fichiers jquery.featureCarousel.js, jquery-1.8.3.js,
* le dossier css qui contient le fichier feature-carousel.css,

* le dossiers images qui contient quelques flèches de navigation (vous pouvez ajouter les vôtres et adapter...)

NB: c'est exactement le même contenu et au même endroit que le zip de Feature Carousel dans des Iframes, ceci dans un but de simplification de l'ensemble...

Quelques modifications ont été mises en place suite à ce nouveau mode d'installation. Elles sont dans les codes ci-dessous.

Si vous souhaitez réparer un carousel mis en place avant 5.03.00 et qui ne fonctionne plus, inspirez-vous de ce tutoriel et des codes ci-dessous, et n'hésitez surtout pas à poster sur ce forum si vous rencontrez la moindre difficulté...

Il est possible de créer des liens sur les images et sur les titres (légendes). Des réglages sont possibles et assez nombreux dans le style et le script du carousel. Il serait possible d'afficher plusieurs carousels Feature sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.

Ci-dessous, Une bonne partie des réglages est opérationnelle, il fonctionne avec une pause au survol d'une image. Un clic sur une image latérale l'amène au centre.

Ci-dessous, le code utilisé : Une première partie : ...<... /script> (obligatoire !),  et est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités -cette partie est commentée le plus possible-.





Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous pourrez régler les textes des légendes, les liens dans celles-ci, et/ou sur les images.

Les images utilisées sont -sur ce site- dans un dossier photo/imagesFeatureC, à vous d'adapter les vôtres. La stucture (à copier-coller et adapter, notamment au niveau des liens...) de ce code est globalement celle-ci:

Notez que les différentes séries de flèches de navigation sont situées dans le dossier photo/FeatureCarousel/images. Vous pouvez ajouter les vôtres, puis adapter "carousel-left" et "carousel-right" à la fin du code du carousel.

Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont, à très peu d'éléments près, les mêmes.

Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.

Feature Carousel - par JeanDenis le 25/12/2019 @ 06:44 

Feature Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.

Ce carousel est une création de Brian Osborne : http://www.bkosborne.com

Il est édité sous la licence GPLv3.

Son fonctionnement est identique à ce que son auteur a prévu. J'ai ajouté l'option de réglage de l'opacité des images latérales et j'ai adapté le tout pour son intégration dans GuppY et/ou des Iframes.

Le zip d'intégration majdoc.gif est téléchargeable ici.

Attention, ce zip a changé : avec la version 5.03.00 de GuppY, l'ancienne installation ne fonctionne plus !

Si vous aviez installé Feature Carousel avant et qu'il ne fonctionne plus majdoc.gif : Supprimez sans remord par FTP :

¤ le fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY

¤ le fichier feature-carousel.css dans le dossier inc/csshead de GuppY

¤ le dossier NavFeature (et son contenu) placé dans le dossier img de GuppY.

Vous pouvez installer ce nouveau zip avec la fonction Installer dans l'admin de GuppY ou bien décompresser le zip et envoyer par FTP le dossier FeatureCarousel et son contenu dans le dossier photo de GuppY.

arbor-featurev1.jpg

Dans ce dossier FeatureCarousel, il y a
* le dossier js qui contient les fichiers jquery.featureCarousel.js, jquery-1.8.3.js,
* le dossier css qui contient le fichier feature-carousel.css,

* le dossiers images qui contient quelques flèches de navigation (vous pouvez ajouter les vôtres et adapter...)

NB: c'est exactement le même contenu et au même endroit que le zip de Feature Carousel dans des Iframes, ceci dans un but de simplification de l'ensemble...

Quelques modifications ont été mises en place suite à ce nouveau mode d'installation. Elles sont dans les codes ci-dessous.

Si vous souhaitez réparer un carousel mis en place avant 5.03.00 et qui ne fonctionne plus, inspirez-vous de ce tutoriel et des codes ci-dessous, et n'hésitez surtout pas à poster sur ce forum si vous rencontrez la moindre difficulté...

Il est possible de créer des liens sur les images et sur les titres (légendes). Des réglages sont possibles et assez nombreux dans le style et le script du carousel. Il serait possible d'afficher plusieurs carousels Feature sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.

Ci-dessous, Une bonne partie des réglages est opérationnelle, il fonctionne avec une pause au survol d'une image. Un clic sur une image latérale l'amène au centre.

Ci-dessous, le code utilisé : Une première partie : ...<... /script> (obligatoire !),  et est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités -cette partie est commentée le plus possible-.





Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous pourrez régler les textes des légendes, les liens dans celles-ci, et/ou sur les images.

Les images utilisées sont -sur ce site- dans un dossier photo/imagesFeatureC, à vous d'adapter les vôtres. La stucture (à copier-coller et adapter, notamment au niveau des liens...) de ce code est globalement celle-ci:

Notez que les différentes séries de flèches de navigation sont situées dans le dossier photo/FeatureCarousel/images. Vous pouvez ajouter les vôtres, puis adapter "carousel-left" et "carousel-right" à la fin du code du carousel.

Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont, à très peu d'éléments près, les mêmes.

Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.

(25/12/2019 @ 06:44)

Images avec Hover Effects - par JeanDenis le 15/11/2019 @ 10:46 

Des images qui changent lors du survol de la souris
avec des effets variés (transformations, rotations, translations...)

Ces 10 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site, c'est très pratique, et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai pu ajouter aussi au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol. (majdoc.gif) Une mise à jour permet d'augmenter ses possibilités.

Hover Style #1

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus
Mise à jour

Hover Style #2

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #3

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #4

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #5

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #6

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #7

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #8

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #9

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #10

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
tongue.gif

Lire plus

Hover Style #9bis

Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans l'article le code et la méthode de calcul.

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour le #9.

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Notez l'id="front-img" pour bien différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché". Les lignes surlignées en jaune ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration.

Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente avec .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

majdoc.gif Mise à jour :

À la demande d'Aramise, qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.

Dans le corps du code, vous avez, par exemple :


    

        

            

Hover Style #1


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            
Lire plus
        

    

Il suffit d'ajouter le bout de code à la suite de l'image front-img, et vous réglez la position comme vous le souhaitez (ici 10 px en bas et à droite). C'est l'effet qui est en place dans l'image démo 1.


    

        

            

Hover Style #1


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            Lire plus
        

    

Aramise a trouvé une solution texte clignotant que je vous livre également. Un peu plus complexe, elle nécessite l'ajout de règles de style dans le style commun par exemple :

.MESSAGE  {
  position: absolute;
  right: 2%;
  top: 10%;
  width: 100%;
  text-align: right;
  font-size: 26px;
  color: #FF0000;
  font-weight: bold;
  animation-name: animationMESSAGE;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes animationMESSAGE {
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

Et dans le code souhaité, compléter ainsi :


    
Mise à jour

        

            

Hover Style #2


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            Lire plus
        

    

C'est l'effet qui est en place dans l'image démo 2.

L'avantage de cette astuce est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

Images avec Hover Effects - par JeanDenis le 15/11/2019 @ 10:46 

Des images qui changent lors du survol de la souris
avec des effets variés (transformations, rotations, translations...)

Ces 10 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)

info licence : https://tympanus.net/codrops/licensing/

Tout est téléchargeable sur le site, c'est très pratique, et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai pu ajouter aussi au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol. (majdoc.gif) Une mise à jour permet d'augmenter ses possibilités.

Hover Style #1

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus
Mise à jour

Hover Style #2

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #3

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #4

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #5

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #6

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #7

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #8

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #9

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.

Lire plus

Hover Style #10

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
tongue.gif

Lire plus

Hover Style #9bis

Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans l'article le code et la méthode de calcul.

Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour le #9.

Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Notez l'id="front-img" pour bien différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché". Les lignes surlignées en jaune ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration.

Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente avec .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.

ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.

majdoc.gif Mise à jour :

À la demande d'Aramise, qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.

Dans le corps du code, vous avez, par exemple :


    

        

            

Hover Style #1


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            
Lire plus
        

    

Il suffit d'ajouter le bout de code à la suite de l'image front-img, et vous réglez la position comme vous le souhaitez (ici 10 px en bas et à droite). C'est l'effet qui est en place dans l'image démo 1.


    

        

            

Hover Style #1


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            Lire plus
        

    

Aramise a trouvé une solution texte clignotant que je vous livre également. Un peu plus complexe, elle nécessite l'ajout de règles de style dans le style commun par exemple :

.MESSAGE  {
  position: absolute;
  right: 2%;
  top: 10%;
  width: 100%;
  text-align: right;
  font-size: 26px;
  color: #FF0000;
  font-weight: bold;
  animation-name: animationMESSAGE;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes animationMESSAGE {
    0%{opacity: 1;}
    50%{opacity: 0;}
    100%{opacity: 1;}
}

Et dans le code souhaité, compléter ainsi :


    
Mise à jour

        

            

Hover Style #2


           

Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.


            Lire plus
        

    

C'est l'effet qui est en place dans l'image démo 2.

L'avantage de cette astuce est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...

Amusez-vous bien...

Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.

(15/11/2019 @ 10:46)

Un menu Grande Contenance - par JeanDenis le 14/11/2019 @ 15:46 

Un menu Grande Contenance

Ce menu est proposé sur ce site : http://www.outils-web.com

Je l'ai un peu adapté, quelquefois simplifié son style, et commenté afin de l'utiliser plus facilement. Il fonctionne dans la barre menu de ce site. Il est à réserver à un affichage sur ordinateur ou tablette : il n'est pas responsive et son affichage ne serait pas correct sur un smartphone.

Ci-dessous le code CSS à placer en tête de votre article, boite libre.... ou sans les balises dans votre feuille de style styleplus.css. Le code est commenté le plus possible. j'ai laissé en commentaire des règles présentes à l'origine mais que je n'ai pas utilisées. Elles peuvent être supprimées tout simplement. Rétablissez le z-index pour placer ce menu dans une boite du haut de GuppY.

Ci-dessous le code html complet de ce menu :

Ci-dessous le code html simplifié de ce menu afin de n'en montrer que la structure.