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.

Status
Not open for further replies.

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#61
hmm like this?



[code][div=
height: 250px
width: 450px;
display: inline-block;
margin: 5px;][img]https://dummyimage.com/240x400/000/fff[/img][/div][div=
height: 250px
width: 450px;
display: inline-block;
margin: 5px;][img]https://dummyimage.com/240x400/000/fff[/img][/div][/code]
 
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.
#63
If I just give that a margin: auto will it center the two?
EDIT: I tried the code as it is and it is centered already so no worries! Thank you!
 
Last edited:

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#64
If I just give that a margin: auto will it center the two?
If you wrap another div with this it seems to center:

width: 60%;
margin: 0 auto;

I'm sure there's a better way but I'm super tired and already in bed xD
 

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.
#65
So does anyone have some insight on table codes? I am curious if divs can be used within the tables to format them further?
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#66
So does anyone have some insight on table codes? I am curious if divs can be used within the tables to format them further?
I'm not sure about within them, but you can use the "built-in" divs.


[td="border: 3px solid pink; text-align: center; width: 50%;"]lorem[/td][td="border: 3px solid pink; text-align: center; width: 50%;"]lorem[/td]



Code:
[table="border: 3px solid pink; text-align: center; width: 75%; margin: auto auto;"][tr][td="border: 3px solid pink; text-align: center; width: 50%;"]lorem[/td][td="border: 3px solid pink; text-align: center; width: 50%;"]lorem[/td][/tr][/table]
There's some other codes you can/can't add - tbh I haven't fully experimented with table codes, but with the little bit that I have, most codes seem to work as long as the table= and td= are matching. Also make sure you don't have any "enters" or else your table will "sag" farther into the post itself instead of staying at the top.

i'm so tired so take this with a grain of salt xD

edit: also remember the quotation marks - ( " " ) ya need those or things get wacky
 

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.
#67
So does anyone have some insight on table codes? I am curious if divs can be used within the tables to format them further?
Do you mean inside the cells? if so, then it's definitely possible. But if inside the actual tag similar to the same way we append divs tags inside the accordions, then that would be a no. That's only possible with slave tags which are enclosed by curly braces { }.

Cell 1

Cell 2

Cell 3



Code:
[table]
[tr][td][div=background:red; color:white; margin:-6px; padding:6px; width:100px; height:100px;]Cell 1[/div][/td][td][div=background:purple; color:white; margin:-6px; padding:6px; width:100px; height:100px;]Cell 2[/div][/td][td][div=background:grey; color:white; margin:-6px; padding:6px; width:100px; height:100px;]Cell 3[/div][/td][/tr]
[/table]
Like rissa rissa mentioned tho, it is possible to use some properties that we use in divs with the actual table tag, but the extent of which ones can be used, I have no idea either :'D I haven't used tables on Iwaku in 5ever.
 

Navuso

The silence is deafening
Roleplay Invitations
Group Roleplays, One on One Roleplays, Private Convo Roleplays
Posting Speed
Speed of Light, 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
Sporadically throughout the day. If not at a computer, then from mobile when I can be.
Writing Levels
Intermediate, Adept, Adaptable
Genders You Prefer Playing
Male, Female, Androgynous, Primarily Prefer Male
Playing Style- Passive or Aggressive
More passive than aggressive
#68
.

Halo


How do I get it to not cut off one side like that? I've tried making it wider, and smaller.
For circle divs you have to be exact. So let's start with the code from a few pages back and add in your image.
Actually, no you don't. I explained how to alter the image to work in a previous post, without having to be exact in the bbcoding.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tellus odio, ullamcorper sit amet erat ac, finibus efficitur nisl. Duis diam lectus, pretium vel luctus in, efficitur tristique orci. Aliquam erat volutpat. Morbi est massa, finibus eget turpis eu, pulvinar porta velit. Vivamus urna ipsum, condimentum vel lorem eu, lobortis finibus nisl. Fusce tempor purus risus, a tempus dolor ullamcorper vitae. Donec scelerisque molestie velit, sed tincidunt velit tristique id. In dictum nulla sit amet ipsum mattis, ac consectetur urna porta. Ut sit amet leo mattis, sodales ex vel, suscipit nunc. Nulla viverra eros massa, dictum fringilla velit malesuada sed. Phasellus volutpat magna eget porta ornare.

Fusce pharetra massa non vestibulum pellentesque. Nunc ac felis est. Nullam a augue a lectus maximus luctus. Nunc neque augue, vulputate eu sodales quis, sodales a erat. Vivamus auctor dolor quis tortor rutrum accumsan. Cras accumsan pretium turpis, sit amet commodo est semper at. Aliquam consectetur sodales massa, eget auctor ante interdum sed. Integer condimentum imperdiet orci non blandit. Ut ex neque, posuere in blandit lobortis, aliquet eu nibh.

Sed venenatis rutrum velit, sed dignissim massa tincidunt vel. Maecenas egestas fermentum urna, eget semper velit lacinia sit amet. Aenean sollicitudin mi tortor, eu iaculis velit faucibus porttitor. Etiam lobortis rutrum lacus in ornare. Morbi euismod felis orci, et faucibus nisi efficitur non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis sagittis turpis eu gravida. Integer tempor cursus libero, quis egestas ligula viverra ut. Aliquam erat volutpat. Cras scelerisque justo quis sem rutrum, a rutrum turpis auctor. Sed dignissim justo sed tempus tempor. Duis non mauris eu risus hendrerit sollicitudin eu efficitur augue. Ut id pulvinar libero, in vulputate risus.



For the background to be made to fit, I chose cover for background-size.

This is the post where I explain the different background-size and background-positions
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#69
Navuso Navuso

Clarification:

When I said exact I meant the div itself, not the background-image or its placement. If the height and width aren't the same the div itself will come out wonky; ie. Not a perfect circle. If that's what you're looking for then by all means, play with the code - but matching height and widths should always be the go to until you're comfortable enough to play around with it!
 

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.
#70
Is there anyway to get rid of the space between the table and the div box below?

BLOG DATE:
The date of the blog goes here.

BLOG TITLE:
The title of the blog goes here.


Blog content goes here
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#71
Absyinthe Absyinthe

First I'd try taking all the enters/line breaks out of your table code. If that doesn't work you can force it up with a top/bottom code within your div.
 

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.
#72
Is there anyway to get rid of the space between the table and the div box below?
Wrap the table in a div with a negative 14.5px margin at the bottom. Iwaku tables apparently have a bottom margin of 14.667px, but a 14.5px should be enough to cover the gap that is made.

Sample:

Text goes here.

Text goes here.

Text goes here.


Code:
[div=margin-bottom:-14.5px;][table]
[tr][td][div=background:black; border:5px solid red; margin:-6px; padding:6px; width: 400px; height: 55px; text-align: center; color:white;]Text goes here.
[/div][/td]
[td][div=background:black; border:5px solid red; margin:-6px; padding:6px; width: 400px; height: 55px; text-align: center; color:white;]Text goes here.
[/div][/td][/tr][/table][/div][div=background:black; border:5px solid red; width: 400px; height: 55px; text-align: center; color:white; box-sizing:border-box; padding:10px; width: 800px;]Text goes here.
[/div]
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#73
Wrap the table around in a div with a negative 14.5px margin at the bottom. Iwaku tables apparently have a bottom margin of 14.667px, but a 14.5 should be enough to cover the gap that is made.

Sample:

Text goes here.

Text goes here.

Text goes here.


Code:
[div=margin-bottom:-14.5px;][table]
[tr][td][div=background:black; border:5px solid red; margin:-6px; padding:6px; width: 400px; height: 55px; text-align: center; color:white;]Text goes here.
[/div][/td]
[td][div=background:black; border:5px solid red; margin:-6px; padding:6px; width: 400px; height: 55px; text-align: center; color:white;]Text goes here.
[/div][/td][/tr][/table][/div][div=background:black; border:5px solid red; width: 400px; height: 55px; text-align: center; color:white; box-sizing:border-box; padding:10px; width: 800px;]Text goes here.
[/div]
bless
 

Bjorn

Skittleslayer
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
Several Posts a Day, A Few Posts A Day
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
Adaptable
Favorite Genres
Fantasy, Science Fiction, Magical, Epic Fantasy, Science Fantasy, Steampunk, Cyberpunk,
#74
Is there a way to style tabs?
 

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.
#75
Is there a way to style tabs?
For the regular tabs bbcode, you can't change how the actual tab looks like. The most you can do is change the content's background.

Dis is a tab

  • Content 1

Code:
[tabs]
[tab=Dis is a tab][/tab][tab=Dis is a tab][div=height:200px;background:grey; margin:-10px; padding:10px;]Content 1[/div][/tab]
[/tabs]

Stabs on the other hand, lets us use divs to change how the tabs and content area look. When it comes to changing the background colour however, it doesn't really let us do that fully. Here's an example of what I mean:

[stabs=100%]
{slide=
tab 1
|center}
Content
{/slide}
[/stabs]


Code:
[stabs=100%]
{slide=[div=background:purple; color:white;]tab 1[/div]|center}[div=height:200px; background:purple; color:white;]Content[/div]{/slide}
[/stabs]
The background doesn't cover it fully cause both the tabs and the content area have paddings in them which come from the stabs. There isn't any way to remove these paddings, but there are way to cheat around this.

For the tabs, adding a margin of -6px and padding of 6px on the right and left side of the div inside the slave tag is enough to solve the problem of filling it out with the background we want.

[stabs=100%]
{slide=
tab 1
|center}
Content
{/slide}
[/stabs]


Code:
[stabs=100%]
{slide=[div=background:purple; color:white; margin:0 -6px; padding:0 6px;]tab 1[/div]|center}[div=height:200px; background:purple; color:white;]Content[/div]{/slide}
[/stabs]
But unfortunately, the negative margin trick doesn't really work on the content area. The way I work around for that one is kinda tedious and a bit complex, but it does get the job done.

Step 1: Make a div outside the entire thing that matches the dimensions of the area that I want to cover, which in this case would be the content area, and slap it over by giving it a higher z-index than the stabs (2 should be good enough) and then moving it up via the bottom property (the value for this depends on the height of your stabs; I recommend just fiddling with it till you get the right value). This gives the false effect of the background fully covering the content area.

Step 2: Since the entire content area was covered up making so that even the content couldn't be seen, we need to bring the content out from behind. To do this we simply wrap the content in a div and set the div to have a higher z-index than the previous div we were working with (if you used 2 before, 3 should be enough for this).

Step 3: Last thing to do is to trim the unwanted space left behind by the div we used to cover the content area up with. This is done by wrapping the entire thing in a div, giving it a fixed height that matches that of the entire stabs, and then setting the overflow to hidden.

And viola! It should look like something like this after:

[stabs=100%]
{slide=
tab 1
|center}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. "Vestibulum commodo ante ac erat mattis, at fringilla neque elementum." Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.

Praesent pellentesque, massa et blandit commodo, metus erat bibendum lorem, elementum sollicitudin diam turpis ut magna. Fusce ornare blandit aliquet. Suspendisse euismod pellentesque leo sit amet laoreet. Quisque pellentesque cursus ullamcorper. Duis fermentum est eget dui auctor sagittis. Fusce aliquet nulla semper nisl dignissim, nec rhoncus lectus rutrum. Morbi blandit magna at dapibus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis blandit felis non finibus iaculis. Duis lacus massa, posuere ut arcu ut, sagittis pharetra nisl. Donec at commodo ipsum. Integer quis porttitor turpis. Sed mi sem, finibus nec neque quis, vehicula sagittis dolor.
{/slide}
[/stabs]

Code:
[div=height:260px; overflow:hidden;][stabs=100%]
{slide=[div=background:purple; color:white; margin:0 -6px; padding:0 6px;]tab 1[/div]|center}[div=height:200px; color:white; z-index:3; overflow-y:auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. "Vestibulum commodo ante ac erat mattis, at fringilla neque elementum." Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.

Praesent pellentesque, massa et blandit commodo, metus erat bibendum lorem, elementum sollicitudin diam turpis ut magna. Fusce ornare blandit aliquet. Suspendisse euismod pellentesque leo sit amet laoreet. Quisque pellentesque cursus ullamcorper. Duis fermentum est eget dui auctor sagittis. Fusce aliquet nulla semper nisl dignissim, nec rhoncus lectus rutrum. Morbi blandit magna at dapibus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis blandit felis non finibus iaculis. Duis lacus massa, posuere ut arcu ut, sagittis pharetra nisl. Donec at commodo ipsum. Integer quis porttitor turpis. Sed mi sem, finibus nec neque quis, vehicula sagittis dolor.
[/div]{/slide}
[/stabs]
[div=height:235px; z-index:2;  bottom:195px; background:purple;][/div][/div]
The disadvantage of this tho is that for one it's not really very mobile friendly. Second is that you can't have it so you have different background colours for every tab you have since you're not really changing the background of what's inside the tab.
 

Bjorn

Skittleslayer
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
Several Posts a Day, A Few Posts A Day
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
Adaptable
Favorite Genres
Fantasy, Science Fiction, Magical, Epic Fantasy, Science Fantasy, Steampunk, Cyberpunk,
#76
darkflames13 darkflames13 Thanks for the help! It's not exactly what I was hoping to do but it will work. Is there a way to change fonts inside the stabs, by the way?
 

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.
#77
Bjorn Bjorn Yep! The font tag works in it

[stabs=100%]
{slide=Tab 1|center}Content{/slide}
[/stabs]


Code:
[stabs=100%]
{slide=[font=Georgia]Tab 1[/font]|center}[font=Georgia]Content[/font]{/slide}
[/stabs]
 

Bjorn

Skittleslayer
Roleplay Invitations
Not Taking RP Invites at this Time
Posting Speed
Several Posts a Day, A Few Posts A Day
Writing Levels
Intermediate, Adept, Advanced, Adaptable
Genders You Prefer Playing
Primarily Prefer Female
Playing Style- Passive or Aggressive
Adaptable
Favorite Genres
Fantasy, Science Fiction, Magical, Epic Fantasy, Science Fantasy, Steampunk, Cyberpunk,
#78
Awesome, thanks!
 
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.
#79
Just a note - You CAN change the font for regular tabs!

Like this

  • content can also be a different font


Like this

  • Google fonts work, too


Like this

  • Even script!


Code:
[font=Courier New][tabs][tab=Like this][font=Lato]content[/font][/tab][/tabs][/font]

[font=Oswald][tabs][tab=Like this][font=Lato]Google fonts work, too[/font][/tab][/tabs][/font]

[font=Dancing Script][tabs][tab=Like this][font=Lato]Even script![/font][/tab][/tabs][/font]
 

rissa

the clairvoyant pterodactyl
DONATING MEMBER
#80
Just a note - You CAN change the font for regular tabs!

Like this

  • content can also be a different font


Like this

  • Google fonts work, too


Like this

  • Even script!


Code:
[font=Courier New][tabs][tab=Like this][font=Lato]content[/font][/tab][/tabs][/font]

[font=Oswald][tabs][tab=Like this][font=Lato]Google fonts work, too[/font][/tab][/tabs][/font]

[font=Dancing Script][tabs][tab=Like this][font=Lato]Even script![/font][/tab][/tabs][/font]
MUAHAHAHAHHAHAA
 
Status
Not open for further replies.