[FORUM] BBCode Avancé

Démarré par ionah, Août 19, 2016, 12:00:42 PM

« précédent - suivant »

ionah

j'ai installé un Paquet qui permet d'étendre les capacités du Forum en terme de BBCode, càd la possibilité de rendre vos messages sur le forum plus 'cosmétiques'

nom du paquet : BBCode with style, 1.5.1 | Copyright 2010-2015 by davidhs
vous pourrez trouver tous les détails que cette modifications apporte sur le forum SMF avec exemples et lignes de codes.

en résumé, le paquet permet d'utiliser les styles et classes CSS et les attributs HTML dans les BBC tags. les tags [ list ] [ table ] et [ img ] se retrouvent améliorés.

des tutoriels pour maîtriser le CSS ? easy >> https://www.w3schools.com/css/default.asp





ionah

comme pour bien exploiter la chose il faut quelques connaissances en CSS/HTML, je mets ici quelques exemples avec code.
pour tout message qui requiert un tant soit peu de mise en forme (articles, fan-fic, etc...), je pense que cela peut être utile.

[hr style="color: #594731; border: 2px inset #d9bb84"]
[hr style="color: #594731; border: 2px inset #d9bb84"]


[div style="border-top-width: thick; border-bottom-width: medium; border-top-style: dotted; border-bottom-style: double; border-top-color: #C00; border-bottom-color: #00C; font-size: 25px;font-style: italic; text-transform: capitalize; color: #60C; background-color: #CCC; text-align: center;"]
Lorem Ipsum[/div]


[div style="border-top-width: thick; border-bottom-width: medium; border-top-style: dotted; border-bottom-style: double; border-top-color: #C00; border-bottom-color: #00C; font-size: 25px;font-style: italic; text-transform: capitalize; color: #60C; background-color: #CCC; text-align: center;"]
Lorem Ipsum[/div]

[hr style="color: #594731; border: 2px inset #d9bb84"]

[div style="font-size: 14px; font-style: italic; text-align: center;"]
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
[/div]


[div style="font-size: 14px; font-style: italic; text-align: center;"]
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
[/div]

[hr style="color: #594731; border: 2px inset #d9bb84"]

[div style="letter-spacing: 2em; text-align: center; margin-left: 10em; margin-top: 2em; margin-right: 10em; margin-bottom: 2em; border: thin groove #F00;padding: 2em;"]
"Il n'y a personne qui n'aime la souffrance pour elle-même, qui ne la recherche et qui ne la veuille pour elle-même..."[/div]


[div style="letter-spacing: 2em; text-align: center; margin-left: 10em; margin-top: 2em; margin-right: 10em; margin-bottom: 2em; border: thin groove #F00;padding: 2em;"]
"Il n'y a personne qui n'aime la souffrance pour elle-même, qui ne la recherche et qui ne la veuille pour elle-même..."[/div]

[hr style="color: #594731; border: 2px inset #d9bb84"]

[div style="text-align: justify; margin-top: 1em; margin-right: 15em; margin-bottom: 1em; margin-left: 15em; padding: 3em; border-right-width: thin; border-left-width: thin; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-right-color: #00C; border-left-color: #00C; font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #171026; text-indent: 1em; line-height: 1.4em;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare nisi ac elit imperdiet, eu aliquet dui ultricies. Nullam eu dui id lacus consequat sodales vitae ultrices turpis. Nunc facilisis pellentesque tellus. Morbi vehicula nec lorem non eleifend. Duis vitae commodo ligula. Nunc feugiat porta lectus nec finibus. Duis finibus rutrum ex, at luctus ex varius non. Ut luctus, mauris ut vehicula malesuada, justo metus porta quam, vel convallis enim elit eu eros. Suspendisse placerat arcu velit, vitae fermentum urna dignissim quis. Sed ultricies, ante quis facilisis molestie, orci erat blandit dui, feugiat porttitor sapien purus vel mauris. Morbi efficitur quam vitae tellus porta, et volutpat nisl tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ut justo sit amet nunc fermentum mollis. Ut suscipit dui non libero pellentesque, ut consequat urna tempus. Pellentesque scelerisque accumsan suscipit.

Aenean in metus id ligula efficitur finibus quis eu neque. Suspendisse pulvinar laoreet commodo. Aenean non bibendum turpis. Nullam posuere dui et massa varius mollis eu ac lorem. Mauris eget pulvinar lacus. Sed semper risus sit amet mauris tincidunt sollicitudin. Aenean auctor quam massa, at faucibus metus tincidunt ac.

Sed lobortis magna id eros mattis, ac tempor sem imperdiet. Proin quis mauris at felis ullamcorper porta. Nullam eu vestibulum felis. Vestibulum quis odio lorem. Suspendisse nec nisl eget nisl gravida euismod. Suspendisse potenti. Nunc vitae ultrices nulla. Cras tincidunt lectus pretium sem consequat sagittis.

Etiam condimentum tellus non ligula commodo, ac efficitur elit scelerisque. Duis vitae placerat nisl. Curabitur viverra, ex et volutpat cursus, tellus metus tempus dolor, ut ullamcorper quam nisl at dolor. Sed hendrerit ligula lobortis feugiat dapibus. Vestibulum libero nibh, viverra a quam nec, sollicitudin tempor nisl. In non risus quis sem bibendum luctus. Donec eu elit quis tellus ultricies ultrices nec feugiat lacus. Praesent faucibus blandit tellus, et consequat lacus maximus nec. Etiam non odio pellentesque, efficitur risus eget, blandit neque. Nunc vel luctus ipsum, quis pellentesque augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum dictum diam, eget efficitur massa bibendum quis.[/div]


[div style="text-align: justify; margin-top: 1em; margin-right: 15em; margin-bottom: 1em; margin-left: 15em; padding: 3em; border-right-width: thin; border-left-width: thin; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-right-color: #00C; border-left-color: #00C; font-family: Verdana, Geneva, sans-serif; font-size: 16px; color: #171026; text-indent: 1em; line-height: 1.4em;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ornare nisi ac elit imperdiet, eu aliquet dui ultricies. Nullam eu dui id lacus consequat sodales vitae ultrices turpis. Nunc facilisis pellentesque tellus. Morbi vehicula nec lorem non eleifend. Duis vitae commodo ligula. Nunc feugiat porta lectus nec finibus. Duis finibus rutrum ex, at luctus ex varius non. Ut luctus, mauris ut vehicula malesuada, justo metus porta quam, vel convallis enim elit eu eros. Suspendisse placerat arcu velit, vitae fermentum urna dignissim quis. Sed ultricies, ante quis facilisis molestie, orci erat blandit dui, feugiat porttitor sapien purus vel mauris. Morbi efficitur quam vitae tellus porta, et volutpat nisl tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc ut justo sit amet nunc fermentum mollis. Ut suscipit dui non libero pellentesque, ut consequat urna tempus. Pellentesque scelerisque accumsan suscipit.

Aenean in metus id ligula efficitur finibus quis eu neque. Suspendisse pulvinar laoreet commodo. Aenean non bibendum turpis. Nullam posuere dui et massa varius mollis eu ac lorem. Mauris eget pulvinar lacus. Sed semper risus sit amet mauris tincidunt sollicitudin. Aenean auctor quam massa, at faucibus metus tincidunt ac.

Sed lobortis magna id eros mattis, ac tempor sem imperdiet. Proin quis mauris at felis ullamcorper porta. Nullam eu vestibulum felis. Vestibulum quis odio lorem. Suspendisse nec nisl eget nisl gravida euismod. Suspendisse potenti. Nunc vitae ultrices nulla. Cras tincidunt lectus pretium sem consequat sagittis.

Etiam condimentum tellus non ligula commodo, ac efficitur elit scelerisque. Duis vitae placerat nisl. Curabitur viverra, ex et volutpat cursus, tellus metus tempus dolor, ut ullamcorper quam nisl at dolor. Sed hendrerit ligula lobortis feugiat dapibus. Vestibulum libero nibh, viverra a quam nec, sollicitudin tempor nisl. In non risus quis sem bibendum luctus. Donec eu elit quis tellus ultricies ultrices nec feugiat lacus. Praesent faucibus blandit tellus, et consequat lacus maximus nec. Etiam non odio pellentesque, efficitur risus eget, blandit neque. Nunc vel luctus ipsum, quis pellentesque augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vestibulum dictum diam, eget efficitur massa bibendum quis.[/div]

[hr style="color: #594731; border: 2px inset #d9bb84"]

In a nisl ac massa faucibus pretium. Proin semper tincidunt leo, vitae volutpat enim aliquam pretium. Duis varius mi arcu, vitae venenatis elit efficitur ut. Morbi nec placerat erat. Donec diam lectus, ornare eu ornare a, lacinia ac purus. Ut ultricies lorem dui. Vestibulum quis vestibulum libero. Duis interdum mi a pellentesque egestas. Cras efficitur metus vel turpis rhoncus ornare. Suspendisse accumsan, nulla vitae tincidunt ornare, magna enim rutrum sapien, eget sagittis augue risus cursus erat. Maecenas id ornare tellus, at bibendum tortor.

Morbi dignissim diam metus, vel dignissim odio mattis vitae. Curabitur tempus mauris rutrum ante lobortis, ut sagittis odio finibus. Phasellus mollis efficitur odio nec iaculis. Quisque condimentum augue sed felis malesuada vehicula. Ut eget ultricies est. Nulla maximus, orci in vehicula varius, ipsum risus vulputate erat, nec convallis odio augue ut nisl. Ut fermentum tristique tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis dolor tristique sem tincidunt, vitae posuere libero sollicitudin. Nunc porta turpis orci, a tincidunt ex pellentesque quis. Curabitur condimentum, nunc at dignissim ultricies, turpis dui aliquet velit, vel tincidunt quam felis sed felis.

Nulla sed lectus vel diam facilisis laoreet. Quisque scelerisque, lorem vel eleifend ullamcorper, libero dolor blandit tellus, vitae ornare tellus eros et libero. Suspendisse aliquet ac dui quis feugiat. Nam tincidunt erat non felis molestie dictum. Phasellus hendrerit enim eget sagittis efficitur. Nam sed congue mi. Nunc lobortis feugiat mauris, ac auctor urna. Integer ex libero, ultricies vitae lobortis a, iaculis at leo. Duis facilisis non felis at feugiat. Proin dignissim et velit ut vulputate. Nam efficitur lectus tellus, non pulvinar magna ultrices ut. Pellentesque tellus diam, feugiat at enim a, pharetra scelerisque est.

Duis sit amet fermentum lorem, id condimentum ligula. In nec mi non neque cursus ultricies. Maecenas urna ipsum, aliquam sit amet tristique eu, consectetur sit amet lorem. Sed eget gravida dolor, in commodo augue. Cras cursus maximus congue. Morbi varius porttitor est sed auctor. Etiam egestas odio in auctor condimentum. Nullam dapibus at libero id convallis. Morbi efficitur quam quis tellus convallis, et rutrum libero malesuada. Etiam efficitur vitae sapien ac faucibus. Vivamus feugiat tincidunt odio eu commodo. Pellentesque ultricies nec tellus lobortis vehicula. Curabitur risus lorem, volutpat sit amet interdum a, eleifend a enim. Proin ut mi tincidunt, imperdiet velit sit amet, cursus odio. Cras porta risus sed mollis vulputate. Etiam cursus nisi quam, euismod eleifend est rutrum vel.

Proin ornare mi sed molestie interdum. Cras sit amet tortor sem. Vivamus eros diam, consectetur vitae urna id, tincidunt ullamcorper est. Vivamus at venenatis sem. Proin sit amet sollicitudin sem, vitae lacinia velit. Cras in malesuada neque. Ut tellus nisi, dictum a dignissim sit amet, mattis sit amet nulla. Donec a gravida justo. Vivamus et tellus mi. Morbi luctus maximus justo non feugiat. Suspendisse potenti. Ut id lacinia elit. Donec purus metus, mollis quis finibus nec, egestas quis eros. Pellentesque rutrum quis dui non dictum. Sed volutpat consequat luctus.

Aenean lobortis sem enim, a hendrerit nibh euismod eu. Nunc at eros non risus pharetra feugiat. Vestibulum aliquam molestie urna. Praesent nec pulvinar eros. Curabitur sit amet lorem aliquet, fermentum felis laoreet, fringilla nisl. Maecenas lobortis lectus enim, at sodales eros volutpat id. Etiam ac nulla purus. Donec elit neque, hendrerit vel finibus eget, euismod vel eros. Integer eget nibh et felis varius gravida. In ornare in metus eu pretium. Integer facilisis facilisis quam sit amet aliquet. Aenean lobortis velit sit amet metus vestibulum vestibulum. Aenean sit amet ullamcorper leo. Duis quis eros ac nisl mattis semper at id augue.

ionah

et pour plus de fun avec la mise en forme ou simplement comprendre le codage des balises CSS, s'inspirer du site qui dit tout, le w3schools.com
>> https://www.w3schools.com/css/default.asp