#7
Page 1 sur 1
#7
Ah que coucou, vous ! :hello:
C'est encore moi, avec - encore une fois - un petit code. Tout simple. :perv: J'ajouterais probablement des versions plus tard (si vous avez des envies / idées, n'hésitez d'ailleurs pas à me mpotter !) Pour l'instant, je vous offres deux versions, avec icons (aka des images carré, même taille pour la hauteur et la largeur) + une autre avec un grand gif, réclamé par Hayes. Évidemment, vous connaissez déjà le refrain : merci de laisser le crédit au bas du codage.
+ Comme toujours, tout est modifiable. :vivivi:
☛ Plus d'infos :
▪ Les images se positionneront automatiquement à une taille précise. (Version A = 80px / Version B = 100px / Version C = 420px / Version D & E = 120px) Mais si vous souhaitez modifier la taille des images, il suffit de modifier la valeur « width:80px » à la toute fin du code < style >.▪ Modifier les couleurs ...
- Code:
<style>.beA{width:80px;padding:2px;margin:2px;margin-bottom:7px;border:1px solid #45607B} .beB{width:80px;padding:2px;margin:2px;border:1px solid #4A575D} </style>
+ Le cadre des images n'est pas de la même couleur, pour vous y retrouvez, c'est tout simple ! Le premier code dans < style > est celui de a première image à gauche. Ainsi, le second compte celui dessous (+ celui de droite, pour la version A.) Il s'agit de la couleur suivant le « border ». N'hésitez pas à en changer. :minicoeur:
+ Le titre et la barre coloré à côté (tout comme le crédit en bas) se trouve dans la balise < fieldset >.
Pour modifier la ligne (bleu sur la version A, par exemple) il suffit de changer la couleur qui se trouve dans le < fieldset > dans le « border-top:5px solid #B40D0D ». Pour modifier la couleur du titre, il suffit de modifier la couleur se trouvant entre < legend >, dans le < div > suivant.
++ Si vous souhaitez bouger le titre au centre, il faut modifier la valeur « right » dans la balise < legend >, pour y mettre « center » ou tout simplement virer entièrement le « align="" » pour que tout se positionne par défaut à gauche.▪ Si vous avez besoin d'aide pour modifier le code, n'hésitez pas à me mpotter.
- Code:
<legend align="right">
Pour voir le code, il suffit d'un petit merci. :yes:
✘ Signature n°1
✘ Signature n°2
✘ Signature n°3
✘ RP n°1
✘ RP n°2
✘ RP n°3
✘ RP n°4
✘ RP n°5
✘ RP n°6
Version A :
- Code:
<center><table><tr><td valign="top"><img src="URL IMG #1A" class="bdA">
<img src="URL IMG #2A" class="bdB"> </td><td valign="top"><img src="URL IMG #1B" class="bdB">
<fieldset style="width:420px;border-top:5px solid #45607B;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="right"><div style="font-variant:small-caps; text-transform:lowercase; font-size:18px; font-family:calibri; letter-spacing:3px;color:#45607B"> TITRE EN GRAND ICI </div></legend><div style="font-family:calibri;font-size:11px;text-transform:lowercase;font-variant:small-caps;line-height:85%;width:420px;text-align:justify;margin-bottom:3px;color:#6D554A"> CITATION LONGUE (+PETIT) ICI. </div><div style="font-size:14px; font-family:calibri; text-align:justify; width:420px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam.
</div></fieldset><fieldset style="width:420px;margin-top:-5px;border-top:3px solid #6D554A;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="left"><div style="font-variant:small-caps; text-transform: lowercase; font-size:11px; font-family:calibri; letter-spacing:3px;color:#6D554A"> code by bat'phanie</div></legend></fieldset></td></tr></table></center><style>.bdA{width:70px;padding:2px;margin:2px;margin-bottom:7px;border:1px solid #45607B} .bdB{width:70px;padding:2px;margin:2px;border:1px solid #6D554A} </style>
Version B :
Image : Hera + Minimalism & Cupid & Psyche In Roman by Mary
- Code:
<center><table><tr><td valign="top"><img src="URL IMG #1A" class="cyA">
<img src="URL IMG #2A" class="cyB">
<img src="URL IMG #3A" class="cyA"> </td><td valign="top"><fieldset style="width:420px;border-top:5px solid #AD1B22;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="right"><div style="font-variant:small-caps; text-transform:lowercase; font-size:18px; font-family:calibri; letter-spacing:3px;color:#AD1B22"> TITRE EN GRAND ICI </div></legend><div style="font-family:calibri;font-size:11px;text-transform:lowercase;font-variant:small-caps;line-height:85%;width:420px;text-align:justify;margin-bottom:3px;color:#897572"> CITATION LONGUE (+PETIT) ICI. </div><div style="font-size:14px; font-family:calibri; text-align:justify; width:420px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam.
</div></fieldset><fieldset style="width:420px;margin-top:-5px;border-top:3px solid #897572;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="left"><div style="font-variant:small-caps; text-transform: lowercase; font-size:11px; font-family:calibri; letter-spacing:3px;color:#897572"> code by bat'phanie</div></legend></fieldset></td></tr></table></center><style>.cyA{width:70px;padding:2px;margin:2px;border:1px solid #897572} .cyB{width:70px;padding:2px;margin:2px;border:1px solid #a89997} </style>
Version C : (à la demande de @Hayes :minicoeur:)
- Code:
<center><img src="URL IMG" style="width:420px;padding:2px;margin:2px;border:1px solid #6D554A;margin-left:30px">
<fieldset style="width:424px;border-top:5px solid #9B7566;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;margin-left:30px"><legend align="right"><div style="font-variant:small-caps; text-transform:lowercase; font-size:18px; font-family:calibri; letter-spacing:3px;color:#3F4147"> TITRE EN GRAND ICI </div></legend><div style="font-family:calibri;font-size:11px;text-transform:lowercase;font-variant:small-caps;line-height:85%;width:420px;text-align:justify;margin-bottom:3px;color:#727684"> CITATION LONGUE (+PETIT) ICI. </div><div style="font-size:14px; font-family:calibri; text-align:justify; width:424px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam.
</div></fieldset><fieldset style="width:424px;margin-top:-5px;border-top:3px solid #3F4147;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;margin-left:30px"><legend align="left"><div style="font-variant:small-caps; text-transform: lowercase; font-size:11px; font-family:calibri; letter-spacing:3px;color:#9B7566"> code by bat'phanie</div></legend></fieldset></center>
Version D :
Images : Have you ever asked yourself by Aly
- Code:
<center><table><tr><td valign="top"><img src="URL IMG #1A" class="ddA"></td><td valign="top"><img src="URL IMG #1B" class="ddB">
<fieldset style="width:400px;border-top:5px solid #391D1D;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="right"><div style="font-variant:small-caps; text-transform:lowercase; font-size:18px; font-family:calibri; letter-spacing:3px;color:#391D1D"> TITRE EN GRAND ICI </div></legend><div style="font-family:calibri;font-size:11px;text-transform:lowercase;font-variant:small-caps;line-height:85%;width:400px;text-align:justify;margin-bottom:3px;color:#505050"> CITATION LONGUE (+PETIT) ICI. </div><div style="font-size:14px; font-family:calibri; text-align:justify; width:400px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam.
</div></fieldset><fieldset style="width:400px;margin-top:-5px;border-top:3px solid #505050;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="left"><div style="font-variant:small-caps; text-transform: lowercase; font-size:11px; font-family:calibri; letter-spacing:3px;color:#505050"> code by bat'phanie</div></legend></fieldset></td></tr></table></center><style>.ddA{width:120px;padding:2px;margin:2px;border:1px solid #391D1D} .ddB{width:120px;padding:2px;margin:2px;border:1px solid #505050} </style>
Version E :
Image : Chase Stein by Ashleigh
- Code:
<center><table><tr><td valign="top"><img src="URL IMG" style="width:120px;padding:2px;margin:2px;border:1px solid #2d5484"></td>
<td><fieldset style="width:400px;border-top:5px solid #6e7a21;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="right"><div style="font-variant:small-caps; text-transform:lowercase; font-size:18px; font-family:calibri; letter-spacing:3px;color:#2d5484"> TITRE EN GRAND ICI </div></legend><div style="font-family:calibri;font-size:11px;text-transform:lowercase;font-variant:small-caps;line-height:85%;width:400px;text-align:justify;margin-bottom:3px;color:#2d5484"> CITATION LONGUE (+PETIT) ICI. </div><div style="font-size:14px; font-family:calibri; text-align:justify; width:400px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis, odio id facilisis ullamcorper, eros risus rhoncus ipsum, nec hendrerit arcu orci eu enim. Nam ultrices purus eget erat viverra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed aliquam dictum viverra. Nulla eget neque vitae lacus pretium rhoncus nec et ipsum. Aliquam ornare faucibus nunc, quis commodo erat lacinia vitae. Suspendisse porta malesuada orci nec aliquam. Donec suscipit elit erat, aliquam varius nulla dictum ut. Cras eu nisl ac mauris facilisis varius sit amet et est. Pellentesque in ligula id turpis adipiscing dignissim. Suspendisse potenti. Donec euismod elit eu interdum lobortis. Mauris sollicitudin accumsan eros. Nulla a felis interdum, volutpat lectus vel, viverra quam.
</div></fieldset><fieldset style="width:400px;margin-top:-5px;border-top:3px solid #6e7a21;border-left:0px;border-right:0px;border-bottom:0px;padding-left:1px;padding-right:1px;"><legend align="left"><div style="font-variant:small-caps; text-transform: lowercase; font-size:11px; font-family:calibri; letter-spacing:3px;color:#6e7a21"> code by bat'phanie</div></legend></fieldset></td></tr></table></center>
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|