Na.E.L. JDR en audioconférence
Bienvenue à toi, ici l'accueil est bon, les parties animées et la taverne bien agencée, pour les nouveaux lire les sujets du forum en commençant par le haut afin d'être bien guidé et informé.

Notre communauté de GM/meneurs de jeu et de joueurs(es) vous accueil volontiers, venez nous causer via Discord ou teamspeak3 (a droite de votre écran), on viendra vous accueillir. En dernier recours si besoin, envoyez un message écrit d'invitation puis appel audio à " meneleagant " (pseudo skype) et on vous répondra !

Rejoignez le forum, c’est rapide et facile

Na.E.L. JDR en audioconférence
Bienvenue à toi, ici l'accueil est bon, les parties animées et la taverne bien agencée, pour les nouveaux lire les sujets du forum en commençant par le haut afin d'être bien guidé et informé.

Notre communauté de GM/meneurs de jeu et de joueurs(es) vous accueil volontiers, venez nous causer via Discord ou teamspeak3 (a droite de votre écran), on viendra vous accueillir. En dernier recours si besoin, envoyez un message écrit d'invitation puis appel audio à " meneleagant " (pseudo skype) et on vous répondra !
Na.E.L. JDR en audioconférence
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -50%
-50% Baskets Nike Air Huarache
Voir le deal
64.99 €

Astuce Roll20 mise en page de votre character sheet perso partie CSS

Aller en bas

Astuce Roll20 mise en page de votre character sheet perso partie CSS Empty Astuce Roll20 mise en page de votre character sheet perso partie CSS

Message par Admin Ven 13 Jan - 2:12

Par Capitaine red

Vous en avez assez de vos feuille toute perso toute moche? Vous les voulez aussi belle ou presque que celle que vosu trouver en ligne?Voici quelque petite astuce pour la mise en page (utilisation de la partie CSS du character sheet de Roll20. (je rappels quand même que cette option n'est accecible qu'au compte payant)

Le CSS ne sert qu'a simplifié la partie Html en automatisant la mise en page. Il est donc impératif de respecter quelque règle coté Html pour que la mise en page s'applique.

explication du fonctionnement:
div.sheet-XXX  ---> div (nom de l'objet qui sera concerner par la mise en page) .sheet- (code de référence roll20. obligatoire sinon rien ne marche) XXX (nom de class de l'objet, que vous lui avait attribué dans le html ex:


En dessous, quelque option déja implanté et prête en utilisation. (juste les quelque paramètre genre taille, couleur et autre a utiliser. Je vous suggère de rien supprimé et de le laisser en entier tel quel. arranger juste les quelques option comme vous l'entendez.

pour les Div:

Agrandir cette image

https://i.servimg.com/u/f68/11/43/16/65/option10.jpg

le code Css:
Code:SÉLECTIONNER LE CONTENU
div.sheet-XXX
{
   display: table; /*utilisation de la div en mode tableau. utiliser table pour la div générale du tableau, puis table-row pour les ligne, et table-cell pour les cellules*/
width:381px; /*taille de la div. 2 type de taille possible px pour pixel, % pour pourcentage*/
   height:93px; /*hauteur de la div. 2 type de taille possible px pour pixel, % pour pourcentage*/
background-color: black; /*couleur de fond*/
border-width: 1px; /*epaisseur de la bordure (none si pas de bordure)*/
   border-style: solid; /*type de bordure petit point (dotted), petit trait (dashed), trait (solid), double (double), 3D interieur (inset), 3D extérieur (outset)*/
   border-color: black; /*couleur de la bordure*/
padding: 0px 0px 0px 0px; /*décalage du contenue du texte a l'intérieur d'objet  (dessus, gauche, bas, droite) */
margin: 0px 0px 0px 0px; /*décalage de l'objet  (dessus, gauche, bas, droite) */
font-weight: bold; /*texte en gras (bold), normal (normal)*/
font-style: normal; /*texte en italic (italic), normal (normal), oblique (oblique)*/
text-decoration: blink; /*divers effet blink (clignotant -- ne fonctionne pas sous chrome et IE), souligné (underline), barré (line-through), ligne au dessus (overline), normal (normal)*/
   font-size: 30px; /*taille du texte*/
   text-align: center; /*alignement du texte (left, right, center)*/
   font-family: "cursive", Cursive; /*type du texte*/
   color:green; /*couleur du texte*/
}
Pour les input:

Agrandir cette image
https://i.servimg.com/u/f68/11/43/16/65/option11.jpg

le code css:
Code:SÉLECTIONNER LE CONTENU
input.sheet-XXX
{
   width:381px; /*taille de l'objet. 2 type de taille possible px pour pixel, % pour pourcentage*/
   height:93px; /*hauteur de l'objet. 2 type de taille possible px pour pixel, % pour pourcentage*/
background-color: black; /*couleur de fond*/
border-width: 1px; /*epaisseur de la bordure (none si pas de bordure)*/
   border-style: solid; /*type de bordure petit point (dotted), petit trait (dashed), trait (solid), double (double), 3D interieur (inset), 3D extérieur (outset)*/
   border-color: black; /*couleur de la bordure*/
border-radius:15px; /*arrondis les bords de l'objet*/
padding: 0px 0px 0px 0px; /*décalage du contenue du texte a l'intérieur de l'objet  (dessus, gauche, bas, droite) */
margin: 0px 0px 0px 0px; /*décalage de l'objet  (dessus, gauche, bas, droite) */
font-weight: bold; /*texte en gras (bold), normal (normal)*/
font-style: normal; /*texte en italic (italic), normal (normal), oblique (oblique)*/
text-decoration: blink; /*divers effet blink (clignotant -- ne fonctionne pas sous chrome et IE), souligné (underline), barré (line-through), ligne au dessus (overline), normal (normal)*/
   font-size: 30px; /*taille du texte*/
   text-align: center; /*alignement du texte (left, right, center)*/
   font-family: "cursive", Cursive; /*type du texte*/
   color:green; /*couleur du texte*/
}
Pour les select:

Agrandir cette image
https://i.servimg.com/u/f68/11/43/16/65/option12.jpg

le code css:
Code:SÉLECTIONNER LE CONTENU
select.sheet-XXX
{
   width:381px; /*taille de l'objet. 2 type de taille possible px pour pixel, % pour pourcentage*/
   height:93px; /*hauteur de l'objet. 2 type de taille possible px pour pixel, % pour pourcentage*/
background-color: black; /*couleur de fond*/
border-width: 1px; /*epaisseur de la bordure (none si pas de bordure)*/
   border-style: solid; /*type de bordure petit point (dotted), petit trait (dashed), trait (solid), double (double), 3D interieur (inset), 3D extérieur (outset)*/
   border-color: black; /*couleur de la bordure*/
border-radius:15px; /*arrondis les bords de l'objet*/
padding: 1px 0px 0px 0px; /*décalage du contenue du texte a l'intérieur de l'objet  (dessus, gauche, bas, droite) !! les select ne sont de base pas aligner a la même hauteur que les input, laisser toujours padding: 1px*/
margin: 0px 0px 0px 0px; /*décalage de l'objet  (dessus, gauche, bas, droite) */
font-weight: bold; /*texte en gras (bold), normal (normal)*/
font-style: normal; /*texte en italic (italic), normal (normal), oblique (oblique)*/
text-decoration: blink; /*divers effet blink (clignotant -- ne fonctionne pas sous chrome et IE), souligné (underline), barré (line-through), ligne au dessus (overline), normal (normal)*/
   font-size: 30px; /*taille du texte*/
   text-align: center; /*alignement du texte (left, right, center)*/
   font-family: "cursive", Cursive; /*type du texte*/
   color:green; /*couleur du texte*/
}

Je rappels aussi que régulièrement je suis sur le mumble de Team-naheulbeuk section jeu de rôle/GM CapitaineRed/Atelier Roll20 pour  conseil et autre afin de vous aidez a concevoir vos propre feuille de personnage. (Je tiens a préciser, que je ne suis pas informaticien, et encore moins programmeur, et que par conséquent, il se peux que je n'ai pas réponse a vos question.)

Admin
Admin

Messages : 43
Date d'inscription : 30/08/2014

Feuille de personnage
Nom du personnage: Test fiche

https://nael.forumsrpg.com

Revenir en haut Aller en bas

Revenir en haut

- Sujets similaires

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