BBCode Help

[rissa]

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.

Before posting, take a look at our F.A.Q. and see if your question has been answered before!

F.A.Q.

• Link Color
• Circlular (radial) Images
• Changing Slide Colors
• Borderless Accordions
• Side by Side Images
• Tables
• Changing Font in Tabs
• Different Column Methods
• Adding DIV Background Images
• Gradiant BG
• How to Show Code
• Mobile Friendly Div boxes
• Altering Tab Backgrounds
• Stack Flexboxes
• Flexboxin' Like a Champ
• Aligning Text in a Flexbox

Helpful Links

• Iwaku's BBCode List
• Darkflames13's Playground
• Divtionary
• CSS Reference
• Color Hexa
• Google Fonts

BBCH VI | BBCH VII​

 

[Daemon]

Would this play just the audio from a youtube video?

*I added that extra / at the beginning on purpose.

[/AUDIO]https://www.iwakuroleplay.com/styles/editor-manager/missing-audio.mp3[/AUDIO]

I'm trying to show a song track without showing the video as part of the preview for an RP Interest check. I looked at the links you gave and found that one which, looked like what I was going for. But is there a BB code where it just has the play button that someone could just hit and listen?

 

[Nemopedia]

Would this play just the audio from a youtube video?

*I added that extra / at the beginning on purpose.

[/AUDIO]https://www.iwakuroleplay.com/styles/editor-manager/missing-audio.mp3[/AUDIO]

I'm trying to show a song track without showing the video as part of the preview for an RP Interest check. I looked at the links you gave and found that one which, looked like what I was going for. But is there a BB code where it just has the play button that someone could just hit and listen?

Sorry for the late response. As far as I know the Audio bbcode doesn't work with Youtube urls and needs a mp3 file. I haven't had much luck with it. I think the easiest solution is to use the media bbcode in combination with CSS and play around with the sizes and padding to get what you want. You already mentioned that you had found it, but linking it again just in case.

 

[Daemon]

Thanks; I know before all these additions there was a BBCode that just popped up with a play button. Hahahah. All this CSS has my head spinning.

 

[Mollisol]

How do I make the sun (solid), snowflake (regular), and moon (solid) Font Awesome icons display?

 

[Nemopedia]

How do I make the sun (solid), snowflake (regular), and moon (solid) Font Awesome icons display?

Hi, sorry for the late response. I was trying the font awesome symbols you mentioned, but it seems they don't work? All the other font-awesome symbols seem to work. Seems like you picked an unlucky combo, hahahaha...

Maybe it is an bug. Since it involves bbcode it is best to report this in the BBCode cry thread in the Help Desk.

 

[Nemopedia]

How do I make the sun (solid), snowflake (regular), and moon (solid) Font Awesome icons display?

Hi, sorry for the late response. I was trying the font awesome symbols you mentioned, but it seems they don't work? All the other font-awesome symbols seem to work. Seems like you picked an unlucky combo, hahahaha...

Maybe it is an bug. Since it involves bbcode it is best to report this in the BBCode cry thread in the Help Desk.

Seems like it was already reported in the BBcode cry thread along with an explanation of why it might not work. o:

 

[altai]

hi there! i recently joined iwaku and i've run into an issue regarding hidden scrolling. the template in question is here if i could get some help with it? i would like the scroll bar to be completely disappeared, but it looks like it's above and outside of the coding it should be within in order to hide it.

thanks so much in advance!

 

[Nemopedia]

hi there! i recently joined iwaku and i've run into an issue regarding hidden scrolling. the template in question is here if i could get some help with it? i would like the scroll bar to be completely disappeared, but it looks like it's above and outside of the coding it should be within in order to hide it.

thanks so much in advance!

Heya, I have written a guide on that so check it out: RESOURCE Divtionary

If you still run into problems let me know!

 

[Centuries]

i've been struggling with this for a while... is there any way to colour tables? not the cells inside the table, i think i know how to do that, but the actual table itself? when i make a table, it overlaps the div with a bg colour under it... is there anything i can do to fix this?

 

[Nemopedia]

i've been struggling with this for a while... is there any way to colour tables? not the cells inside the table, i think i know how to do that, but the actual table itself? when i make a table, it overlaps the div with a bg colour under it... is there anything i can do to fix this?

Like this?

Header 1	Header 2
Cell 1 1	Cell 1 2
Cell 2 1	Cell 2 2

You will need to play around with the numbers until they cover it whole.

 [TABLE]
[TR]
[TH][div=background: blue; margin: -20px; padding: 20px; right: -20px; ]Header 1[/div][/TH]
[TH] [div=background: blue; ]Header 2[/div][/TH]
[/TR]
[TR]
[TD]Cell 1 1[/TD]
[TD]Cell 1 2[/TD]
[/TR]
[TR]
[TD]Cell 2 1[/TD]
[TD]Cell 2 2[/TD]
[/TR]
[/TABLE]

 

[Centuries]

aah thank you so much! i guess i just have to fiddle with it more :'- )

 

[sugarplum]

Is it possible to put like a soundcloud link and put a div over it so when you press the div it plays the media?

 

[solstice]

'kay so i need some help with this template right here
the tables here are confusing af lmao. how the heck do i get the table's bg + borders to be invisible to make the fancypost look clean?

 

[sugarplum]

the newb is back uwu
so tabs are a thing okay
is it possible to change tab colours?
like the default is a green
but what if i want it - let's say - a purple?
would that be possible?​

Believe you can just do [color= in front of it and it'd work? might be wrong though.

 

[fish-writer]

hiya~ guess who's back with more questions :^)
question numero quatre:
so i have this sorted out (kind of)​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

and if i try changing its opacity:​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

it affects the whole thing
what do i do if i just want the background (and maybe the scroll) less opaque
while keeping my text fully visble?

and to follow-up on that
can i also change the color of the scrolls uwu ?​

instead of using background opacity, use background-color:rgba(0,255,0,.5)

rgba(0,200,0,1)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

rgba(0,200,0,.5)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

not sure about scroll colour, sorry :X

 

[Nemopedia]

Is it possible to put like a soundcloud link and put a div over it so when you press the div it plays the media?

I never played around with Soundcloud, but it should be? I have a guide on how to make a customised player with YouTube, so perhaps try to adapt that to Soundcloud? If that doesn't work and you are still lost on what to do let me know. We can brainstorm then.

'kay so i need some help with this template right here
the tables here are confusing af lmao. how the heck do i get the table's bg + borders to be invisible to make the fancypost look clean?

Personally I would ditch the tables and work with flex instead. Flex is much smoother to use and also mobile-friendly which tables and your code aren't. It is, however CSS and not BBCode, but once you understand them they should be really easy to use.

I will link you a cheatsheet with flex properties that you can use. If you are entirely unfamiliar with flexboxes try to read this article. If that still doesn't work let me know and we can work it out!

the newb is back uwu
so tabs are a thing okay
is it possible to change tab colours?
like the default is a green
but what if i want it - let's say - a purple?
would that be possible?

edit: also, i can't seem to add images as backgrounds
the code i'm using is:
[div="height:50%; width:50%; background:url(https://www.w3schools.com/w3css/img_lights.jpg); padding:2%;"]
idk im probably doing something wrong

edit 2: additionally, is there a way to colour fieldset borders, change their border styles (instead of having a solid border, it's dotted or smth?)​

Unfortunately the default colour of the tabs can't be changed. You can put a div over the tabs and hide it, however. I have something basic up for that here (click the stars). It requires some CSS, but it is a good alternative and not too complicated!

When adding a background image in css make sure to define the height (height:000px;) as well, otherwise the image won't pop up unless you put some content between, which still often won't give the desired result.

As for the solid border. The BBCode masterlist gives an option for 'Fieldset', but also 'Solid', 'Dotted' and 'Dashed'. You have been using 'dotted' so far, but 'fieldset' and 'solid' will give you a solid border with 'solid' giving you the option to manipulate its colour to your liking.

hiya~ guess who's back with more questions :^)
question numero quatre:
so i have this sorted out (kind of)​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

and if i try changing its opacity:​

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

it affects the whole thing
what do i do if i just want the background (and maybe the scroll) less opaque
while keeping my text fully visble?

and to follow-up on that
can i also change the color of the scrolls uwu ?​

What @fish-writer gave you about the rgba is correct. That should only target the opacity of the background without touching the text.

As for the scroller. Unfortunately you can't change its look, but you can hide it using CSS! I have a guide for that here.

PHEW, it has been a while since that many questions flooded in here. If I missed any, let me know!

 

[solstice]

heh i have one more problem... this template, is there a code to push the image back so the text overlaps it?

 

[Nemopedia]

heh i have one more problem... this template, is there a code to push the image back so the text overlaps it?

There are two ways to go about this, depending on how you designed the code.

The first, and easiest, option is to switch the position of the two elements. CSS stacks up the elements after each other, so the latest line will go over the other. If you put the code line of the image before that of the text the text should then pop up over the image as you intend.

The second option is to use z-index. If both elements are closed separated from each other you can add in a higher z-index number to the element with the text and that will force the layer to come forward.

 z-index: 0;

 

[Nemopedia]

hello i'm back once more uwu
i need help fixing a really simple code
(it's probably simple for most people oof)
here's the code for it:​

Spoiler

[div=
  background:url(https://www.w3schools.com/w3css/img_lights.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  width: 50%;
  height: 319px;
  padding: 4%;
  margin: auto;"][div=
    background-color: rgba(255, 255, 255, .3);
    height: auto;
    color: black; 
    padding: 2%;
    overflow-y: scroll;
    text-align: justify;"]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.[/div][/div]

this is what it ends up looking like:​

Spoiler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum efficitur mi mi, id molestie nisi suscipit sit amet. Nunc quis auctor libero. Fusce nec dictum libero. Pellentesque in sapien nibh. Cras auctor ut enim vel posuere. Phasellus ornare feugiat cursus. Etiam id eleifend risus, in placerat dolor. Nam nec orci eros. In in ex laoreet, auctor erat vel, efficitur lacus. Ut id nunc leo. Quisque in vestibulum erat. Nulla tortor libero, pellentesque et interdum in, accumsan non nibh.

my problem with it is that
the div inside the picture
doesn't retain its proper dimensions
(as in, it doesn't stay inside the picture)
when you zoom in on it
(on computer/laptop)
the div's width stays fine
but the height overflows from the bottom
of the picture
when i subbed in the width: ___; value
with px instead of %
it worked like a charm
so i'm not sure what i'm
doing wrong here​

Heya, try to replace the background-size: contain; with cover. That should solve the problem.

background-size:cover;

If that isn't what you want, change the height that you set for the text-box, which you set to 'auto' as of current and thus makes it grow with the text rather than set it to the height of the background picture.