collapse

* Welcome!

* Important Links

* BR Councils

* COTM and TOTM

* COTY and TOTY

Character of the Year


Thread of the Year

* Affliates

Affiliate with Us

Blood Rites RPG

Listed At

RPG-D Nerd Listings

Our Affiliates

   

* Credits

RSS Feed  Facebook  Tumblr    E-Mail

Canon: © Anne Bishop
Board's Plot: Blood Rites
Points Scheme: Mother Night
Ratio System: Blood Rites

Blood Rites best viewed in Firefox.
Established February 2010
by Jamie, Gina & Bowie.


* Welcome Guests

You are currently viewing our forum as a Guest. While you can see all we do, you can't participate. Please think about joining, we love new players. Click Here for more information.


Author Topic: Advanced BBC, Styles and Fonts  (Read 3214 times)

Description:

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Advanced BBC, Styles and Fonts
« on: Dec 11, 15, 04:42:27 PM »
BBCode with Style!

If your interested in a very complex CSS email staff@bloodrites.net and we will discuss adding it to the board code with classes for everyone to use. I hope everyone who loves to code enjoys this and utilizes it for awesome. Here is the module notes from the creator them-self:


The New Features

New optional attributes of style:
  • style, whose value, quoted, are style rules inline.
  • class, whose value, quoted, are class names of style.
These attributes are added to the following BBC tags:
  • Horizontal rule (hr).
  • Image (img).
  • List (li, list).
  • Table (table, td, tr).
Code: [Select]
[tag class="class_of_style" style="rules"]text[/tag]
New optional attributes in BBC tags:
  • img:
    • rotateangle, rotatebgcolor. Rotate an image with a given angle in degree and using a background color for the uncovered zone after the rotation. The background color is an hexadecimal with 3 or 6 digits (#rgb or #rrggbb), a RGB color (r,g,b) or a color name of these:
      aqua = #00ffff = #0ff = 0,255,255
      black = #000000 = #000 = 0,0,0
      blue = #0000ff = #00f = 0,0,255
      fuchsia = #ff00ff = #f0f = 255,0,255
      gray = #808080 = 128,128,128
      green = #008000 = 0,128,0
      lime = #00ff00 = #0f0 = 0,255,0
      maroon = #800000 = 128,0,0
      navy = #000080 = 0,0,128
      olive = #808000 = 128,128,0
      orange = #ffa500 = 255,165,0
      purple = #800080 = 128,0,128
      red = #ff0000 = #f00 = 255,0,0
      silver = #c0c0c0 = 192,192,192
      teal = #008080 = 0,128,128
      white = #ffffff = #fff = 255,255,255
      yellow = #ffff00 = #ff0 = 255,255,0
      If the color does not exist in the image and can not be added, is used the closest color. Default value is 0 (rotateangle) and black (rotatebgcolor). Values without quotes.
    • flip. Flip an image in a direction. Permitted values are: horizontal, vertical. Value without quotes.
  • table: border. Width (in pixels) of the border around a table. Value without quotes.
  • td: colspan, rowspan. Span columns and rows in a table cell. Value without quotes.
Code: [Select]
[img rotateangle=degree rotatebgcolor=color flip=direction]http://image[/img]
[table border=number][tr][td]table content
[table][tr][td colspan=number rowspan=number]table cell[/td][/tr][/table]

New BBC tags:
  • Paragraph style (div): Adds class or style inline to one or more paragraph.
  • Character style (span): Adds class or style inline to text within a paragraph.
Code: [Select]
[div class="class_of_style" style="rules"]paragraph with style[/div]
[span class="class_of_style" style="rules"]text with style[/span]

For these new BBC tags are added buttons in the editing box.


EXAMPLE

character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #1 on: Dec 11, 15, 04:42:43 PM »
A test for you guys. Note you can use the classes that occur within the board CSS, for example "cat_bar". Then you can use a margin-left to inset text into your posts! <3

A BR Theme Header
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id porta nisi. Fusce nec sollicitudin velit. Suspendisse interdum, eros non viverra laoreet, justo ante interdum est, ut suscipit dolor nibh vel ante. Maecenas ac purus in libero finibus venenatis nec eu nibh. Proin ullamcorper et orci nec malesuada. Cras sed elit eget erat consectetur suscipit. Ut venenatis efficitur magna scelerisque efficitur. Sed aliquet, sem ac aliquam auctor, odio dui consequat risus, sit amet elementum est odio pulvinar erat. Donec sodales ipsum massa, sed vestibulum magna pretium ac. Nunc porta arcu nulla, elementum eleifend metus laoreet in.

Nunc libero tellus, mollis sed volutpat ac, sodales sit amet nisi. Vivamus ac imperdiet arcu. Sed purus dolor, ultrices quis consequat non, posuere at est. Vivamus egestas lacus malesuada congue ultrices. Sed vitae nunc sit amet arcu sodales tincidunt. Morbi neque lorem, gravida ut diam vitae, aliquam condimentum arcu. Nunc ornare nunc pharetra nisi lacinia, ac lobortis tortor ultrices. Sed et mattis diam. Vestibulum egestas enim non diam dictum maximus. Mauris quis neque massa. Morbi congue in urna vitae consequat.

Code: [Select]
[div class="cat_bar" style="line-height: 2.7em;"]A BR Theme Header[/div]
[div style="margin-left:40px; margin-top:10px;"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id porta nisi. Fusce nec sollicitudin velit. Suspendisse interdum, eros non viverra laoreet, justo ante interdum est, ut suscipit dolor nibh vel ante. Maecenas ac purus in libero finibus venenatis nec eu nibh. Proin ullamcorper et orci nec malesuada. Cras sed elit eget erat consectetur suscipit. Ut venenatis efficitur magna scelerisque efficitur. Sed aliquet, sem ac aliquam auctor, odio dui consequat risus, sit amet elementum est odio pulvinar erat. Donec sodales ipsum massa, sed vestibulum magna pretium ac. Nunc porta arcu nulla, elementum eleifend metus laoreet in.

Nunc libero tellus, mollis sed volutpat ac, sodales sit amet nisi. Vivamus ac imperdiet arcu. Sed purus dolor, ultrices quis consequat non, posuere at est. Vivamus egestas lacus malesuada congue ultrices. Sed vitae nunc sit amet arcu sodales tincidunt. Morbi neque lorem, gravida ut diam vitae, aliquam condimentum arcu. Nunc ornare nunc pharetra nisi lacinia, ac lobortis tortor ultrices. Sed et mattis diam. Vestibulum egestas enim non diam dictum maximus. Mauris quis neque massa. Morbi congue in urna vitae consequat.[/div]
character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #2 on: Dec 11, 15, 04:43:39 PM »
Update: These fonts are now installed in the Font drop down. If you use the Font Face drop down, you can use the Font Size drop down as well. Enjoy!

Because these are Google Fonts and not genuine board fonts, they're not going to show up in your drop-down Font Face selector. To use them, you'll have to add them as a style. I've included example code below to make it easier to grasp the formatting. One thing to note is that because we're using actual CSS here instead of forum code, the FONT SIZE will be determined by pixels inside the style tag. Using the drop-down font size menu for these font faces won't work.

Alegreya SC
Code: [Select]
[div style="font-family: 'Alegreya SC', serif; font-size: 20px;"]Alegreya SC[/div]

La Belle Aurore
Code: [Select]
[div style="font-family: 'La Belle Aurore', cursive; font-size: 20px;"]La Belle Aurore[/div]

Cinzel Decorative
Code: [Select]
[div style="font-family: 'Cinzel Decorative', cursive; font-size: 20px;"]Cinzel Decorative[/div]

Uncial Antiqua
Code: [Select]
[div style="font-family: 'Uncial Antiqua', cursive; font-size: 20px;"]Uncial Antiqua[/div]

Playball
Code: [Select]
[div style="font-family: 'Playball', cursive; font-size: 20px;"]Playball[/div]
character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #3 on: Dec 11, 15, 06:37:39 PM »
Sample colors and signature block for writing letters:

To Whomever,

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim enim at lorem bibendum, nec gravida metus cursus. Nam ex metus, tincidunt non egestas eu, ullamcorper eu quam. Aenean quis sem id nunc eleifend consectetur vitae tincidunt risus. Aliquam erat volutpat. Phasellus pellentesque nunc velit, accumsan fermentum tellus porttitor et. Maecenas ultrices sed nunc eu posuere. Fusce vel ullamcorper nisi. Cras varius est et sapien cursus mollis.

Donec viverra ut lacus ac viverra. Duis fermentum nulla quis ligula venenatis, nec egestas sem aliquet. Proin vitae sem nec neque consequat eleifend. Fusce pulvinar ante quis auctor euismod. Nulla ac rhoncus est. Integer ut hendrerit augue. Mauris consectetur hendrerit viverra. Duis convallis vehicula congue. Etiam sagittis libero ut purus viverra efficitur. Phasellus sed lectus leo. Praesent luctus leo enim, in mattis nunc euismod eu. Nam lobortis felis quis nibh malesuada, commodo ornare nisi gravida. Ut aliquet fermentum maximus.

Duis vitae ex ut magna tincidunt interdum a id leo.

With love,

Signature Here

Code: [Select]
[div style="text-align: justify;background-color: #ece9d8; color: #2D2D2D;padding: 10px 30px 10px 30px;"]
To Whomever,

Words here!

With love,

[div style="font-family: 'La Belle Aurore', cursive; font-size: 16px;"]Signature Here[/div]
[/div]
character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #4 on: Jan 02, 16, 09:57:03 AM »
Sample of making a picture float to the right or left around some text!



Play by: Text here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim enim at lorem bibendum, nec gravida metus cursus. Nam ex metus, tincidunt non egestas eu, ullamcorper eu quam. Aenean quis sem id nunc eleifend consectetur vitae tincidunt risus. Aliquam erat volutpat. Phasellus pellentesque nunc velit, accumsan fermentum tellus porttitor et. Maecenas ultrices sed nunc eu posuere. Fusce vel ullamcorper nisi. Cras varius est et sapien cursus mollis.

Donec viverra ut lacus ac viverra. Duis fermentum nulla quis ligula venenatis, nec egestas sem aliquet. Proin vitae sem nec neque consequat eleifend. Fusce pulvinar ante quis auctor euismod. Nulla ac rhoncus est. Integer ut hendrerit augue. Mauris consectetur hendrerit viverra. Duis convallis vehicula congue. Etiam sagittis libero ut purus viverra efficitur. Phasellus sed lectus leo. Praesent luctus leo enim, in mattis nunc euismod eu. Nam lobortis felis quis nibh malesuada, commodo ornare nisi gravida. Ut aliquet fermentum maximus.

Duis vitae ex ut magna tincidunt interdum a id leo.


Code: [Select]
[div style="float:right; margin:10px;"] [img]http://dani.bloodrites.net/images/misc/Dani_DAav.png[/img]
[center][i]Play by: Text here[/i][/center]
[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim enim at lorem bibendum, nec gravida metus cursus. Nam ex metus, tincidunt non egestas eu, ullamcorper eu quam. Aenean quis sem id nunc eleifend consectetur vitae tincidunt risus. Aliquam erat volutpat. Phasellus pellentesque nunc velit, accumsan fermentum tellus porttitor et. Maecenas ultrices sed nunc eu posuere. Fusce vel ullamcorper nisi. Cras varius est et sapien cursus mollis.

Donec viverra ut lacus ac viverra. Duis fermentum nulla quis ligula venenatis, nec egestas sem aliquet. Proin vitae sem nec neque consequat eleifend. Fusce pulvinar ante quis auctor euismod. Nulla ac rhoncus est. Integer ut hendrerit augue. Mauris consectetur hendrerit viverra. Duis convallis vehicula congue. Etiam sagittis libero ut purus viverra efficitur. Phasellus sed lectus leo. Praesent luctus leo enim, in mattis nunc euismod eu. Nam lobortis felis quis nibh malesuada, commodo ornare nisi gravida. Ut aliquet fermentum maximus.

Duis vitae ex ut magna tincidunt interdum a id leo.
[div style="clear:both;"][/div]





Play by: Text here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim enim at lorem bibendum, nec gravida metus cursus. Nam ex metus, tincidunt non egestas eu, ullamcorper eu quam. Aenean quis sem id nunc eleifend consectetur vitae tincidunt risus. Aliquam erat volutpat. Phasellus pellentesque nunc velit, accumsan fermentum tellus porttitor et. Maecenas ultrices sed nunc eu posuere. Fusce vel ullamcorper nisi. Cras varius est et sapien cursus mollis.

Donec viverra ut lacus ac viverra. Duis fermentum nulla quis ligula venenatis, nec egestas sem aliquet. Proin vitae sem nec neque consequat eleifend. Fusce pulvinar ante quis auctor euismod. Nulla ac rhoncus est. Integer ut hendrerit augue. Mauris consectetur hendrerit viverra. Duis convallis vehicula congue. Etiam sagittis libero ut purus viverra efficitur. Phasellus sed lectus leo. Praesent luctus leo enim, in mattis nunc euismod eu. Nam lobortis felis quis nibh malesuada, commodo ornare nisi gravida. Ut aliquet fermentum maximus.

Duis vitae ex ut magna tincidunt interdum a id leo.


Code: [Select]
[div style="float:left; margin:10px;"] [img]http://dani.bloodrites.net/images/misc/Dani_DAav.png[/img]
[center][i]Play by: Text here[/i][/center]
[/div]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dignissim enim at lorem bibendum, nec gravida metus cursus. Nam ex metus, tincidunt non egestas eu, ullamcorper eu quam. Aenean quis sem id nunc eleifend consectetur vitae tincidunt risus. Aliquam erat volutpat. Phasellus pellentesque nunc velit, accumsan fermentum tellus porttitor et. Maecenas ultrices sed nunc eu posuere. Fusce vel ullamcorper nisi. Cras varius est et sapien cursus mollis.

Donec viverra ut lacus ac viverra. Duis fermentum nulla quis ligula venenatis, nec egestas sem aliquet. Proin vitae sem nec neque consequat eleifend. Fusce pulvinar ante quis auctor euismod. Nulla ac rhoncus est. Integer ut hendrerit augue. Mauris consectetur hendrerit viverra. Duis convallis vehicula congue. Etiam sagittis libero ut purus viverra efficitur. Phasellus sed lectus leo. Praesent luctus leo enim, in mattis nunc euismod eu. Nam lobortis felis quis nibh malesuada, commodo ornare nisi gravida. Ut aliquet fermentum maximus.

Duis vitae ex ut magna tincidunt interdum a id leo.
[div style="clear:both;"][/div]
character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Dani

  • Player Account: Inactive
    • player
    • account
    • OOC

      Dani

    • Posts

      8,388

    • I have seen the throne of gods and it is empty.

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #5 on: Jan 27, 16, 08:31:32 PM »
How to use links to go to content within your post. Better know as, how to use Anchors in SMF!

Using anchors let you click a link and move you later into the page. What you need to do is make sure to have a) a Link, an iurl tag, and that the link it goes to starts with a # symbol. This tells your web browser to look within the page, not go to a new page. Later in your text you need to anchor the link, so it knows where to go when you click on the link. The location you want the link to end, you put an anchor tag.

The below sample has two links anchoring to two different locations. Try clicking on Link 1 or Link 2 to see how you are shifted to lower in the page.

Enjoy!



Anchor Demo




Link 1 Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget est sit amet enim aliquet pellentesque quis non urna. Vestibulum semper efficitur lacus, nec vehicula nisi dapibus vitae. Nullam mi nisl, pulvinar a fringilla in, rhoncus a est. Curabitur massa nisi, porta sed sodales sagittis, vulputate non augue. Aliquam mollis convallis lorem a accumsan. Praesent non dolor cursus, imperdiet leo et, pulvinar purus. Etiam non magna ut erat molestie vehicula. Quisque vulputate dignissim arcu id fringilla. Vivamus rutrum malesuada leo, et aliquam orci dignissim vitae. Fusce semper consequat erat. Proin eget facilisis purus, a vehicula quam. Cras quis volutpat sem, sodales aliquam leo.


Link 2 Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget est sit amet enim aliquet pellentesque quis non urna. Vestibulum semper efficitur lacus, nec vehicula nisi dapibus vitae. Nullam mi nisl, pulvinar a fringilla in, rhoncus a est. Curabitur massa nisi, porta sed sodales sagittis, vulputate non augue. Aliquam mollis convallis lorem a accumsan. Praesent non dolor cursus, imperdiet leo et, pulvinar purus. Etiam non magna ut erat molestie vehicula. Quisque vulputate dignissim arcu id fringilla. Vivamus rutrum malesuada leo, et aliquam orci dignissim vitae. Fusce semper consequat erat. Proin eget facilisis purus, a vehicula quam. Cras quis volutpat sem, sodales aliquam leo.

Code: [Select]
[center][size=18pt][b]Anchor Demo[/b][/size][/center]

[center][size=14pt][i]
[url=#anchor1]Link 1[/url]
[url=#anchor2]Link 2[/url]
[/i][/size]
[/center]


[hr]

[center][anchor=anchor1][/anchor][size=18pt][i]Link 1 Text[/i][/size][/center]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget est sit amet enim aliquet pellentesque quis non urna. Vestibulum semper efficitur lacus, nec vehicula nisi dapibus vitae. Nullam mi nisl, pulvinar a fringilla in, rhoncus a est. Curabitur massa nisi, porta sed sodales sagittis, vulputate non augue. Aliquam mollis convallis lorem a accumsan. Praesent non dolor cursus, imperdiet leo et, pulvinar purus. Etiam non magna ut erat molestie vehicula. Quisque vulputate dignissim arcu id fringilla. Vivamus rutrum malesuada leo, et aliquam orci dignissim vitae. Fusce semper consequat erat. Proin eget facilisis purus, a vehicula quam. Cras quis volutpat sem, sodales aliquam leo.


[center][anchor=anchor2][/anchor][size=18pt][i]Link 2 Text[/i][/size][/center]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget est sit amet enim aliquet pellentesque quis non urna. Vestibulum semper efficitur lacus, nec vehicula nisi dapibus vitae. Nullam mi nisl, pulvinar a fringilla in, rhoncus a est. Curabitur massa nisi, porta sed sodales sagittis, vulputate non augue. Aliquam mollis convallis lorem a accumsan. Praesent non dolor cursus, imperdiet leo et, pulvinar purus. Etiam non magna ut erat molestie vehicula. Quisque vulputate dignissim arcu id fringilla. Vivamus rutrum malesuada leo, et aliquam orci dignissim vitae. Fusce semper consequat erat. Proin eget facilisis purus, a vehicula quam. Cras quis volutpat sem, sodales aliquam leo.
character tracker





Contact me at: -email/gchat- dani@bloodrites.net -Discord- Dani#5222

Offline Jamie

  • Administrator
    • highBlood
    • council
    • OOC

      Jamie

    • Posts

      18,436

    • cute! but psycho... but cute!

    • View Profile
Re: Advanced BBC, Styles and Fonts
« Reply #6 on: Mar 16, 16, 12:55:44 PM »
NPC Post Template

This is the template I've been using when posting with one of the new NPC characters:

Code: [Select]
[div style="float:right; margin:10px;"] [div class="cat_bar" style="line-height: 2.7em;"] [url=http://forums.bloodrites.net/npc-registry/LINK/]Character Name (NPC)[/url][/div]

[img]AVATAR[/img]
[img]http://bloodrites.net/images/pips/upper/JEWELS.png[/img]
[img]http://bloodrites.net/images/pips/lower/CASTE.png[/img]
[/div]


Link on the first piece is to the Character Sheet.
Character Name should be replaced with the NPC Name.
JEWELS / CASTE- you can reference the code from this page: http://bloodrites.net/images/pips/cheat_sheet.html


Demo:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget accumsan arcu, in interdum neque. Duis vitae erat erat. Nulla ut tristique orci, eu volutpat erat. Nam interdum malesuada malesuada. Cras tempus arcu nunc, eu elementum orci pulvinar non. Quisque iaculis augue leo, in vestibulum diam ullamcorper quis. Nunc vitae mollis est. Sed ultricies magna sed volutpat volutpat. Nulla eget congue erat. Integer vehicula consequat diam. In rhoncus accumsan tellus vel vestibulum. Etiam faucibus nibh vitae lectus congue, at varius dolor vulputate.

Etiam vel diam in ligula semper condimentum. Sed sodales, turpis id sollicitudin tincidunt, eros sem rhoncus lorem, nec fringilla dui nulla vel ligula. Proin eu gravida purus. Donec risus tortor, fermentum id justo vel, elementum viverra ipsum. Aenean ligula nibh, dapibus sed lorem vitae, varius ultrices velit. Mauris vitae tristique tellus. Phasellus eu sapien ac erat porta pulvinar ut non orci. Nulla accumsan sagittis justo, vel aliquam odio maximus accumsan. Vestibulum laoreet dolor iaculis, cursus urna non, commodo dui.

Duis ullamcorper sapien in risus blandit feugiat. Fusce aliquam odio enim, feugiat feugiat turpis sagittis sed. Phasellus dapibus augue sed diam gravida, vel posuere felis pulvinar. Integer id turpis laoreet, ullamcorper eros a, blandit urna. Fusce urna sapien, congue et viverra vel, vulputate eget magna. Morbi convallis auctor tortor, sed suscipit lorem. Nulla at finibus augue.










Please contact me via Email - not PM! <3 | GMT Time Zone
-aim/email/gchat- jamie@bloodrites.net

 

 

anything