RESOURCE BBCode Help

  • Welcome back, Iwaku! While we are still working on the site to get it back into shape, we've come back online so you can get back to doing what you love. Check out this announcement for more details.

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#1
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.
[accordion=100%]{slide=
F. A. Q.
}{/slide}{slide=
H E L P F U LxxL I N K S
}{/slide}[/size][/accordion]
 
Last edited:

Absyinthe

Creator of Worlds
DONATING MEMBER
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, Slow As Molasses
My Usual Online Time
Everyday
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
A little bit of both.
Favorite Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
Genre You DON'T Like
I don't really mind Yaoi but something that doesn't have a good plot.
#2
Hello new thread!
My question is:
What is the best way to create a mobile-friendly divbox?

I have seen very good divboxes on my phone that size up correctly, and I am wondering how they align so perfectly.
Thanks!
 

The Mood is Write

Ink-Dripping Elfmom, Word Bondage Enthusiast
SITE SUPPORT
DONATING MEMBER
Roleplay Invitations
One on One Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week, One Post a Week
My Usual Online Time
11PM to 2AM EST, plus or minus a few hours in either direction.
Writing Levels
Adept, Advanced, Prestige
Genders You Prefer Playing
Male, Female, Androgynous, Primarily Prefer Female
Playing Style- Passive or Aggressive
Combination.

My strengths lie more in the direction of emotions and short-term ideas, where my ability to plan out long-term plots is weak. I do best with a partner who helps me cover that weakness.
Favorite Genres
I'm open to a wide range of genres. Obscenely wide. It's harder for me to list all I do like than all I don't like. My absolute favorite is mixed and multiverse, but I'm not limited to those.

• Mixed Genre
• Multiverse
• High Fantasy
• Hard Fantasy
• Low Fantasy
• OP Fantasy
• Science Fantasy
• Modern Fantasy
• Soft Scifi
• Science Fantasy
• Low Scifi
• OP Science Fantasy
• Modern Realistic (Strict)
• Modern Realistic (Loose)
• Urban Fantasy
• Alternate History (Fantasy Preference)
• Post-Apocalyptic Mixed
• Post-Apocalyptic Fantasy
• Post-Apocalyptic Scifi
• Post-Apocalyptic Modern
• Dystopia
• Displacement
• Military
• Dying Earth
• Supernatural
• Drama
• Mystery
• Horror
• Religious
• LBGT
• Crime/Detective
• Parody
• Comedy
• Tragedy
• Romance (Must Include Others)
• Erotic (Must Include Others)
Genre You DON'T Like
The list is short. because it's hard to find genres I don't enjoy.

• Yaoi/Yuri (Gay/Lesbian is fine!)
• Furry
• Fandom
• Historic Non-Fantasy
#3
display: inline; should do it? In theory. Unless my memory sucks.
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
#4
Hello new thread!
My question is:
What is the best way to create a mobile-friendly divbox?

I have seen very good divboxes on my phone that size up correctly, and I am wondering how they align so perfectly.
Thanks!
Relative values
The first, and one of the easiest ways, is to avoid using fixed values in your widths. Using a relative value such as a percent (%) makes it such that it adjusts to the size of the screen you're viewing it from.

The drawback: What may look good on a standard screen may look awkward and full of unwanted space on a larger screen. I find that it's harder to control the layout when using a percentage value for my outermost container.


max-width
My very unfinished and almost abandoned div guide in my Playground explains what max-width and how to use it here on Iwaku. c:

Most, if not all, my mobile friendly codes have a max-width in their outermost container.


Flexboxes
A bit of a more complicated option, but it's another that I would recommend.

Flexboxes help with layouting your divs. For example, if tou have a four column layout, it'd be pretty hard to read the text when you're on mobile. It'll be all squished up together, possibly to the point that only one word will show per line. It gets worse when a padding is added into the mix. With flexboxes, you can keep the four column layout when you're on desktop, but wrap when you view it on mobile.

The pinned post in my Playground is a live sample of what I mean. It aint no four column layout, but it should be enough to get the point across.

You can learn more about flexboxes in this handy little resource right here
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#5
Relative values
The first, and one of the easiest ways, is to avoid using fixed values in your widths. Using a relative value such as a percent (%) makes it such that it adjusts to the size of the screen you're viewing it from.

The drawback: What may look good on a standard screen may look awkward and full of unwanted space on a larger screen. I find that it's harder to control the layout when using a percentage value for my outermost container.


max-width
My very unfinished and almost abandoned div guide in my Playground explains what max-width and how to use it here on Iwaku. c:

Most, if not all, my mobile friendly codes have a max-width in their outermost container.


Flexboxes
A bit of a more complicated option, but it's another that I would recommend.

Flexboxes help with layouting your divs. For example, if tou have a four column layout, it'd be pretty hard to read the text when you're on mobile. It'll be all squished up together, possibly to the point that only one word will show per line. It gets worse when a padding is added into the mix. With flexboxes, you can keep the four column layout when you're on desktop, but wrap when you view it on mobile.

The pinned post in my Playground is a live sample of what I mean. It aint no four column layout, but it should be enough to get the point across.

You can learn more about flexboxes in this handy little resource right here
this thiS THIS THIS HTSI

i usually add height: auto; to my outermost div as well

also if you left click->inspect->second button from the left (looks like a phone in front of a tablet) it will show you a "mobile" version of the current page (and yer codes ofc)!
flames is still a godsend
 

Tarieles

Skulls for the Skull Crab
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week, One Post a Week, Slow As Molasses
My Usual Online Time
Usually every day
Writing Levels
Elementary, Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
Generally both
Favorite Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
Genre You DON'T Like
yaoi, yuri, furry, heavy fandoms
#6
*flails wildly and screeches*
Is there some reason my images are not jiving with my div boxes? I blatantly stole used Elle J's divs in the last BBCode help thread and I cannot get my images to scroll properly with the coding. It gets cut off at the bottom and doesn't reach to the side. I even tried using a picture that was the same exact size as the one she used and no luck.

text


Code:
[div=background-image:url(http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]
halp pls my loves
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#7
*flails wildly and screeches*
Is there some reason my images are not jiving with my div boxes? I blatantly stole used Elle J's divs in the last BBCode help thread and I cannot get my images to scroll properly with the coding. It gets cut off at the bottom and doesn't reach to the side. I even tried using a picture that was the same exact size as the one she used and no luck.

text


Code:
[div=background-image:url(http://static.tumblr.com/dee7c70293ee688fe656fafc418b9f35/csoop8h/URsnsmlhc/tumblr_static_tumblr_static__focused_v3.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]
halp pls my loves

How are you wanting it to look? From what I can see the div is working fine.

The reason the image is getting "cut off" is probably the no-repeat background, though I'm not 100% what yer wantin' it to look like
 

Tarieles

Skulls for the Skull Crab
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week, One Post a Week, Slow As Molasses
My Usual Online Time
Usually every day
Writing Levels
Elementary, Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
Generally both
Favorite Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
Genre You DON'T Like
yaoi, yuri, furry, heavy fandoms
#8
How are you wanting it to look? From what I can see the div is working fine.

The reason the image is getting "cut off" is probably the no-repeat background, though I'm not 100% what yer wantin' it to look like
Well when I scroll, it doesn't continuously scroll. When I get to a point, it just turns black and the image ends. Specifically when I scroll up.

Elle's code that I copied for reference:
text


Code:
[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]
It doesn't end in black like mine, and it's the same code just with a different url for the image.
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#9
text


like dissss? i added a bg-size code and it got rid of the cut off
 

Tarieles

Skulls for the Skull Crab
DONATING MEMBER
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week, One Post a Week, Slow As Molasses
My Usual Online Time
Usually every day
Writing Levels
Elementary, Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female
Playing Style- Passive or Aggressive
Generally both
Favorite Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
Genre You DON'T Like
yaoi, yuri, furry, heavy fandoms
#10
YISS THAT'S IT
thank you dear
 

The Mood is Write

Ink-Dripping Elfmom, Word Bondage Enthusiast
SITE SUPPORT
DONATING MEMBER
Roleplay Invitations
One on One Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week, One Post a Week
My Usual Online Time
11PM to 2AM EST, plus or minus a few hours in either direction.
Writing Levels
Adept, Advanced, Prestige
Genders You Prefer Playing
Male, Female, Androgynous, Primarily Prefer Female
Playing Style- Passive or Aggressive
Combination.

My strengths lie more in the direction of emotions and short-term ideas, where my ability to plan out long-term plots is weak. I do best with a partner who helps me cover that weakness.
Favorite Genres
I'm open to a wide range of genres. Obscenely wide. It's harder for me to list all I do like than all I don't like. My absolute favorite is mixed and multiverse, but I'm not limited to those.

• Mixed Genre
• Multiverse
• High Fantasy
• Hard Fantasy
• Low Fantasy
• OP Fantasy
• Science Fantasy
• Modern Fantasy
• Soft Scifi
• Science Fantasy
• Low Scifi
• OP Science Fantasy
• Modern Realistic (Strict)
• Modern Realistic (Loose)
• Urban Fantasy
• Alternate History (Fantasy Preference)
• Post-Apocalyptic Mixed
• Post-Apocalyptic Fantasy
• Post-Apocalyptic Scifi
• Post-Apocalyptic Modern
• Dystopia
• Displacement
• Military
• Dying Earth
• Supernatural
• Drama
• Mystery
• Horror
• Religious
• LBGT
• Crime/Detective
• Parody
• Comedy
• Tragedy
• Romance (Must Include Others)
• Erotic (Must Include Others)
Genre You DON'T Like
The list is short. because it's hard to find genres I don't enjoy.

• Yaoi/Yuri (Gay/Lesbian is fine!)
• Furry
• Fandom
• Historic Non-Fantasy
#11
Well when I scroll, it doesn't continuously scroll. When I get to a point, it just turns black and the image ends. Specifically when I scroll up.

Elle's code that I copied for reference:
text


Code:
[div=background-image:url(https://www.venus-berlin.com/wp-content/uploads/2017/05/universe-stars-background.jpg); height:200px; width:50%; background-repeat:no-repeat;background-attachment: fixed;][color=white]text[/color][/div]
It doesn't end in black like mine, and it's the same code just with a different url for the image.
ahem...

Elle is using an image larger than your screen, so it does eventually black, but not visibly to you 8D
 

Kitti

Empress of Niflheim
ADMINISTRATOR
COMMUNITY DEPARTMENT
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
Writing Levels
Adept, Adaptable
Genders You Prefer Playing
Male, Female
#12
I have been playing with things a little out of my element so I apologize if this ends up being a painfully ridiculous question, but I'm trying to get a circular floating box with an image background to have a little padding from the text that is next to it. My simple attempts at just putting "padding: 10px" is not helping me here.
Error | IwakuRoleplay.com
[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px;
padding: 10px;]

[/div]
 
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
Several Posts a Day
My Usual Online Time
8:00 AM - 4:00 PM
Writing Levels
Prestige
Genders You Prefer Playing
Male, Primarily Prefer Female
Playing Style- Passive or Aggressive
Probably a mix. When I GM I tend to prefer mostly aggressive, but with input from my players. I like to offer ideas and receive them. I don't like when people just take the reins and run with it though...especially in a 1x1.
Favorite Genres
Political intrigue, fantasy, futuristic, sci fi lite, superheroes, historical fiction, alternate universes. Smittings of romance, but only as side plot.
Genre You DON'T Like
Anime. Ever. Just not my jam.

Smut. Romance as a main plot. Horror. Grimdark.
#13
I have been playing with things a little out of my element so I apologize if this ends up being a painfully ridiculous question, but I'm trying to get a circular floating box with an image background to have a little padding from the text that is next to it. My simple attempts at just putting "padding: 10px" is not helping me here.
Error | IwakuRoleplay.com
[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px;
padding: 10px;]

[/div]
Try putting the padding in a separate div of it's own :)
 

Kitti

Empress of Niflheim
ADMINISTRATOR
COMMUNITY DEPARTMENT
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
A Few Posts a Week
Writing Levels
Adept, Adaptable
Genders You Prefer Playing
Male, Female
#14
Try putting the padding in a separate div of it's own :)
I tried it inside the other div and outside and didn't seem to get much change either way - unless I missed some portion, which is entirely possible.

[div=background-image: url(https://i.imgur.com/NSYlAiH.jpg);
background-repeat: no-repeat;
float: left;
border: 1px double #9A9783;
border-radius: 50%;
height: 350px;
width: 350px; ]
[div=padding: 10px;]
[/div][/div]

Edit:
With help from Wolk, I think I may have gotten this sorted out so that it looks nice now.
Thank you, though, EJ! :)
 
Last edited:

Apollyon

Previously Kross
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week
My Usual Online Time
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
Intermediate, Adept, Advanced, Prestige, Adaptable
Genders You Prefer Playing
Male, Primarily Prefer Male
Playing Style- Passive or Aggressive
Balanced; more aggressive
Favorite Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
Genre You DON'T Like
Furry, Yaoi, Yuri, Pg-13 crap
#15
Okay, so Elle Joyner Elle Joyner and I have been trying to figure this one out.

Here is the coding I used:

Code:
[div= background-image: url(https://i.pinimg.com/564x/e3/3b/85/e33b8544e04cb23dacd300874cd9b050.jpg); background-size: cover; width:800px; height: 700px; border: 10px; border-style: solid; border-color:#190729 ;][div=padding-top: 50px; padding-bottom: 70px; padding-left: 35px; padding-right: 35px;]
[div= background-color:#b09d9e; margin: auto; width: 650px; height: 550px; opacity: 0.9; background-overflow: overflow; overflow: scroll; border: 6px; border-style: double; border-color:Pink;]


[div=header; color: #C8A2C8; text-align: center; font-size: 10px; font-family: 'Arizonia'; font-style: normal;] [SIZE=7][glow=#C8A2C8][FONT=Great Vibes]Tomoe Yuuta[/FONT][/glow][/SIZE][/div][/div][/div][/div][/coding]

Here is the image I want to use as a background.



Now Elle says she can't see the image, but I've been reusing that exact code (With some minor tweaks) for a while now and it's worked just fine.

Here is my test chamber

Now for me, it won't show the whole image, which isn't very large. 'cover' zooms in on the picture, while both 'overflow' and 'center' make duplicates.

In PMs it looks exactly as it should. How can I fix this? What am I doing wrong?
 

Pahn

Dark Necessities
ROLEPLAY DEPARTMENT
DONATING MEMBER
Cruel Mistress
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
A Few Posts a Week, One Post a Week, Slow As Molasses
My Usual Online Time
Anytime, I have no life.
Writing Levels
Intermediate, Adept, Advanced, Douche, Adaptable
Genders You Prefer Playing
Male, Female, Transgender, Androgynous
Playing Style- Passive or Aggressive
I'm fine with both, but I have hard time with others using my character(s) without my prior consent. If the other player is unsure, I will have more of an aggressive style.
Favorite Genres
Fantasy, romance, slice of life, anti-hero stories, "you're our only hope", fandom non-canons, soft scifi, transhumanism, magical girls, horror, suspense / mystery, monster girls, fractured fairytales
Genre You DON'T Like
Roadtrip style, already-planned-out adventures, rigid GMs.
#16
Okay, so Elle Joyner Elle Joyner and I have been trying to figure this one out.

Here is the coding I used:

Code:
[div= background-image: url(https://i.pinimg.com/564x/e3/3b/85/e33b8544e04cb23dacd300874cd9b050.jpg); background-size: cover; width:800px; height: 700px; border: 10px; border-style: solid; border-color:#190729 ;][div=padding-top: 50px; padding-bottom: 70px; padding-left: 35px; padding-right: 35px;]
[div= background-color:#b09d9e; margin: auto; width: 650px; height: 550px; opacity: 0.9; background-overflow: overflow; overflow: scroll; border: 6px; border-style: double; border-color:Pink;]


[div=header; color: #C8A2C8; text-align: center; font-size: 10px; font-family: 'Arizonia'; font-style: normal;] [SIZE=7][glow=#C8A2C8][FONT=Great Vibes]Tomoe Yuuta[/FONT][/glow][/SIZE][/div][/div][/div][/div][/coding]

Here is the image I want to use as a background.



Now Elle says she can't see the image, but I've been reusing that exact code (With some minor tweaks) for a while now and it's worked just fine.

Here is my test chamber

Now for me, it won't show the whole image, which isn't very large. 'cover' zooms in on the picture, while both 'overflow' and 'center' make duplicates.

In PMs it looks exactly as it should. How can I fix this? What am I doing wrong?
not sure what the issue is, the code works fine and we can see the image.
 

Apollyon

Previously Kross
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week
My Usual Online Time
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
Intermediate, Adept, Advanced, Prestige, Adaptable
Genders You Prefer Playing
Male, Primarily Prefer Male
Playing Style- Passive or Aggressive
Balanced; more aggressive
Favorite Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
Genre You DON'T Like
Furry, Yaoi, Yuri, Pg-13 crap
#17
not sure what the issue is, the code works fine and we can see the image.
The whole image, or is it only zoomed into the upper half? Cause no matter what I do, I can't see the full image,
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
#18
Apollyon Apollyon Your post looks like this on my end [IMG]https://i.imgur.com/TvJP3dU.png[/IMG] To get the full image to show as the background, try changing the background-size to contain or changing the dimensions to either have a smaller width or a bigger height.
 

Apollyon

Previously Kross
Roleplay Invitations
Group Roleplays, One on One Roleplays
Posting Speed
Several Posts a Day, A Few Posts A Day, One Post a Day, A Few Posts a Week
My Usual Online Time
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
Intermediate, Adept, Advanced, Prestige, Adaptable
Genders You Prefer Playing
Male, Primarily Prefer Male
Playing Style- Passive or Aggressive
Balanced; more aggressive
Favorite Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
Genre You DON'T Like
Furry, Yaoi, Yuri, Pg-13 crap
#19
Apollyon Apollyon Your post looks like this on my end [IMG]https://i.imgur.com/TvJP3dU.png[/IMG] To get the full image to show as the background, try changing the background-size to contain or changing the dimensions to either have a smaller width or a bigger height.
That's exactly how it looks on my end I've used bigger dimension pictures than this an used overflow and it turned out fine. Overflow, contain and center all make the image divide itself bilaterally. Cover makes it crop the image and zoom in (Best way I can describe it.))

But again, I've used much larger images than a 500x718.

Also, if I try to shrink it, it quadruples the image.
 

darkflames13

Fancy Coding Fucker
DONATING MEMBER
Roleplay Invitations
Group Roleplays
Posting Speed
One Post a Week, Slow As Molasses
My Usual Online Time
9PM ~ 2AM (GMT + 8)
Writing Levels
Adept, Advanced
Genders You Prefer Playing
Male, Female, Androgynous
Genre You DON'T Like
Yuri. Yaoi. Furry. Mecha.
#20
That's exactly how it looks on my end I've used bigger dimension pictures than this an used overflow and it turned out fine. Overflow, contain and center all make the image divide itself bilaterally. Cover makes it crop the image and zoom in (Best way I can describe it.))

But again, I've used much larger images than a 500x718.

Also, if I try to shrink it, it quadruples the image.
You can stop the image from repeating by adding in background-repeat:no-repeat. You could also try using a percent value for the background size, that might work better for what you want to achieve.