Membres connectés récemment
[PHPBB2] Bonjour modifier les contour catégorie
2 participants
Page 1 sur 1 • Partagez
- 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
Pour les contours
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
Pour les contours
- 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;
}
Hello Chantal,
tu ne me dérange pas chère amie, sinon l'entraide serait fermée .
Bon mettre une image pour une bordure, faut oublier .
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:
Penser a cliquer sur le bouton
Si tu désires supprimer les pointillés:
Dans ta feuille de style tu as ceci:
Supprimes cette ligne:
Message envoyé via la réponse rapide par: @Milouze14
tu ne me dérange pas chère amie, sinon l'entraide serait fermée .
Bon mettre une image pour une bordure, faut oublier .
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
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
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 ?
Milles merci
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
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:
Remplacer :
Par ta couleur:
Ce qui donnera:
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
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
- InvitéInvité
Milouze14 a écrit:Bon mettre une image pour une bordure, faut oublier .
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 ?
Bonne journée !
Message envoyé via la réponse rapide par: @chattigre
@chattigre et @soleda ,
alors effectivement, je ne connaissais pas ce genre de style!!
Merci beaucoup cher ami .
Chantal,
remplaces donc:
Par ceci:
Message envoyé via la réponse rapide par: @Milouze14
alors effectivement, je ne connaissais pas ce genre de style!!
Merci beaucoup cher ami .
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
- InvitéInvité
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 )
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
Bonne journée
Message envoyé via la réponse rapide par: @chattigre
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 )
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
Bonne journée
Message envoyé via la réponse rapide par: @chattigre
Re,
il est vrai que la syntaxe est quelque peu complexe sur la compréhension,
mais bon le résultat est là .
Tiens donc, ce n'est pas nouveau..
Il existe encore ce truc de la préhistoire .
Message envoyé via la réponse rapide par: @Milouze14
il est vrai que la syntaxe est quelque peu complexe sur la compréhension,
mais bon le résultat est là .
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 .
Message envoyé via la réponse rapide par: @Milouze14
@soleda ,
Coucou Chantal il faut augmenter la valeur 6 raisonnablement (16 admettons) ici :
et ajouter un padding pour corriger l'espace réduit:
Le style corrigé:
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;
}
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 , 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.
Et je dis vraiment un très grand merci à ce formidable forum ainsi ainsi qu'à toi cher Philippe.
Très bonne journée.
Milouze14 aime ce message
@soleda ,
pas de soucis ma chère Chantal, c'est une question d'habitude pour les codes .
Message envoyé via la réponse rapide par: @Milouze14
pas de soucis ma chère Chantal, c'est une question d'habitude pour les codes .
Message envoyé via la réponse rapide par: @Milouze14
Coucou Chantal,
de rien chère amie .
Message envoyé via la réponse rapide par: @Milouze14
de rien chère amie .
Hello
Sujet résolu et déplacé dans le forum adéquate
A bientôt pour une prochaine demande
Sujet résolu et déplacé dans le forum adéquate
A bientôt pour une prochaine demande
Message envoyé via la réponse rapide par: @Milouze14
Sujets similaires
Créer un compte ou se connecter pour répondre
Vous devez être membre pour répondre.
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum