- Posting Speed
- Slow As Molasses
- Genres
- Science Fantasy
Howdy! :D
Lately I've been experimenting a whole lot with Iwaku's unique set of features, and I've come up with a few things which apparently haven't been picked up on yet. A lot of people have been asking me how I'm doing these things, so I guess it's about time I publish a few tricks.
While I'm here, I'm also interested in helping you guys fancy up your content, so if you have an aesthetic in mind and would like me to work with you on it, feel free to ask about it, here! :3
So, the first thing I got a lot of attention about was this:
Then there're things like my signature, which have an animated background. These are far more simple:
Anyhow, I've done a lot of character sheet and roleplay post styling in the past, and I thought some of you might like a few pointers or a freebie template or two.
I'm not certain how efficient I'll be, but I'll certainly be paying attention! :3
Lately I've been experimenting a whole lot with Iwaku's unique set of features, and I've come up with a few things which apparently haven't been picked up on yet. A lot of people have been asking me how I'm doing these things, so I guess it's about time I publish a few tricks.
While I'm here, I'm also interested in helping you guys fancy up your content, so if you have an aesthetic in mind and would like me to work with you on it, feel free to ask about it, here! :3
So, the first thing I got a lot of attention about was this:
So we have our video.
Now we want to make it really just the controls, so we try making it smaller with CSS.
But that didn't work because the video's not aligned correctly; so we use another [div] on the inside.
Not pretty enough? Okay, a third [div] on the outside.
Well, that's not right; the controls aren't in the right spot! Let's add some more CSS to that outermost [div].
At this point, the snippet will go exactly where you want it to go. If you leave a line before or after it, there will be blank space; if you want stuff hugging the edges, you'll have to write them on the same line like I have in this post. For clarity's sake, I've left the code broken up across multiple lines; in practice, you would condense it all onto one line.
So, here's your code, without any arrows:
[media=youtube]QMxNTaCef60[/media]
Now we want to make it really just the controls, so we try making it smaller with CSS.
→ [div="height: 18px; overflow: hidden;"]
[media=youtube]QMxNTaCef60[/media]
→ [/div]
[media=youtube]QMxNTaCef60[/media]
→ [/div]
But that didn't work because the video's not aligned correctly; so we use another [div] on the inside.
[div="height: 18px; overflow: hidden;"]
→ [div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
→ [/div]
[/div]
→ [div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
→ [/div]
[/div]
Not pretty enough? Okay, a third [div] on the outside.
→ [div="border-radius: 4px; background-color: #1b1b1b; padding: 4px;"]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
→ [/div]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
→ [/div]
Well, that's not right; the controls aren't in the right spot! Let's add some more CSS to that outermost [div].
— OR —
[div="→ display: inline-block; ← border-radius: 4px; background-color: #1b1b1b; padding: 4px;"]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
— OR —
[div="→ text-align: center; ← border-radius: 4px; background-color: #1b1b1b; padding: 4px;"]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
At this point, the snippet will go exactly where you want it to go. If you leave a line before or after it, there will be blank space; if you want stuff hugging the edges, you'll have to write them on the same line like I have in this post. For clarity's sake, I've left the code broken up across multiple lines; in practice, you would condense it all onto one line.
So, here's your code, without any arrows:
[div="display: inline-block; border-radius: 4px; background-color: #1b1b1b; padding: 4px;"]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
— OR —
[div="text-align: center; border-radius: 4px; background-color: #1b1b1b; padding: 4px;"]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
[div="height: 18px; overflow: hidden;"]
[div="position: absolute; bottom: 278px;"]
[media=youtube]QMxNTaCef60[/media]
[/div]
[/div]
[/div]
Then there're things like my signature, which have an animated background. These are far more simple:
Our .gif:
Because of the nature of an [img] tag, we can't put any content over this background. So, instead, we'll use a [div], which is very good at putting words in boxes! :D
These tags use inline CSS, so we can do a whole lot more with them than we can with most other bbCodes. One of the things we can do with them is add a background-image like so:
Well that can't be right, right? :S
What happened is that by default, these elements require content to stretch around, and will otherwise take minimal vertical space. So, let's add some height and width!
Uh-oh! Where's the rest of it? D:
Right down below, actually. The background isn't resized or repositioned unless we tell it to be!
Of course, now we've got some blank space ...
And to add some content ...
And finally to spice it up. :3
I hope that helps! :D
[img]http://www.samsung.com/ru/x-store/img/loading.gif[/img]
Because of the nature of an [img] tag, we can't put any content over this background. So, instead, we'll use a [div], which is very good at putting words in boxes! :D
These tags use inline CSS, so we can do a whole lot more with them than we can with most other bbCodes. One of the things we can do with them is add a background-image like so:
[div="background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);"][/div]
Well that can't be right, right? :S
What happened is that by default, these elements require content to stretch around, and will otherwise take minimal vertical space. So, let's add some height and width!
[div="
→ height: 128px; width: 512px; ←
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
[/div]
(I'm doing a lot of funky formatting just to make it look nice; remember that most of this will end up on one line in the end. ^.^;)→ height: 128px; width: 512px; ←
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
[/div]
Uh-oh! Where's the rest of it? D:
Right down below, actually. The background isn't resized or repositioned unless we tell it to be!
[div="
→ background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat; ←
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"][/div]
→ background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat; ←
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"][/div]
Of course, now we've got some blank space ...
[div="
→ background-color: #000; ←
background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"][/div]
→ background-color: #000; ←
background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"][/div]
And to add some content ...
What? How did you do that? :o
[div="
background-color: #000;
background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
→ What? How did you do that? :o ←
[/div]
background-color: #000;
background-size: 50%; background-position: 64px 50%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
→ What? How did you do that? :o ←
[/div]
And finally to spice it up. :3
The
R leplay
R leplay
[div="
→ line-height: 100%; text-align: center; letter-spacing: 0.5em; font-size: 48px; ←
background-color: #000;
background-size: 50%; background-position: 0px 30%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
The
R leplay
[/div]
→ line-height: 100%; text-align: center; letter-spacing: 0.5em; font-size: 48px; ←
background-color: #000;
background-size: 50%; background-position: 0px 30%; background-repeat: no-repeat;
height: 128px; width: 512px;
background-image: url(http://www.samsung.com/ru/x-store/img/loading.gif);
"]
The
R leplay
[/div]
I hope that helps! :D
Anyhow, I've done a lot of character sheet and roleplay post styling in the past, and I thought some of you might like a few pointers or a freebie template or two.
I'm not certain how efficient I'll be, but I'll certainly be paying attention! :3
Last edited: