Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB2] Bonjour modifier les contour catégorie

Voir le sujet précédent Voir le sujet suivant Aller en bas

soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Mer 8 Sep 2021 - 9:08

  • Version du forum :
    PHPBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Chrome
Bonjour Phil, excuse-moi de te déranger je voudrais savoir si tu pouvais m'aider pour modifier le contour des catégories?

Je voudrais mettre une petite et texture à la place d'une couleur.

Je te donne la texture et CSS en espérant que ce soit bien là.

Je te remercie infiniment et surtout ne t'inquiète pas situer surchargé de travail moi ça peut attendre.

Belle journée.

Texture 
[PHPBB2] Bonjour modifier les contour catégorie Ps6w

Pour les contours 
[PHPBB2] Bonjour modifier les contour catégorie Oehx

Code:
/*******DEBUT LOUPE**************/
/*Le bouton pour l ouverture de la fenetre*/
    .M14_open_Body
    {
    width: 16px;
    height: 16px;
    right: 10px;
    float: right;
    cursor:pointer;
    }
    /*Le bouton pour la fermeture de la fenetre*/
    .M14_close_Body
    {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 10px;
    right: 10px;
    cursor:pointer;
    }
    /*On place les transitions sur les messages*/
    .postbody
    {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    }
    /*La fenetre agrandie*/
    #M14_Effet_body.postbody
    {
    /*On donne une position relative*/
    position: relative;
    /*On demande une marge negative a gauche pour la correction de la fenetre*/
    left:-80px;
    /*La couleur de fond*/
    background: white;
    /*La couleur de police*/
    color:black;
    /*La taille de police*/
    font-size:14px;
    /*On donne un espace conséquent si besoin peut etre supprime*/
    padding: 20px 30px 10px 10px;
    /*on agrandit sur la largeur et la hauteur sur la plupart des navigateurs*/
    -ms-transform: scale(1.2,1.2);
    -webkit-transform: scale(1.2,1.2);
    transform: scale(1.2,1.2);
      /*la couleur de bordure*/
    border:2px solid #00FFFF;
      /*Les bordures arrondies sur la plupart des navigateurs*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }

/*******FIN LOUPE**************/





/* ------------ QEEL INFOBULLE TFA -------------- */
.left_tfa,.right_tfa
{
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
.right_tfa
{
position: absolute;

height: 165px;
margin-left:60px;
margin-top:30px;
font-size:11px !important;
color:white!important;
}
.right_tfa div td{background-color:transparent;}
.right_tfa div td span {font-size:11px !important;color:white!important;}

.left_tfa
{
font-size:11px !important;
color:white!important;
position: absolute;

height: 165px;
margin-left: 60px;
overflow-y: scroll;
padding-left: 10px;
}
.left_tfa a[href^="/t"],.left_tfa a[href^="/u"],.right_tfa div td span a[href^="/u"],.right_tfa div td span a[href^="/u"] span
{
font-size:11px !important;
text-decoration:none !important;
}
.left_tfa img{display:none !important;}
.info_gauche td.row1 , .info_gauche span,.info_droite div.gensmall{
  background-color:transparent !important;color:white !important;font-size:11px !important;}
    /* TABLE PRINCIPALE */
    #tout_qeel_TFA{
    width: 100%;
    background-color:#222;
    border:2px solid #20aec8;
  -webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
    }

    /* INFOBULLE DES GROUPES DU HAUT ET BAS SI PRESENTS */

    .group_bulle{
  cursor:pointer;
    display: inline;
  line-height: 16px;
    position:relative;
    margin: 1px 0;
    padding: 0;

    }

    /* STYLE BOUTON GROUPE */
    .bouts_groups{

    font : 11px Arial;
    text-align : center;
    padding: 3px;
    margin: 0px 1px;
    -moz-border-radius: 0px 0px 8px 8px ;
    -webkit-border-radius: 10px 10px 0px 0px ;
    border-radius:0px 0px 8px 8px ;
    -moz-box-shadow: 0px 0px 1px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
    box-shadow: 0px 0px 4px #000;
    background: url(https://i.servimg.com/u/f87/11/26/21/37/img10.gif);
    border: 1px solid rgba(255,185,15, 0.2) !important; /* bordure transparente pour Firefox et autres compatibles */
    border:1px solid #000000; /* Pour tous les navigateurs à la traine */
    }

    

    /* PARTIE MASQUEE DE L’INFOBULLE */

    .in_bulle {
    display: none;
    margin: 0;
    padding: 0;
    }

    /* INFOBULLES AU SURVOL */
.in_bulle:hover {
        background: none;
        z-index: 999;
        }

        /* CONFIGURATION-PARAMÈTRES DE L'INFOBULLE VISIBLE AU SURVOL */

        .group_bulle:hover .in_bulle{
        position: absolute;
        z-index: 999;
        width:200px;
        display: block;
        margin: 0;
        top:25px;
        left: 45px;
        padding: 3px;
      background-color:#222;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
        border:1px dotted #20aec8;
        }

        /* PARAGRAPHE DE L'INFOBULLE */

        .in_bulle p{
        width:95%;
        margin: 0 auto;
        padding: 4;
        font: 10px Arial;
        text-align: left;
        color: #FFF;
        margin-top: 5px;
        }

        /* LIEN DANS L'INFOBULLE */

        a.lien_groupe{
        font: 12px Arial;
        text-align: right;
        color: #CC0000;
        margin-top: 5px;
        }

        /* ROTATION DES BOUTONS AU SURVOL */

        .rotation:hover{
        -moz-transform: rotate(-15deg);
        -webkit-transform: rotate(-15deg);
        }

        /* PARTIE DE GAUCHE */
        .gauche{
        border:1px solid #000000;
        padding: 4px;
        -moz-border-radius: 00px 0px 0px 00px ;
        -webkit-border-radius: 00px 0px 0px 00px ;
        border-radius:20px 0px 0px 0px ;
        -moz-box-shadow: 0px 0px 0px #000;
        -webkit-box-shadow: 0px 0px 0px #000;
        box-shadow: 0px 0px 0px #000;
        
        border: 0px solid rgba(255,185,15, 0.2) !important; /* Firefox et autres compatibles */
        border: 0px solid #000000; /* Pour tous les navigateurs à la traine */
        }

        /* INFOBULLE DE GAUCHE */

        .info_gauche{
        position: relative;
        margin: 0;
        padding: 0;
      cursor:pointer;
        }

        /* CONFIGURATION-PARAMÈTRES DE L'INFOBULLE VISIBLE AU SURVOL */

        .info_gauche:hover .in_bulle{
        position: absolute;
        z-index: 999;
        width:300px;
        display: block;
        margin: 0;
        top: 10px;
        left:50px;
        padding: 4px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
        border:1px dotted #20aec8;
        }

        /* INFOBULLE DE DROITE */

        .info_droite{
        position: relative;
        margin: 0;
        padding: 0;
       cursor:pointer;
        }

        /* CONFIGURATION-PARAMÈTRES DE L'INFOBULLE VISIBLE AU SURVOL */

        .info_droite:hover .in_bulle{
        position: absolute;
        z-index: 999;
        width:300px;
        display: block;
        margin: 0;
        top: 10px;
        right:50px;
        padding: 4px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
        border:1px dotted #20aec8;
        }
        .rotation-d:hover{
        -moz-transform: rotate(15deg);
        -webkit-transform: rotate(15deg);
        }

        /* PARTIE DE DROITE */

        .droite{
        border:1px solid #c8c092;
        padding: 4px;
        -moz-border-radius: 0px 20px 20px 0px ;
        -webkit-border-radius: 0px 20px 20px 0px ;
        border-radius:0px 20px 20px 0px ;
        -moz-box-shadow: 0px 0px 0px #000;
        -webkit-box-shadow: 0px 0px 0px #000;
        box-shadow: 0px 0px 0px #000;
      
        border: 0px solid rgba(255,185,15, 0.4) !important; /* bordure transparente pour Firefox et autres compatibles */
        border:0px solid #DF9500 ; /* Pour tous les navigateurs à la traine */
        }

        /* IMAGE DE GAUCHE AVEC UNE OPACITE*/

        .left_tfa img
        {
        position:absolute;
        width:160px;
        height:160px;
        margin-left:20%;
        opacity : 0.5;
        -moz-opacity : 0.5;
        -ms-filter: "alpha(opacity=50)"; /* IE 8 */
        filter : alpha(opacity=50); /* IE < 8 */
        }


        /* IMAGE DROITE AVEC UNE OPACITE*/

        .right_tfa img
        {
        position:absolute;
        width:160px;
        height:160px;
        margin-left:20%;
          opacity : 0.5;
        -moz-opacity : 0.5;
        -ms-filter: "alpha(opacity=50)"; /* IE 8 */
        filter : alpha(opacity=50); /* IE < 8 */
        }
        /* ON DONNE TOUTE L OPACITE AU SURVOL*/
        .left_tfa img:hover ,  .right_tfa img:hover
        {
        opacity : 1;
        -moz-opacity : 1;
        -ms-filter: "alpha(opacity=100)"; /* IE 8 */
        filter : alpha(opacity=100); /* IE < 8 */
        }

/*CONTOUR CATEGORIES*/
.M14_cat
{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
border: 4px dotted #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-htm-border-radius: 10px;
box-shadow: 0px 0px 4px# #000000;
-moz-box-shadow: 0px 0px 4px#000000;
-o-box-shadow: 0px 0px 4px# #000000;
-webkit-box-shadow: 0px 0px 4px#000000;
-htm-box-shadow: 0px 0px 4px #000000;
}
/**FIN CONTOUR CATEGORIES*/

.codebox.spoiler{width:60%!important;}

.fa_dislike_list, .fa_like_list {
    background-color: #827112;
}
  .signature_div img{
    max-width: 300px !important;
    max-height: 300x !important;
    }
/* Bouton Héberger une image prend le favicon de Servimg */
.sceditor-button-servimg div {
    background-position: center center !important;
    background-image: url('https://www.badwholf.uk/rsc/img/Interface/ButtonServimg.png') !important;
    background-size: 16px;
}
/* Mise en valeur des liens dans les messages */
div.postbody a {
    color: #0FF !important;
}
div.postbody a:hover {
    border-top: 2px dotted #F00;
    border-bottom: 2px dotted #F00;
    color: #0F0 !important;
    text-decoration: none !important;
}

/*LE BLOC POUR LES NOUVEAUX MEMBRES SANS MESSAGE*/
.M14_class_accueil
{
position: fixed;
margin-top: 10px;
width:80%;
left:10%;
padding: 10px;
text-align:center;
color:#d1ba88;
  font-size:15px;
  font-style:italic;
  border: 2px dotted #3c7d95;
  border-radius:10px;
}
td.curr_privmsg {
    border-bottom: 3px #f00 solid;
    border-top: 3px #f00 solid;
    opacity: 0.85;
}


Dernière édition par soleda le Ven 10 Sep 2021 - 7:50, édité 1 fois
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 8 Sep 2021 - 9:49

Hello Chantal,
tu ne me dérange pas chère amie, sinon l'entraide serait fermée Merci .

Bon mettre une image pour une bordure, faut oublier ok .

Par contre tu peux mettre la texture sur le contenu des catégories:

Ajoutes ceci:

Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:

/*TEXTURE CELLULE CATEGORIES*/
.M14_cat td
{
background-image: url(https://www.zupimages.net/up/21/36/ps6w.jpg);
background-repeat: repeat;
}
/*FIN TEXTURE CELLULE CATEGORIES*/

Penser a cliquer sur le bouton [PHPBB2] Bonjour modifier les contour catégorie Sans_t10

Si tu désires supprimer les pointillés:
Dans ta feuille de style tu as ceci:
Code:
/*CONTOUR CATEGORIES*/
.M14_cat
{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
border: 4px dotted #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-htm-border-radius: 10px;
box-shadow: 0px 0px 4px# #000000;
-moz-box-shadow: 0px 0px 4px#000000;
-o-box-shadow: 0px 0px 4px# #000000;
-webkit-box-shadow: 0px 0px 4px#000000;
-htm-box-shadow: 0px 0px 4px #000000;
}
/**FIN CONTOUR CATEGORIES*/

Supprimes cette ligne:
Code:
border: 4px dotted #000000;






Message envoyé via la réponse rapide par: @Milouze14
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Mer 8 Sep 2021 - 10:32

Un grand merci phil non je ne veux pas supprimer les pointiller alors juste changer de couleur avec sa #FFDE75 , pour la texture cellule catégorie je l'ajoute ou ?
ici ?
Code:
/*CONTOUR CATEGORIES*/
.M14_cat
{
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
margin-top: 10px;
border: 4px dotted #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-webkit-border-radius: 10px;
-htm-border-radius: 10px;
box-shadow: 0px 0px 4px# #000000;
-moz-box-shadow: 0px 0px 4px#000000;
-o-box-shadow: 0px 0px 4px# #000000;
-webkit-box-shadow: 0px 0px 4px#000000;
-htm-box-shadow: 0px 0px 4px #000000;
}
/**FIN CONTOUR CATEGORIES*/



Milles merci
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 8 Sep 2021 - 10:53

Pour changer la couleur:
il faut changer la css donnée dans ton dernier message:
https://www.milouze14.com/t33109-phpbb2-bonjour-modifier-les-contour-categorie#631893

ici:
Code:
border: 4px dotted #000000;

Remplacer :
Code:
#000000

Par ta couleur:
Code:
#FFDE75

Ce qui donnera:
Code:
border: 4px dotted #FFDE75;




pour la texture cellule catégorie je l'ajoute ou ?

Hum tout est expliqué ici Chantal:

https://www.milouze14.com/t33109-phpbb2-bonjour-modifier-les-contour-categorie#631892


Message envoyé via la réponse rapide par: @Milouze14
Anonymous
Invité
Invité

MessageInvité Mer 8 Sep 2021 - 14:26

Milouze14 a écrit:Bon mettre une image pour une bordure, faut oublier ok .

Coucou @Milouze14
C'est bien possible d'utiliser une image de bordure !
Spoiler:

Après il est possible que j'aie mal compris la demande et que ça ne corresponde pas ? ok

Bonne journée !

Message envoyé via la réponse rapide par: @chattigre
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 8 Sep 2021 - 15:27

@chattigre et @soleda ,

alors effectivement, je ne connaissais pas ce genre de style!!
Merci beaucoup cher ami ok .



Chantal,
remplaces donc:
Code:
    /*CONTOUR CATEGORIES*/
    .M14_cat
    {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 4px dotted #000000;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -htm-border-radius: 10px;
    box-shadow: 0px 0px 4px# #000000;
    -moz-box-shadow: 0px 0px 4px#000000;
    -o-box-shadow: 0px 0px 4px# #000000;
    -webkit-box-shadow: 0px 0px 4px#000000;
    -htm-box-shadow: 0px 0px 4px #000000;
    }
    /**FIN CONTOUR CATEGORIES*/


Par ceci:
Code:
  /*CONTOUR CATEGORIES*/
    .M14_cat
    {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    margin-top: 10px;
    border-image-slice: 12;
  border-image-width: 6px;
  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("https://www.zupimages.net/up/21/36/ps6w.jpg");
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
    -htm-border-radius: 10px;
    box-shadow: 0px 0px 4px# #000000;
    -moz-box-shadow: 0px 0px 4px#000000;
    -o-box-shadow: 0px 0px 4px# #000000;
    -webkit-box-shadow: 0px 0px 4px#000000;
    -htm-box-shadow: 0px 0px 4px #000000;
    }


Message envoyé via la réponse rapide par: @Milouze14
Anonymous
Invité
Invité

MessageInvité Mer 8 Sep 2021 - 15:52

Re,
De rien !
Bon, la syntaxe est un peu (beaucoup ?) complexe, du coup je me suis servi de ce générateur pour générer les règles adaptées en fonction de l'image  : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator

(Le code peut être simplifié, par exemple il m'avait mis border-slice: 12 12 12 12; alors que border-slice: 12; suffit, mais au moins ça permet de faire la découpe de l'image qui n'est pas forcément simple à faire sans voir le résultat ok )

Au niveau compatibilité on est sur du 2012-2013, je pense qu'on peut considérer qu'avoir un navigateur qui ne supporte pas cette fonction est de la faute du client et pas du développeur ^^
Attention ce n'est pas compatible avec IE < 11...
Tout ça selon la doc MDN, à lire si ça vous intéresse fleur

Bonne journée

Message envoyé via la réponse rapide par: @chattigre
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 8 Sep 2021 - 15:57

Re,

il est vrai que la syntaxe est quelque peu complexe sur la compréhension,
mais bon le résultat est là ok .

Attention ce n'est pas compatible avec IE < 11...

Tiens donc, ce n'est pas nouveau..

Il existe encore ce truc de la préhistoire lOL .



Message envoyé via la réponse rapide par: @Milouze14
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Jeu 9 Sep 2021 - 8:37

Bonjour un très grand merci phil ,chattigre  par contre sa me fait un trais sa me donne pas l'effet de ma texture ou je modifie la largeur ? 
Très belle journée et encore merci Mercibis Mercibis Mercibis Mercibis
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 9 Sep 2021 - 9:08

@soleda ,
Coucou Chantal il faut augmenter la valeur 6 raisonnablement (16 admettons) ici :
Code:
 border-image-width: 6px;

et ajouter un padding pour corriger l'espace réduit:


Le style corrigé:

Code:
      /*CONTOUR CATEGORIES*/
        .M14_cat
        {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
        margin-top: 10px;
        border-image-slice: 12;
      border-image-width: 16px;
      border-image-outset: 0px;
      border-image-repeat: repeat;
      border-image-source: url("https://www.zupimages.net/up/21/36/ps6w.jpg");
        border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -webkit-border-radius: 10px;
        -htm-border-radius: 10px;
        box-shadow: 0px 0px 4px# #000000;
        -moz-box-shadow: 0px 0px 4px#000000;
        -o-box-shadow: 0px 0px 4px# #000000;
        -webkit-box-shadow: 0px 0px 4px#000000;
        -htm-box-shadow: 0px 0px 4px #000000;
padding: 16px;
        }
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Jeu 9 Sep 2021 - 9:49

Bonjour  Philippe , merci beaucoup mais je viens d'essayer et franchement ça fait trop énorme, en plus à chaque fois que je fais des modifications j'ai des sueurs froides , lOL je ne sais pas comment vous faites pour ne pas avoir peur avec tous ses codes, bon c 'est pas grave j'ai laissé comme le premier code que j'ai pris.

Et je dis vraiment un très grand merci à ce formidable forum ainsi  ainsi qu'à toi cher Philippe.

Très bonne journée. Mercibis Mercibis fr4

Milouze14 aime ce message

Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Jeu 9 Sep 2021 - 15:00

@soleda ,
pas de soucis ma chère Chantal, c'est une question d'habitude pour les codes ok .



Message envoyé via la réponse rapide par: @Milouze14
soleda
soleda
https://www.tutorielgraphismepfs.com/

Messagesoleda Ven 10 Sep 2021 - 7:50

Bonjour Philippe et je te redis encore un grand merci désolé j'ai oublié de fermer le sujet je le fais tout de suite. Mercibis
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Ven 10 Sep 2021 - 9:11

Coucou Chantal,
de rien chère amie ok .


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil



Message envoyé via la réponse rapide par: @Milouze14

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum