BBCode Help

[Absyinthe_Artica]

So would the background image url be the image in the circle? :o

 

[Nemopedia]

@Absyinthe, yes, the 'background: url(img url)' would be the image in the circle in this case! Rissa put a 'no-repeat' element in it so that it won't tile, as well as that she set the 'border-radius' so that it will become a circle. If you are wondering how the background image is appearing despite a lack of text; that is thanks to the 'height' element she added within the code. :D

 

[junebug]

it's a simple code & i'm sure others know a better way but first off - make sure your image is the same size (height & width) or it gets a bit wonky.

[div=
   background-image: url(https://dummyimage.com/300x300/000/fff);
   background-repeat: no-repeat;
   height: 300px;
   width: 300px;
   border: 1px solid #000;
   border-radius: 50%;][color=transparent].[/color][/div]

.

i try and set the div to the size of the image & make sure the border color doesn't cause any problems. you can set it's position with floats or margins or inline blocks (i think, sorry its late D:) if you need any more assistance feel free to lemme know!

thank you for this! you're a gem! i'll definitely come back, if i need any further assistance!

 

[rissa]

If you are wondering how the background image is appearing despite a lack of text; that is thanks to the 'height' element she added within the code. :D

As well was the [color=transparent].[/color] ! Remember that something always has to be inside the div in order for it to show up!

@insouciant glad i could help!

 

[Navuso]

make sure your image is the same size (height & width) or it gets a bit wonky.

If it's not the same length and width, you can play around with the background-size element to try and get a result that you like, as well as with background position.

Sample images

Example 1

.

.

.

.

.

.

Example 2

.

.

.

.

.

.

The different edits made:

For the first example:
• -None-
• Added background-size: contain;
• Added background-size: cover;
• Added background-size: 300%;
• Added background-size: 300%; background-position: center left;
• Added background-size: 300%; background-position: 15% 30%;

For the second example:
• -None-
• Added background-size: contain;
• Added background-size: cover;
• Added background-size: 200%;
• Added background-size: 200%; background-position: top center;
• Added background-size: 200%; background-position: 40% -5%;


by playing around with these, you don't have to have a perfectly square image to work with ;)

 

[Seeker]

I've got a question. Is there a way to change the color of the background (or change it to a picture) for the slide BBCode?

 

[rissa]

I've got a question. Is there a way to change the color of the background (or change it to a picture) for the slide BBCode?

Slide as in accordion?

 

[Nemopedia]

Click me!

Content

@Seeker, do you mean like what I have above? For that you just put in a simple 'background: color;' element within the slide. If you want a picture you use a 'background: url(IMG URL);'

{slide}[div=
	background: red;
	height: 300px;] Click me!
[/div]{/slide}

You can also 'cut out' the borders by using the 'overflow: hidden;' element and setting a negative margin in front of the slider. However, then you face the problem that there is no back button.

Click me!

Content

[div=
	width: 300px;
	height: 280px;
	overflow: hidden;][div=
	left: -70px;
	bottom: 20px;][slider=450x300]

EDIT: Note, this isn't mobile friendly, however. So, you will have to live with that.

 

[Navuso]

I've got a question. Is there a way to change the color of the background (or change it to a picture) for the slide BBCode?

Which slide code are you referring to?

The basic slides?

Title 1

Content 1

Content 2 goes here

Content 3 goes here

You have to have a min-height to it to make it not stick to just the text, but this lets it trail down with the overflow as well.





As you get to see here.

With title:

{slide=[div=background-color:#335577;]Title 1[/div]|center}[div=background-color:#6699cc; color:#000000; min-height:115px;]Content 1[/div]{/slide}

Without title:

{slide}[div=background-color:#6699cc; color:#000000; min-height:150px;]Content 2 goes here[/div]{/slide}

---

Accordion slides?

Your title goes here, lol

Plug in your content here.

Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah

It's not the neatest in the world, but it's better than nothing, right?

Title

Content

{slide=[div=background-color:#335577;]Your title goes here[/div]|center}[div=background-color:#6699cc; color:#000000;]Content here[/div]{/slide}

---

Stabs?

[stabs=bcenter]
{slide=

Your title goes here, lol

|center}

Plug in your content here.

Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah Blah blah blah

It's not the neatest in the world, but it's better than nothing, right?

{/slide}
{slide=

Another Title

|center}

And some more content

{/slide}
[/stabs]

{slide=[div=background-color:#335577;]Another Title[/div]|center}[div=background-color:#6699cc; color:#000000; min-height:200px;]And some more content[/div]{/slide}

---

Because of how the slides are done in the {} brackets instead of [] ones, you can add a div tag to the titles as well as the content. However, it's far from the most tidy.

The code tags only contain what I did for the {slide} part and not the actual tags around it. (Slider/Accordion/Stabs)


I'm not sure if there's a better/cleaner way to do that, but that's what I've found.



Edit: It would be amazing if Iwaku would notify you of when posts were made while you were typing yours up, lol. Well, I'm leaving it up because it covers all three styles with examples >.>;;[/hr][/hr]

 

[rissa]

To add to @Navuso 's code, if you include a margin: -7px; padding: 7px; to your codes (accordions, stabs) it'll get rid of the default border you see when you add a bg.

one

lorem

one

lorem

@darkflames13 IS STILL A GODSEND <3

 

[Navuso]

To add to @Navuso 's code, if you include a margin: -7px; padding: 7px; to your codes (accordions, stabs) it'll get rid of the default border you see when you add a bg.

one

lorem

one

lorem

darkflames13 IS STILL A GODSEND <3

And that is like coding 101, lmao. I can't believe that I missed that. (Actually I can. Coding on like 2 hours of sleep is not a good idea >.>;; )
Thank you for posting this~ Mainly because I know I'll forget it again at some point.

 

[Seeker]

Thank you @Nemopedia and @Navuso .

OH AND @rissa

 

[junebug]

Back again! :D

How do you put the scroll bars next the images on this page? :3

PROJECT - Ein Spiel Für Zwei

 

[rissa]

Off the top of my head I can think of two ways you can do it:

1. Use the table code posted on the first page, just copy+paste what's inside the [tr] [/tr] for each div (image and scrollbox) or
2. Wrap another div around each div you already have (for the circle image and the scrollbox) that has a width: #px; & display: inline-block; . You'll probably have to play around with the margins/placement for it to line up perfectly tho.

//when i'm not half dead i'll add some examples D:

 

[darkflames13]

@insouciant , Something like this?

Since you're already using divs, you can simply add display:inline-block; to both of them (like @rissa mentioned). I'm not too sure why they align weirdly when you do this (this is what happened when I tried), but to fix it you can just add vertical-align:top; to the circle image div.

I would show the code but I don't have any cause tried that on the fly with inspect element. hue. ;w;

 

[darkflames13]

I'm a bit late to the party, but I wanted to share this anyway. Regarding sliders, I've found a way to change the background of the sliders and still keep the back button function.

Content 1

Content 2

Content 3

◄ Back

► Next

[div=height:210px; overflow:hidden;][slider]
{slide}[div=background:purple; height:100px; z-index:32;]Content 1[/div]{/slide}
{slide}[div=background:purple; height:100px; z-index:32;]Content 2[/div]{/slide}
{slide}[div=background:purple; height:100px; z-index:32;]Content 3[/div]{/slide}
[/slider]
 
[div=width:410px; height:210px; background:purple; bottom:275px; z-index:31; pointer-events:none;][div=float:left; width:50px; height:inherit; background:black; display:inline-block; color:white;][div=display:table-cell; vertical-align:middle; height:inherit; text-align:center;]◄ Back[/div][/div][div=float:right; width:50px; height:inherit; background:black; display:inline-block; color:white;][div=display:table-cell; vertical-align:middle; height:inherit; text-align:center;]► Next [/div][/div][/div][/div]

It uses a similar method with how I cheat with stabs, but basically I cover the sliders with an entire div with a background. There's a div wrapped around the contents of the sliders that is then given a higher z-index than the one that covers the entire slider so that it can be seen. The property pointer-events:none; makes it so that the back and forward buttons underneath the div with that property are still clickable and functional.

This what it looks on mobile.

Alternatively, if you don't really mind how the buttons look, you can just do this:

Content 1

Content 2

Content 3

[div=height:210px; overflow:hidden;][slider]
{slide}[div=background:purple; height:100px; z-index:32;]Content 1[/div]{/slide}
{slide}[div=background:purple; height:100px; z-index:32;]Content 2[/div]{/slide}
{slide}[div=background:purple; height:100px; z-index:32;]Content 3[/div]{/slide}
[/slider]
 
[div=width:50px; height:210px; bottom:275px; z-index:31; display:inline-block; color:white; display:inline-block; pointer-events:none;][/div][div=display:inline-block; width:310px; height:210px; background:purple; bottom:275px; z-index:31;][/div][div=width:50px; height:210px; bottom:275px; z-index:31; display:inline-block; color:white; display:inline-block; pointer-events:none;][/div][/div]

On mobile, this one would look something like this: [link].
Sliders in general aren't really mobile compatible, so yeaaa. :'D
(Plain sliders on mobile)


Edit: Looking at this post on an actual phone now (instead of with the built in web browser thinggy that I used before *forgot what it was called*), I see that I was wrong, sliders are mobile compatible. oops. :'D

The first method that I showed looks the same on mobile as it does on desktop, but the second doesn't have the background fully covering the sliders.

What it really looks like on mobile

 

[junebug]

@darkflames13 Yeah, something like that. Is there a certain place I put "display:inline-block" and "vertical-align:top" in the codes themselves? And if I did align the scroll bar and circle icon with the divs, would that gray box pop up? If so, how would I get rid of that gray box?

 

[rissa]

@darkflames13 Yeah, something like that. Is there a certain place I put "display:inline-block" and "vertical-align:top" in the codes themselves? And if I did align the scroll bar and circle icon with the divs, would that gray box pop up? If so, how would I get rid of that gray box?

I believe it's just a bg, but I could be wrong.

 

[darkflames13]

@insouciant Just insert them anywhere in your existing divs. Property order doesn't really matter as far as I know of.
Gray box? Ohh, you mean the gap in this photo? If they're aligned, then there shouldn't be a gap. Adding vertical-align:top to the circle div is a quick fix to this.


Sample:

[div=border: 0px; border-radius:50%; width:200px; height:200px; background:purple; display:inline-block; vertical-align:top;][/div][div=background:grey; width:450px; height:150px; display:inline-block;][/div]

 

[junebug]

@darkflames13 I just mean the gray background? The gray part around the circle and scroll bar? And thank you! Then, to clarify, after I add both of those properties, I just play around with margins and what not to make it look the way I want it to?