Apparence de la balise code

3 participants

Page 1 sur 2 1, 2  Suivant

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

Résolu Apparence de la balise code

Message par Ancients Mer 23 Mar 2016 - 21:20

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 Smile

Merci


Dernière édition par Ancients le Sam 16 Avr 2016 - 17:53, édité 1 fois
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Feuilla' Sam 26 Mar 2016 - 12:40

Bonjour,
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;
}
Dans le premier bloc vous avez les couleurs modifiables, mais il ne faut pas trop toucher à la quatrième ligne, qui évite que le texte des balises codes soit collé aux bords.
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
Sinon vous pouvez donner le lien d'un sujet avec les balises code (visible aux invités) pour pouvoir tester les codes.
Bonne journée !
avatar

Feuilla'
Membre habitué

Messages : 1389
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Sam 26 Mar 2016 - 17:54

Bonjour Feuilla Smile

Le rendu n'est pas le même :

Apparence de la balise code Screen12

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 Smile

(pas pour copier mais simplement parce que c'est efficace et épuré donc pourquoi changer quand c'est bien Smile).

Apparence de la balise code Screen13

Merci à toi!
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Lun 28 Mar 2016 - 11:40

Bonjour Smile

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Mar 29 Mar 2016 - 17:37

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Jeu 31 Mar 2016 - 10:48

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 1 Avr 2016 - 12:37

Bonjour,

Une petite aide s'il vous plait Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Sam 2 Avr 2016 - 13:02

Bonjour,

Une petite aide s'il vous plait Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Dim 3 Avr 2016 - 16:30

Bonjour, toujours pas d'aide hélas..?
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Lun 4 Avr 2016 - 17:32

Bonjour, un peu d'aide svp?
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Mar 5 Avr 2016 - 20:42

Bonsoir, toujours personne pour m'aider?

Merci d'avance!
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Jeu 7 Avr 2016 - 9:10

Bonjour, up..
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Feuilla' Ven 8 Avr 2016 - 16:25

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 /!\). Wink
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). Smile

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 : Wink
Astuce Bouton sélectionner le contenu aux balises de code
Bonne journée !
avatar

Feuilla'
Membre habitué

Messages : 1389
Inscrit(e) le : 26/07/2015

Feuilla' a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 8 Avr 2016 - 18:13

Bonjour Feuilla' ! (vous m'avez presque manqué Smile )

Je vous laisse voir le rendu :

Apparence de la balise code Screen70

Voici le sujet de test : http://nsp-d3.forumofficiel.com/t7-qethehqethehqethtqe#162

Merci à vous! Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Dim 10 Avr 2016 - 19:35

Bonsoir Smile

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Lun 11 Avr 2016 - 20:33

Bonsoir Smile

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Mer 13 Avr 2016 - 17:04

Bonjour Smile

Up
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Jeu 14 Avr 2016 - 19:30

Bonjour,

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

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 13:58

Bonjour,

Et merci pour l'astuce Smile

Apparence de la balise code Screen73

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 Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 14:06

MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 14:38

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 :

Apparence de la balise code Screen74

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
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 15:08

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.
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 15:18

Apparence de la balise code Screen78

J'en suis la Smile

Est-ce possible de mettre l'image plus bas au niveau du code?

Merci Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 15:23

modifiez votre code ainsi :
Code:
.fa-paste:before, .fa-clipboard:before {
  content: "\f0ea";
  position: relative;
  top: 10px;
}
Réglez la valeur top à votre préférence.
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 15:47

Super!

Il ne reste qu'à supprimer "CODE:" Smile
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 15:56

Auriez vous un lien vers un code, un spoiler et une citation dans le même message svp ?
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 16:07

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"?

Apparence de la balise code Screen80

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
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 16:15

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à :
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;
}
et réglez la position de l'image
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par Ancients Ven 15 Avr 2016 - 17:10

Super, merci Smile

Une dernière chose, comment faire pour que ça prenne la taille (hauteur) du contenu?

Apparence de la balise code Screen82

Merci beaucoup
Ancients

Ancients
****

Masculin
Messages : 472
Inscrit(e) le : 27/02/2016

http://nsp-d3.forumofficiel.com/
Ancients a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Apparence de la balise code

Message par MlleAlys Ven 15 Avr 2016 - 17:17

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 :
Code:
dl.codebox code {
  max-height: none;
}
MlleAlys

MlleAlys
Membre actif

Messages : 5767
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Page 1 sur 2 1, 2  Suivant

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

- Sujets similaires

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