Apparence de la balise code

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 le 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
****

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' le 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 !

Feuilla'
# Tropactif #

Messages : 1388
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 le Sam 26 Mar 2016 - 17:54

Bonjour Feuilla Smile

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 Smile

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



Merci à toi!

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 le Lun 28 Mar 2016 - 11:40

Bonjour Smile

Up

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 le Mar 29 Mar 2016 - 17:37

Up

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 le Jeu 31 Mar 2016 - 10:48

Up

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 le Ven 1 Avr 2016 - 12:37

Bonjour,

Une petite aide s'il vous plait Smile

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 le Sam 2 Avr 2016 - 13:02

Bonjour,

Une petite aide s'il vous plait Smile

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 le Dim 3 Avr 2016 - 16:30

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

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 le Lun 4 Avr 2016 - 17:32

Bonjour, un peu d'aide svp?

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 le Mar 5 Avr 2016 - 20:42

Bonsoir, toujours personne pour m'aider?

Merci d'avance!

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 le Jeu 7 Avr 2016 - 9:10

Bonjour, up..

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' le 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 !

Feuilla'
# Tropactif #

Messages : 1388
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 le Ven 8 Avr 2016 - 18:13

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

Je vous laisse voir le rendu :



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

Merci à vous! Smile

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 le Dim 10 Avr 2016 - 19:35

Bonsoir Smile

Up

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 le Lun 11 Avr 2016 - 20:33

Bonsoir Smile

Up

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 le Mer 13 Avr 2016 - 17:04

Bonjour Smile

Up

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 le 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
+ Hyperactif +

Messages : 4340
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 le Ven 15 Avr 2016 - 13:58

Bonjour,

Et merci pour l'astuce Smile



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
****

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 le Ven 15 Avr 2016 - 14:06


MlleAlys
+ Hyperactif +

Messages : 4340
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 le 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 :



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
****

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 le 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
+ Hyperactif +

Messages : 4340
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 le Ven 15 Avr 2016 - 15:18



J'en suis la Smile

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

Merci Smile

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 le 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
+ Hyperactif +

Messages : 4340
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 le Ven 15 Avr 2016 - 15:47

Super!

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

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 le 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
+ Hyperactif +

Messages : 4340
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 le 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"?



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
****

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 le 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
+ Hyperactif +

Messages : 4340
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 le Ven 15 Avr 2016 - 17:10

Super, merci Smile

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



Merci beaucoup

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 le 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
+ Hyperactif +

Messages : 4340
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


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