BBCode Help

Status
Not open for further replies.

rissa

the clairvoyant pterodactyl
Original poster
DONATING MEMBER
LURKER 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:

Absyinthe

Creator of Worlds
FOLKLORE MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. One post per day
  2. 1-3 posts per week
  3. One post per week
Online Availability
Everyday
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
Genres
Fantasy, Modern, Magical, Sc-fi, Horror, Steampunk, anything really
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

Mom-de-Plume
DONATING MEMBER
FOLKLORE MEMBER
Invitation Status
  1. Looking for partners
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. Multiple posts per week
  5. 1-3 posts per week
  6. One post per week
Online Availability
It varies wildly.
Writing Levels
  1. Adept
  2. Advanced
  3. Prestige
Preferred Character Gender
  1. Male
  2. Female
  3. Nonbinary
  4. Primarily Prefer Female
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)
display: inline; should do it? In theory. Unless my memory sucks.
 

darkflames13

Star Lost
LURKER MEMBER
FOLKLORE MEMBER
Posting Speed
  1. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. Primarily Prefer Male
  2. Primarily Prefer Female
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
Original poster
DONATING MEMBER
LURKER MEMBER
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
Invitation Status
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Online Availability
Usually every day, but I often don't like posting every day.
Writing Levels
  1. Elementary
  2. Intermediate
  3. Adept
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
*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
Original poster
DONATING MEMBER
LURKER MEMBER
*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
Invitation Status
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Online Availability
Usually every day, but I often don't like posting every day.
Writing Levels
  1. Elementary
  2. Intermediate
  3. Adept
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
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.
 
  • Useful
Reactions: HelloBeautifulChild

rissa

the clairvoyant pterodactyl
Original poster
DONATING MEMBER
LURKER MEMBER
text


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

Tarieles

Skulls for the Skull Crab
Invitation Status
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Online Availability
Usually every day, but I often don't like posting every day.
Writing Levels
  1. Elementary
  2. Intermediate
  3. Adept
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
Genres
Fantasy, modern fantasy, high fantasy, romance, slice of life, sci-fi, grimdark, light fandoms (next gen, non canon chars, etc)
YISS THAT'S IT
thank you dear
 
  • Love
Reactions: rissa

The Mood is Write

Mom-de-Plume
DONATING MEMBER
FOLKLORE MEMBER
Invitation Status
  1. Looking for partners
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. Multiple posts per week
  5. 1-3 posts per week
  6. One post per week
Online Availability
It varies wildly.
Writing Levels
  1. Adept
  2. Advanced
  3. Prestige
Preferred Character Gender
  1. Male
  2. Female
  3. Nonbinary
  4. Primarily Prefer Female
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)
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
DONATING MEMBER
Invitation Status
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
  3. Prestige
  4. Douche
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Female
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]
 

Elle Joyner

Moop.
LURKER MEMBER
FOLKLORE MEMBER
Posting Speed
  1. Multiple posts per day
Online Availability
8:00 AM - 4:00 PM
Writing Levels
  1. Prestige
Preferred Character Gender
  1. Male
  2. Primarily Prefer Female
Genres
Political intrigue, fantasy, futuristic, sci fi lite, superheroes, historical fiction, alternate universes. Smittings of romance, but only as side plot.
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
DONATING MEMBER
Invitation Status
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
  3. Prestige
  4. Douche
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Female
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
Invitation Status
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. 1-3 posts per week
Online Availability
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Prestige
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Primarily Prefer Male
Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
Okay, so @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.

e33b8544e04cb23dacd300874cd9b050.jpg


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

Bubblegum Bitch
LURKER MEMBER
Posting Speed
  1. 1-3 posts per week
  2. One post per week
  3. Slow As Molasses
Online Availability
Anytime, I have no life.
Writing Levels
  1. Adept
  2. Advanced
  3. Douche
  4. Adaptable
Preferred Character Gender
  1. Male
  2. Female
  3. Transgender
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
Okay, so @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.

e33b8544e04cb23dacd300874cd9b050.jpg


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
Invitation Status
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. 1-3 posts per week
Online Availability
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Prestige
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Primarily Prefer Male
Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
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

Star Lost
LURKER MEMBER
FOLKLORE MEMBER
Posting Speed
  1. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. Primarily Prefer Male
  2. Primarily Prefer Female
@Kōsetsu no oni Your post looks like this on my end [spoili]
TvJP3dU.png
[/spoili]
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
Invitation Status
Posting Speed
  1. Multiple posts per day
  2. 1-3 posts per day
  3. One post per day
  4. 1-3 posts per week
Online Availability
9 A.M to 12 P.M - 6 P.M to 1 A.M
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Prestige
  5. Adaptable
Preferred Character Gender
  1. Male
  2. Primarily Prefer Male
Genres
Fantasy, Scifi, Modern, Magical, Horror, Romance,
@Kōsetsu no oni Your post looks like this on my end [spoili]
TvJP3dU.png
[/spoili]
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

Star Lost
LURKER MEMBER
FOLKLORE MEMBER
Posting Speed
  1. Slow As Molasses
Writing Levels
  1. Adept
  2. Advanced
Preferred Character Gender
  1. Primarily Prefer Male
  2. Primarily Prefer Female
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.
 
Status
Not open for further replies.