BBCode Help

Status
Not open for further replies.

rissa

the clairvoyant pterodactyl
Original poster
VENGEANCE
DONATING MEMBER
MYTHICAL MEMBER
BBCODE AND DIVBOX INQUIRIES
A place specifically designed for bbcode and divbox related questions! Need help figuring out a bit of code? Not sure why your code keeps breaking? Unsure if what you want to do is even possible? Fret not! This thread's creation is for the sole purpose of helping you figure out your coding, one question at a time.
F. A. Q.
H E L P F U LxxL I N K S

 
Last edited:
  • Sympathy & Compassion
Reactions: rissa
  • Thank You
Reactions: rissa
Hello! New question, I'm trying to figure out the process of adding a google font into a div box but I'm struggling to understand the order. Is there any way someone could break it down for me?
 
Hello! New question, I'm trying to figure out the process of adding a google font into a div box but I'm struggling to understand the order. Is there any way someone could break it down for me?

Google fonts are best added like so:
Code:
[font=???] insert text [/font]
 
Google fonts are best added like so:
Code:
[font=???] insert text [/font]

That doesn't fit in my div box for whatever reason it's not reading...hence my confusion.
 
That doesn't fit in my div box for whatever reason it's not reading...hence my confusion.

Oh my bad. You don't put it in the div box. You put it after the div box and before the text, if that makes sense.
 
Like Kat says and shows, you use Google fonts like the good old regular BBCode way and not with the use of CSS/div.

Though, you can also summon them. @darkflakes13 found out this nifty trick for us. If you use your Google fonts at the start of your post the regular BBCode way as Kat showed you can then ‘summon’ them through CSS with ‘font-family: your font here;’ as you continue. :D No need to keep on opening the BBCode tag then.

Also good to note is that only staff members and donators can use Google fonts.

EDIT: For clarification:
Code:
[div=display: none;][font=Your font] Your font [/font]; [/div]

[div=font-family: Your font;] Text 

and continue so on...[/div]
 
Last edited:
Like Kat says and shows, you use Google fonts like the good old regular BBCode way and not with the use of CSS/div.

Though, you can also summon them. @darkflakes13 found out this nifty trick for us. If you use your Google fonts at the start of your post the regular BBCode way as Kat showed you can then ‘summon’ them through CSS with ‘font-family: your font here;’ as you continue. :D No need to keep on opening the BBCode tag then.

Also good to note is that only staff members and donators can use Google fonts.

I'm able to use Google fonts just fine lol. Unless you mean Google fonts inside the div?


Anyhow, @Huntress, this is what Nemo and I mean.

Code:
[div=background-color: #afbacf; height: 670px; width: 960px; margin: auto; padding: 10px; border: 4px solid white;][div=width: 50px; height: 50px;][/div][div=padding: 10px; [b]font-family: Libre Barcode 128 Text;[/b] font-size: 40px; color: black; text-align: center; border-bottom: 1px solid black; text-transform: uppercase; text-shadow: 1px 1px 1px black; top: -40px;]alexandra morris[/div][div=padding: 10px; [/div][div=margin: auto; float: left;left: 50px; background:url(https://i.imgur.com/xDUgZrQ.jpg?1); height: 515px; width: 300px; background-size: 515px; background-position: 50% 0%; top: -37px;][/div][div=margin: auto; font-family: Coda; font-size: 12px; letter-spacing: 1px; text-align: center; letter-spacing: 1px; color: black; background-color: #fdf4e7; float: right;right: 30px; height: 500px; width: 500px; padding: 10px; overflow-y: scroll; top: -40px;]TEST[/div]

Take the bolded portion out and place it after that first div in front of Alexandra, like this:

Code:
[div=background-color: #afbacf; height: 670px; width: 960px; margin: auto; padding: 10px; border: 4px solid white;][div=width: 50px; height: 50px;][/div][div=padding: 10px; font-size: 40px; color: black; text-align: center; border-bottom: 1px solid black; text-transform: uppercase; text-shadow: 1px 1px 1px black; top: -40px;][font=Libre Barcode 128 Text] alexandra morris[/font][/div][div=padding: 10px; [/div][div=margin: auto; float: left;left: 50px; background:url(https://i.imgur.com/xDUgZrQ.jpg?1); height: 515px; width: 300px; background-size: 515px; background-position: 50% 0%; top: -37px;][/div][div=margin: auto; font-family: Coda; font-size: 12px; letter-spacing: 1px; text-align: center; letter-spacing: 1px; color: black; background-color: #fdf4e7; float: right;right: 30px; height: 500px; width: 500px; padding: 10px; overflow-y: scroll; top: -40px;]TEST[/div]
 
I'm able to use Google fonts just fine lol. Unless you mean Google fonts inside the div?
you're only supposed to be able to use gfonts if you've donated but (un)fortunately thats never worked
 
you're only supposed to be able to use gfonts if you've donated but (un)fortunately thats never worked

Yeah I can use the google fonts lol... I donated before, but that was a one time thing. I just put the font I want in the font tags and voila. Finito!
 
  • Bucket of Rainbows
Reactions: rissa
update

as this thread is getting a bit long, useful links and tuts will be rounded up and added to the f.a.q.
expect a new thread soon!

feel free to ask away in the meantime :3

-rissa
 
TESTING - sɪɴɢ ᴍᴇ ᴀ sᴏɴɢ ᴏғ ᴀ ʟᴀss ᴛʜᴀᴛ ɪs ɢᴏɴᴇ

How would I go about getting rid of the dots in the first picture for the list? I want the list next to the pic for every picture, but I don't want to have the dots on the pic.

Code:
[font=Crimson Text][size=7][COLOR=#a64dff]Kingdom of Iantha[/COLOR][/size][/font]

[font=Crimson Text][size=5]Brief Overview of Unseelie Court[/size][/font]

[imga=left]https://cdnw.nickpic.host/xl87rX.jpg[/imga][font=Crimson Text]
[B]Queen Valencia[/B]
[LIST]
[*] Valencia
[*] House Armistad
[*] 293 years 
[*] Her Majesty
[*] 13 years in power
[/LIST]


[imga=left]https://cdnw.nickpic.host/xl88Qb.jpg[/imga][font=Crimson Text][left]
[B]Master Tyrone[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna.[/left][/font]


[imga=left]https://cdnw.nickpic.host/xl8JrW.jpg[/imga][font=Crimson Text][left]
[B]Magister Ranzyr[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna.[/left][/font]

[imga=left]https://cdnw.nickpic.host/xlKzS2.jpg[/imga][font=Crimson Text][left]
[B]Eldest Prince, Kieran[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna.[/left][/font]

[imga=left]https://cdnw.nickpic.host/xlKI5Q.jpg[/imga][font=Crimson Text][left]
[B]Younger Prince, K'yarel[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna.[/left][/font]

[imga=left]https://cdnw.nickpic.host/xlKnUW.jpg[/imga][font=Crimson Text][left]
[B]Royal Overseer, Moldranya[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna
[/left][/font]

[imga=left]https://cdnw.nickpic.host/xlKi3c.jpg[/imga][font=Crimson Text][left]
[B]Royal Cleric, Zesryna[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna
[/left][/font]

[imga=left]https://cdnw.nickpic.host/xlKtf1.jpg[/imga][font=Crimson Text][left]
[B]Commander Selphius, Uncle to Prince Kieran and K'yarel[/B]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan rhoncus augue, ultricies imperdiet erat dapibus eget. Sed ut convallis risus, nec posuere turpis. Morbi at sapien placerat, ornare mi et, posuere tellus. Nam volutpat blandit enim, nec dictum leo iaculis nec. Duis tristique blandit metus, id imperdiet justo maximus vel. Donec elementum urna a purus venenatis facilisis. Integer ut lorem at tellus porta blandit. Sed in magna mauris. Morbi dictum, urna non cursus rutrum, urna orci consequat magna, vitae mattis ante orci a tortor. Pellentesque ut interdum urna, in ornare nulla. Phasellus scelerisque, nisi at euismod sollicitudin, metus odio vestibulum leo, in ultricies ex lorem vitae urna. Vestibulum eros tellus, suscipit sed molestie ac, semper consequat urna.
[/left][/font][/font]
 
@Kat

you can convert it into flexboxes :thinking: or wrapping the text with some padding, but i'm not sure how it'd affect its mobile compatibility
 
As a few might have noticed a few codes have borked after the update. See the Bug reports thread to see what has been reported already. The admins are hard at work to look for replacements for the codes, but until then we have to make due.

For all the images that have vanished after the update


Some may have noticed that the (background) images of the div/css images have vanished. The solution is simple: put some text between the element (boxes/div =) of the background image. That should solve the issue. It is also the perfect time to start crediting the artist or face that you are using, if you haven't been into the habit already! :D

If you really don't like the text, try to color it transparent.

Code:
[color=transparent]Text[/color]
 
Last edited:
uh, I think the link to the Iwaku BBcode guide got murdered during the update? Unless you guys are revamping it right now... I was just rewriting the code on some sheets and needed to see how to do something really quick.
 
uh, I think the link to the Iwaku BBcode guide got murdered during the update? Unless you guys are revamping it right now... I was just rewriting the code on some sheets and needed to see how to do something really quick.

I can't find it either through the regular ways, but Astaroth had linked the BBcode guide in the Bugs thread before. It is very much updated and usable now!
 
uh, I think the link to the Iwaku BBcode guide got murdered during the update? Unless you guys are revamping it right now... I was just rewriting the code on some sheets and needed to see how to do something really quick.
uh, I think the link to the Iwaku BBcode guide got murdered during the update? Unless you guys are revamping it right now... I was just rewriting the code on some sheets and needed to see how to do something really quick.

I can't find it either through the regular ways, but Astaroth had linked the BBcode guide in the Bugs thread before. It is very much updated and usable now!
You can get to it by clicking the Help dropdown up on the top of the site and selecting "BBCodes" at the bottom of that. The url appears to have changed by one character, so that would be why the url in the first post doesn't work.
 
aaand today I learned that nested quotes are a thing by default when quoting somebody else's post now, neato o.o
 
What's the code to have the text wrap around the image? I used to use BIMG but that's gone now. I tried IMGA per Diana's post but the text doesn't wrap around the image.
 
Status
Not open for further replies.