Astuce Roll20 mise en page de votre character sheet perso partie CSS
Na.E.L. JDR en audioconférence :: __________________________________Technique et Logiciels :: Outils indispensables
Page 1 sur 1
Astuce Roll20 mise en page de votre character sheet perso partie CSS
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.)
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.)
Sujets similaires
» ROLL20 pour les nuls et les autres...
» Les tables de jeu virtuelles ROLL20, rolisteam et autres...
» Partie Naheulbeuk IRL Montpellier
» MJ Panda propose chaque mercredi et samedi 13h45 partie initiation sans RDV
» Les tables de jeu virtuelles ROLL20, rolisteam et autres...
» Partie Naheulbeuk IRL Montpellier
» MJ Panda propose chaque mercredi et samedi 13h45 partie initiation sans RDV
Na.E.L. JDR en audioconférence :: __________________________________Technique et Logiciels :: Outils indispensables
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|