Apparence de la balise code
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2 • Partagez
Page 1 sur 2 • 1, 2
Apparence de la balise code
Détails techniques
Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :
- Voir l'image:
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://nsp-d3.forumofficiel.com/
Description du problème
Bonjour,J'aimerai que l'apparence du code soit la même que sur FA
Merci
Dernière édition par Ancients le Sam 16 Avr 2016 - 17:53, édité 1 fois
Re: Apparence de la balise code
Bonjour,
dans la Feuille de style CSS mettez ce code :
Les deux derniers blocs servent lorsque le texte est surligné avec le curseur, donc vous ne verrez l'effet que lorsque vous sélectionnerez du texte se trouvant dans les balises code.
Je n'ai pas rajouté les couleurs qui apparaissent lors de certains cas, par exemple la couleur jaune/doré après les guillemets/apostrophes (ça ferait peut-être copie) :
Bonne journée !
dans la Feuille de style CSS mettez ce code :
- Code:
div.cont_code {
color:#CCCCCC;
background-color:#000;
padding:3px;
}
.codebox b {display:none} /* Chasser le mot "Code :" */
.codebox.spoiler b {display:inline}
div.cont_code::-moz-selection {
text-shadow:2px 3px 1px black;
background-color:white;
color:#00F;
}
div.cont_code::selection {
text-shadow:2px 3px 1px black;
background-color:white;
color:#00F;
}
Les deux derniers blocs servent lorsque le texte est surligné avec le curseur, donc vous ne verrez l'effet que lorsque vous sélectionnerez du texte se trouvant dans les balises code.
Je n'ai pas rajouté les couleurs qui apparaissent lors de certains cas, par exemple la couleur jaune/doré après les guillemets/apostrophes (ça ferait peut-être copie) :
- Code:
test code pour voir l'apparence
Bonne journée !
Feuilla'- Membre habitué
- Messages : 1389
Inscrit(e) le : 26/07/2015
Re: Apparence de la balise code
Bonjour Feuilla
Le rendu n'est pas le même :
J'aimerai avoir ce rendu de la fenêtre code :
- les mêmes couleurs
- police
- taille police
- pas de cadre avec écrit "sélectionner" mais juste une icone
Enfin le même design
(pas pour copier mais simplement parce que c'est efficace et épuré donc pourquoi changer quand c'est bien ).
Merci à toi!
Le rendu n'est pas le même :
J'aimerai avoir ce rendu de la fenêtre code :
- les mêmes couleurs
- police
- taille police
- pas de cadre avec écrit "sélectionner" mais juste une icone
Enfin le même design
(pas pour copier mais simplement parce que c'est efficace et épuré donc pourquoi changer quand c'est bien ).
Merci à toi!
Re: Apparence de la balise code
Bonjour
Up
Up
Re: Apparence de la balise code
Bonjour,
Une petite aide s'il vous plait
Une petite aide s'il vous plait
Re: Apparence de la balise code
Bonjour,
Une petite aide s'il vous plait
Une petite aide s'il vous plait
Re: Apparence de la balise code
Bonjour, toujours pas d'aide hélas..?
Re: Apparence de la balise code
Bonjour, un peu d'aide svp?
Re: Apparence de la balise code
Bonsoir, toujours personne pour m'aider?
Merci d'avance!
Merci d'avance!
Re: Apparence de la balise code
Bonjour, up..
Re: Apparence de la balise code
Bonjour,
déjà juste dans la Gestion des couleurs vous avez "Police Code" et, dans les fonds, la couleur de fond des codes (/!\ attention, celle-ci s'applique à d'autres balises /!\).
Sinon mettez ce code dans la Feuille de style CSS :
L'apparence se rapprochera un peu plus de ce qu'il y a actuellement (au moins le fond et la couleur du texte, plus de vert).
Si ce n'est pas encore suffisant, il suffit d'un lien vers un sujet à code pour pouvoir tester rapidement.
Pour la sélection du code et l'icône, cette astuce l'explique :
Bouton sélectionner le contenu aux balises de code
Bonne journée !
déjà juste dans la Gestion des couleurs vous avez "Police Code" et, dans les fonds, la couleur de fond des codes (/!\ attention, celle-ci s'applique à d'autres balises /!\).
Sinon mettez ce code dans la Feuille de style CSS :
- Code:
dl.codebox {
background-color:black;
}
dl.codebox code {
color:#CCCCCC;
}
dl.codebox code::-moz-selection {
text-shadow:2px 3px 1px black;
background-color:#00F;
color:white;
}
dl.codebox code::selection {
text-shadow:2px 3px 1px black;
background-color:#00F;
color:white;
}
L'apparence se rapprochera un peu plus de ce qu'il y a actuellement (au moins le fond et la couleur du texte, plus de vert).
Si ce n'est pas encore suffisant, il suffit d'un lien vers un sujet à code pour pouvoir tester rapidement.
Pour la sélection du code et l'icône, cette astuce l'explique :
Bouton sélectionner le contenu aux balises de code
Bonne journée !
Feuilla'- Membre habitué
- Messages : 1389
Inscrit(e) le : 26/07/2015
Re: Apparence de la balise code
Bonjour Feuilla' ! (vous m'avez presque manqué )
Je vous laisse voir le rendu :
Voici le sujet de test : http://nsp-d3.forumofficiel.com/t7-qethehqethehqethtqe#162
Merci à vous!
Je vous laisse voir le rendu :
Voici le sujet de test : http://nsp-d3.forumofficiel.com/t7-qethehqethehqethtqe#162
Merci à vous!
Re: Apparence de la balise code
Bonsoir
Up
Up
Re: Apparence de la balise code
Bonsoir
Up
Up
Re: Apparence de la balise code
Bonjour
Up
Up
Re: Apparence de la balise code
Bonjour,
Pour supprimer la ligne "CODE :" ajoutez le code css suivant àvotre feuille de style :
Précisément, quelles sont les modification que vous souhaitez encore apporter ?
Pour supprimer la ligne "CODE :" ajoutez le code css suivant àvotre feuille de style :
- Code:
dl.codebox dt {
display: none;
}
Précisément, quelles sont les modification que vous souhaitez encore apporter ?
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
Bonjour,
Et merci pour l'astuce
Voici l'apparence de mon code désormais, il faudrait :
- ajouter les couleurs pour les classes / propriétés
- ajouter une image à droite pour "sélectionner le code"
Merci d'avance
Et merci pour l'astuce
Voici l'apparence de mon code désormais, il faudrait :
- ajouter les couleurs pour les classes / propriétés
- ajouter une image à droite pour "sélectionner le code"
Merci d'avance
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
Bonjour,
Ayant parcouru les tutoriels plusieurs fois je n'avais pas croisé ceux la mais d'autres similaires.
Pour la couleur c'est ok, pour le bouton sélectionner je l'avais déjà regardé par contre mais il y a quelques problèmes par rapport à celui-ci :
Tout d'abord je dois retirer le code suivant pour voir le bouton "sélectionner" mais je ne veux pas voir "CODE:"
Ma question était de mettre une image à la place de sélectionner.
Merci beaucoup
Ayant parcouru les tutoriels plusieurs fois je n'avais pas croisé ceux la mais d'autres similaires.
Pour la couleur c'est ok, pour le bouton sélectionner je l'avais déjà regardé par contre mais il y a quelques problèmes par rapport à celui-ci :
Tout d'abord je dois retirer le code suivant pour voir le bouton "sélectionner" mais je ne veux pas voir "CODE:"
- Code:
dl.codebox dt {
display: none;
}
Ma question était de mettre une image à la place de sélectionner.
Merci beaucoup
Re: Apparence de la balise code
Pour remplacer "sélectionner" par une image, dans le code javascript du tutoriel, à la fin, remplacez "Sélectionner" par le code html pour votre image.
On pourra ensuite tricher un peu pour ne pas voir le mot "code" : mettre le texte de la même couleur que le fond, une hauteur del igne de 0, supprimer la bordure, etc.
EDIT : par contre je me rend compte qu'i va falloir changer un peu le code sinon ça va effacer également le titre des psoilers, et ce n'est peut être pas souhaitable ! Je vous conseille d'avoir un message où apparaissent les trois cadres principaux : le code, la citation et le spoiler, afin de pouvoir surveiller facilement l'apparence des trois en même temps.
On pourra ensuite tricher un peu pour ne pas voir le mot "code" : mettre le texte de la même couleur que le fond, une hauteur del igne de 0, supprimer la bordure, etc.
EDIT : par contre je me rend compte qu'i va falloir changer un peu le code sinon ça va effacer également le titre des psoilers, et ce n'est peut être pas souhaitable ! Je vous conseille d'avoir un message où apparaissent les trois cadres principaux : le code, la citation et le spoiler, afin de pouvoir surveiller facilement l'apparence des trois en même temps.
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
J'en suis la
Est-ce possible de mettre l'image plus bas au niveau du code?
Merci
Re: Apparence de la balise code
modifiez votre code ainsi :
- Code:
.fa-paste:before, .fa-clipboard:before {
content: "\f0ea";
position: relative;
top: 10px;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
Super!
Il ne reste qu'à supprimer "CODE:"
Il ne reste qu'à supprimer "CODE:"
Re: Apparence de la balise code
Auriez vous un lien vers un code, un spoiler et une citation dans le même message svp ?
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
Voici un sujet avec tout ceci : http://nsp-d3.forumofficiel.com/t7p25-qethehqethehqethtqe#195
Par contre je viens de remarquer un petit bug :
Quelque chose dans ce code touche aussi aux icons de mon menu, est-ce possible de cibler plus précisément pour l'icon "sélectionner"?
Merci à vous
Par contre je viens de remarquer un petit bug :
Quelque chose dans ce code touche aussi aux icons de mon menu, est-ce possible de cibler plus précisément pour l'icon "sélectionner"?
- Code:
dl.codebox .fa.fa-clipboard {
color: #fff;
cursor: pointer;
float: right;
left: -20px;
position: relative;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome!important;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.fa-paste:before, .fa-clipboard:before {
content: "\f0ea";
position: relative;
top: 36px;
}
Merci à vous
Re: Apparence de la balise code
Le décalage ne vient pas du code que je viens de proposer, mais de la ligne line-height: 1!important; de ce code là :
Le tutoriel ne proposait pas la classe "fa fa-clipboard" mais "selectCode" pour le bouton de sélection, c'est votre choix de modifier les codes proposés, mais à vous également de avoir les classes que vous avez déjà utilisées ailleurs...
Pour supprimer "CODE" : ajoutez le code css suivant :
- Code:
.fa {
-webkit-font-smoothing: antialiased;
display: inline-block;
font-family: FontAwesome!important;
font-size: 14px!important;
font-style: normal!important;
font-variant: normal!important;
font-weight: normal!important;
line-height: 1!important;
text-rendering: auto;
}
Le tutoriel ne proposait pas la classe "fa fa-clipboard" mais "selectCode" pour le bouton de sélection, c'est votre choix de modifier les codes proposés, mais à vous également de avoir les classes que vous avez déjà utilisées ailleurs...
Pour supprimer "CODE" : ajoutez le code css suivant :
- Code:
dl.codebox dt {
line-height: 1;
color: #181713;
}
.codebox.spoiler dt {
line-height: normal;
color: #09B4FF;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Re: Apparence de la balise code
Super, merci
Une dernière chose, comment faire pour que ça prenne la taille (hauteur) du contenu?
Merci beaucoup
Une dernière chose, comment faire pour que ça prenne la taille (hauteur) du contenu?
Merci beaucoup
Re: Apparence de la balise code
je ne comprends pas la question ? vous ne souhaitez pas de barre défilante, mais que le bloc s'agrandisse ?
Pour annuler la hauteur maximale, ajoutez ce code dans votre feuille de style :
Pour annuler la hauteur maximale, ajoutez ce code dans votre feuille de style :
- Code:
dl.codebox code {
max-height: none;
}
MlleAlys- Membre actif
- Messages : 5767
Inscrit(e) le : 12/09/2012
Page 1 sur 2 • 1, 2
Sujets similaires
» Balise [code] [/code] : Avoir le texte « code » et « sélectionner le contenu » en bleu, plus gros ainsi qu’avoir la même couleur
» Balise [code][/code] : sélectionner le contenu
» Apparence de la balise code
» balise code
» Balise "code" Qui ne fonctionne pas
» Balise [code][/code] : sélectionner le contenu
» Apparence de la balise code
» balise code
» Balise "code" Qui ne fonctionne pas
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 2
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum