Cadre Vert des Modérateurs

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

Résolu Cadre Vert des Modérateurs

Message par julie10902 le Ven 25 Nov 2016 - 17:30

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Safari, Autre
Personnes concernées par le problème : Tous les Utilisateurs
Lien du forum : http://futurhabbo-marinette.forumactif.org

Description du problème

Bonjour,

J'ai eu une réponse par Chacha sur la réponse de Comment faire le cadre des modérateurs mais elle m'a envoyé sur une page de l'ancien code.

J'ai essayé de le trafiquer pour essayer de faire le même que vous ^^, mais j'y arrive pas :c

Alors voilà, j'aimerais savoir si il est possible de l'avoir ou pas.

Merci,

Très Cordialement,

julie10902


Dernière édition par julie10902 le Jeu 8 Déc 2016 - 20:31, édité 1 fois
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Sam 26 Nov 2016 - 17:36

UP, pas eu de réponse

@Chacha, @Tech, @Walt, @Leeloo
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Dim 27 Nov 2016 - 18:07

Up Up UP

@Chacha
@Tech
@Walt
@Leeloo

Répondez s'il vous plaît Wink
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par Tech le Lun 28 Nov 2016 - 13:32

Bonjour,

Pourriez-vous nous fournir vos codes HTML et CSS actuels ainsi que les effets désirés et manquants ?

Cordialement.
avatar

Tech
Modéractif
Modéractif

Masculin
Messages : 21723
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 28 Nov 2016 - 18:03

Bonjour et merci beaucoup (énormément) de votre réponse @Tech Wink

Alors en fait j'ai l'ancien cadre des modérateurs (de ForumActif) mais je souhaiterais avoir le nouveau code ^^

Alors voici des codes et images :

Cadre ancien (seulement image car le code, j'en donne un un peu modifié)

Image Ancien Cadre:

Nouveau Cadre (Attention, c'est le code modifié mais j'arrive pas à faire la même couleur et forme que vous)

Image du Cadre désiré :
Image Cadre désiré:

Code modifié par moi pour essayer d'obtenir le cadre de l'image ci dessus

Code CSS
Code:
.cadre1 {background: green; border: 3px solid green; color: white; font-weight: bold; width: 80%; margin: auto;}
Code HTML
Code:
[table class="cadre1"][tr][td]TEXTE[/td]
[/tr]
[/table]

Image du cadre obtenu (loin du résultat ^^)
Cadre obtenu:
Merci de votre nouvelle réponse Wink

Très Cordialement, julie10902

PS : En soit, j'aimerais genre la même forme, même couleur, le même cadre ^^


Dernière édition par julie10902 le Mer 30 Nov 2016 - 20:39, édité 1 fois
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Mar 29 Nov 2016 - 17:41

UP @Tech

Désolé je UP 20 minutes avant 24 heures ^^
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Mer 30 Nov 2016 - 20:37

UP ^^

@Tech
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Jeu 1 Déc 2016 - 18:57

Up

@Tech
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par Tech le Ven 2 Déc 2016 - 17:40

Bonsoir,

Vous donner le code tout fait serait inutile. Je vais donc vous donner les informations pour reproduire vous-même l'effet voulu.

- Pour arrondir les angles, il faut utiliser la propriété border-radius. Voici les informations concernant cette balise : https://developer.mozilla.org/fr/docs/Web/CSS/border-radius

- Pour décaler la trame vers la gauche, il faut utiliser la propriété margin, et plus précisément margin-left. Les nombres négatifs sont nécessaires dans ce cas. Plus d'infos : https://developer.mozilla.org/fr/docs/Web/CSS/margin et https://developer.mozilla.org/fr/docs/Web/CSS/margin-left

- Pour créer l'effet en bas à gauche qui "revient", c'est plus compliqué. Il faut utiliser la notation ::before
Je vous donne le code de cette partie :
Code:
.cadre1::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}
Plus d'info ici : https://developer.mozilla.org/fr/docs/Web/CSS/::before

N'hésitez pas à revenir vers moi en cas de problèmes ou de questions.

Cordialement.
avatar

Tech
Modéractif
Modéractif

Masculin
Messages : 21723
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Ven 2 Déc 2016 - 19:05

D'accord merci mais ça je le remplace dans le code que j'ai déja ?

Et aussi, si on veut que les deux bords rond de droites et pas tous?

Sinon merci de la réponse @Tech
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par Tech le Ven 2 Déc 2016 - 20:57

Vous pouvez les rajouter à votre code actuel. Concernant votre question concernant les coins droits, c'est clairement marqué dans la page que je vous ai fournie.
Code:
/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite  */
/* 4. coin en bas à gauche  */
border-radius: 1px 0 3px 4px;
avatar

Tech
Modéractif
Modéractif

Masculin
Messages : 21723
Inscrit(e) le : 01/12/2007

http://forum.forumactif.com
Tech a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Ven 2 Déc 2016 - 21:34

Ah d'accord merci beaucoup.

Je vais le réaliser sur le forum et mettrai résolu si j'y suis parvenu

Sinon merci encore de votre réponse Wink
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Ven 2 Déc 2016 - 22:04

Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Nouveau Code : 
Nouveau code + indications:

Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 80%; margin-left: 0;}
.cadre1::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}
J'ai enlevé le Bold dans le font-weight, le margin-left décale mon texte mais pas le cadre alors du coup j'aimerais savoir comment décaler le cadre Wink donc du coup je l'ai enlevé (mis à 0) et j'ai rien touché au ::before mais il fais des figures bizarres sur le forum (je sais que c'est le ::before car je l'ai modifié [les nombres] et ça bougeait les formes bizarres).

Le lien ou je l'ai mis effectif : Lien

Voilà, pour résumer, il me manque seulement le code (margin-left) pour mettre le cadre à gauche (et non le texte) et le ::before qui ne fonctionne pas.


Dernière édition par julie10902 le Dim 4 Déc 2016 - 11:53, édité 2 fois
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Sam 3 Déc 2016 - 19:24

UP
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par MasDan le Sam 3 Déc 2016 - 22:55

Bonjour julie10902,

De votre lien


en supprimant à votre css le margin-left de la classe cadre1 on obtient ceci


Est-ce le résultat souhaité?
avatar

MasDan
Aidactif
Aidactif

Masculin
Messages : 1116
Inscrit(e) le : 24/05/2011

http://projetAumMdn.forumactif.com
MasDan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Sam 3 Déc 2016 - 23:00

Merci de vos recherches (je ne sais pas comment vous avez modifié mon forum sans le modifier ^^) mais, c’est cela que je recherche (merci beaucoup) mais je recherche en plus le cadre qui "sort" du forum vers la gauche, et apparemment, c'était avec le margin-left mais non.

J'y comprends plus rien

Encore merci @MasDan
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Dim 4 Déc 2016 - 0:15

@julie10902 a écrit:Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Le lien ou je l'ai mis effectif : Lien

Édit : j'ai modifié les 2 codes avec les informations qu'il y a sur mon forum. Attention, je rajouterai un code demain prototype.
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Dim 4 Déc 2016 - 11:54

@julie10902 a écrit:Voilà j'ai refait le code et ça me  donne quelque chose de bizarre (attendu mais bizarre)

Le code :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}
::before {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 0 4px 7px 0;
    bottom: -7px;
    content: " ";
    display: block;
    height: 0;
    left: 6px;
    position: absolute;
    width: 0;
}

J'ai également essayé comme ça mais rien ne change ^^ :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: bold; width: 80%; margin-left: -10px;}::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}

Je viens d'essayer quelque chose de nouveau et le mettrai de main.

Nouveau Code :
Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: 3px solid #68B800; color: white; font-weight: ; width: 90%; margin-left: -10; margin-top: 10; position: relative;}
.cadre1::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}
J'ai enlevé le Bold dans le font-weight, le margin-left décale mon texte mais pas le cadre alors du coup j'aimerais savoir comment décaler le cadre Wink donc du coup je l'ai enlevé (mis à 0) et j'ai rien touché au ::before mais il fais des figures bizarres sur le forum (je sais que c'est le ::before car je l'ai modifié [les nombres] et ça bougeait les formes bizarres).


Le lien ou je l'ai mis effectif : Lien

Voilà, pour résumer, il me manque seulement le code (margin-left) pour mettre le cadre à gauche (et non le texte) et le ::before qui ne fonctionne pas.
Voilà le nouveau code Wink


Dernière édition par julie10902 le Dim 4 Déc 2016 - 12:52, édité 1 fois
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Dim 4 Déc 2016 - 12:42

J'ai compris, pour que le cadre revienne en arrière, il suffit de modifier le "overflow" du CSS général de base du forum dans le .content

Image:

En fait, vous cliquez sur Voir le CSS de base du forum puis vous faites CTRL+f puis tapez .content et vous allez au 8 puis vous voyez overflow et faut le mettre en "visible" au lieu de "hidden"

J'ai modifié ma page via le CTRL+MAJ+I et j'ai enlevé le hidden, puis le cadre s'est décalé, alors il faudrait que je sache comment modifier ce dossier ?
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 5 Déc 2016 - 12:43

UP @Tech
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par ZYVHK le Lun 5 Déc 2016 - 12:54

Hello o/
Vous souhaiteriez retirer définitivement ce overflow: hidden, c'est bien ça ?
avatar

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

http://www.twenty-one.eu/
ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 5 Déc 2016 - 17:27

Oui c'est en quelque sorte ça ^^
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 5 Déc 2016 - 18:02

Je viens de trafiquer un peu le code et j'ai réussi à faire à peu près la même chose.

Dîtes moi si le code est bon ou pas et le lien d'application du code est : Lien

Code:
.cadre1 {background: #68B800; border-radius: 0 10px 10px 0; border: ; color: white; font-weight: ; width: 55%; margin-left: -25; margin-top: 10; position: absolute;}
.cadre1::before {border-color: transparent green transparent transparent; border-style: solid; border-width: 0 4px 7px 0; bottom: -7px; content: " "; display: block; height: 0; left: 6px; position: absolute; width: 0;}
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Cadre Vert des Modérateurs

Message par ZYVHK le Lun 5 Déc 2016 - 18:27

Ça m'a l'air correct. Après, si vous voulez ajouter une image à gauche, il suffirait d'ajouter un peu de padding-left et un background-image sur ton cadre éventuellement. Tu peux également simplement mettre l'image tel quel avec un float.

Code:
<img src="lien de l'image" style="float: left;" />
avatar

ZYVHK
***

Masculin
Messages : 134
Inscrit(e) le : 05/03/2016

http://www.twenty-one.eu/
ZYVHK a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 5 Déc 2016 - 18:40

Ah d'accord merci, je vais voir tout de suite et je mettrai une réponse.

Sinon je suis très fière de moi car j'ai réussie à trouver quasi seule le code ^^

Merci beaucoup @Arcadia-forum Wink
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Lun 5 Déc 2016 - 19:04

Oui merci ça marche, manque plus qu'à changer la couleur du fond pour en faire plusieurs mais ça ça va être facile ^^

Je reviendrai vers vous en cas de problème avec ce cadre très spécial Wink

Merci beaucoup aux personnes qui m'auront aidés et à Tech.
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Cadre Vert des Modérateurs

Message par julie10902 le Jeu 8 Déc 2016 - 20:31

J'avais oublié de mettre ce sujet en résolu, excusez moi de cet oubli.  I don't want that
avatar

julie10902
****

Féminin
Messages : 215
Inscrit(e) le : 18/11/2016

http://thegameforum.forumactif.com
julie10902 a été remercié(e) par l'auteur de ce sujet.

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


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