GRAPHICS SHOP Sam's bbCode Tidbits!

Discussion in 'MEDIA SHOPS & REQUESTS' started by Samster, Mar 30, 2015.

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

    So we have our video.


    [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]



    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]



    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]



    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]
    — 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]



    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]
    — 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]


    Then there're things like my signature, which have an animated background. These are far more simple:
    Our .gif:
    [​IMG]
    [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. ^.^;)


    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]


    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]


    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]


    And finally to spice it up. :3
    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
     
    #1 Samster, Mar 30, 2015
    Last edited: Mar 30, 2015
    • Love x 7
    • Thank x 7
    • Useful x 5
    • You Get a Cookie x 1
    • Nice execution! x 1
  2. Hey-o! Youtube's new layout is being weird, and I think I finally found a way to put things together nicely! Basically, I've created a play button, and while there is less control over what happens aside from pausing and continuing after, it can be formatted to fit a variety of themes if you're willing to tinker with the styling. :D

    Here's the bbCode:
    Code:
    [div="float: right; border-radius: 4px; width: 32px; height: 32px; box-shadow: 0 0 2px 1px #0080FF;"]
    	[div="opacity: 0.125; width: 32px; height: 32px; overflow: hidden;"]
    		[div="position: absolute; top: -134px; left: 0;"]
    			[media=youtube]MqoANESQ4cQ[/media]
    		[/div]
    	[/div]
    [/div]
    

    The catch is that the left: 0; property needs a different value (left: -235px;) for Blogs, otherwise you'll just have a dark box with no ability to start the player. :c

    Most of the styling you'll want to do in the first [div] element, while the others, just like the previous design, are mostly for internal structure to make this thing work. Also, don't forget to remove extra newlines from this code when you actually use this, or else things will get wonky! :o

    Have fun! :3
     
    • Thank Thank x 4
    • Love Love x 3
    • Bucket of Rainbows Bucket of Rainbows x 1
  3. I wish I could give this more ratings~
     
    • Thank Thank x 1
  4. This is so incredibly helpful! Thank you Love ♥
     
    • Thank Thank x 1
  5. Please keep in mind, those of you checking in on this, this announcement by Diana. Especially when designing your signatures, consider those users who have limited access to download speed or who are on metered connections. Keep your total signatures at most 500KB total. This is particularly important for animated signature backgrounds because the .gif format has an incredibly poor memory scaling! ♥