BBCode Help

Status
Not open for further replies.
hmm like this?

fff
fff


[spoili]
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]
[/spoili]
 
Last edited:
  • Love
Reactions: Absyinthe_Artica
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:
  • Like
Reactions: rissa
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
 
  • Love
Reactions: Absyinthe_Artica
So does anyone have some insight on table codes? I am curious if divs can be used within the tables to format them further?
 
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.


loremlorem

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
 
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 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.
 
.

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
 
@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!
 
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
 
@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.
 
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]
 
  • Thank You
Reactions: rissa
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
 
  • Love
Reactions: darkflames13
Is there a way to style tabs?
 
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.


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.
 
@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?
 
@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]
 
Awesome, thanks!
 
Just a note - You CAN change the font for regular tabs!

  • content can also be a different font


  • Google fonts work, too


  • 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]
 
  • Love
Reactions: darkflames13
Just a note - You CAN change the font for regular tabs!

  • content can also be a different font


  • Google fonts work, too


  • 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
 
  • Love
Reactions: Elle Joyner
Status
Not open for further replies.