New Div Tricks

[Kyra Perl]

Hey guys, I found a few fun things we can do with div and wanted to pass it along before the next invasion cycle.

First is a clickable play button for youtube videos.

There's two ways it can be set up.

Spoiler: 1- As a button

[center][div= width:100px; height: 30px; overflow: hidden; padding-top: 3px; border: 1px inset gray;][div= width:100px; height: 30px; background-color: gray; color: white;][fa]fa-play[/fa]  [fa]fa-pause[/fa][/div]
[div= width: 190px; height: 30px; opacity: 0%; margin-top: -110px; padding-left: 32px; ][media=youtube]VhywC_lph94[/media][/div][/div][/center]

Spoiler: 2- Seamlessly in your div

Objective
Location
Tags

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam imperdiet aliquam blandit. Nam dapibus interdum quam et finibus. Phasellus dictum, erat at suscipit sollicitudin, massa metus placerat odio, sit amet lacinia sapien diam ut metus. Aliquam rhoncus mi eget arcu placerat, ut convallis ex cursus. Aenean fermentum diam sed justo viverra venenatis. Etiam efficitur vehicula massa, sed pretium dui rutrum vel. Proin elit justo, posuere aliquet egestas ac, vestibulum eu ligula. Donec turpis ex, sollicitudin non sapien non, consectetur volutpat lectus. Donec id pretium metus. Integer rutrum risus vel pulvinar fringilla.

[center]
[div= width:100px; height: 22px; margin: auto; overflow: hidden][div= width:100px; height: 22px; color: white;][fa]fa-play[/fa]  [fa]fa-pause[/fa][/div]
[div= width: 190px; height: 22px; margin: auto; opacity: 0%; margin-top: -110px; padding-left: 32px; ][media=youtube]VhywC_lph94[/media][/div][/div][/center]

With the button, you can design it to your preference. Change the color, shape, background picture, etc. If you're new, check out here for some tips how.



Tips for trouble:

• If you're doing version 2 inside your template and you want it centered, it's very important to leave your margin-auto on. Take it off if you want it to align left.
• Be sure you put your changes on both div boxes if you want them to follow each other when moving them.
• If you start messing with your positioning and run into problems, change the opacity to 100% so you can see where the youtube box is. You want the play button in the middle. Changing the width of the template can make it disappear if you go too small.

Stay tuned for a few more (slightly less exciting) discoveries

 

[Kyra Perl]

And finally-- a solution for when your bios are mounds of text.

click

I'm hungry.

no click me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium magna non ornare efficitur. Nullam viverra, leo nec posuere auctor, massa nunc iaculis turpis, eget eleifend magna magna quis enim. Duis accumsan condimentum nunc. Quisque maximus vel mi eget dignissim. Donec neque erat, convallis non risus ac, fermentum tincidunt dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget vehicula ex. Integer quis felis sed felis bibendum ornare. Sed vel dui libero. Sed efficitur et ex non blandit. Maecenas feugiat elit in massa congue, vitae malesuada massa auctor.

Spoiler: code

[accordion]
{slide=click}Blurb{/slide}
{slide=no click me}more info{/slide}
[/accordion]

and here's a more customizable version:

Click Me

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium magna non ornare efficitur. Nullam viverra, leo nec posuere auctor, massa nunc iaculis turpis, eget eleifend magna magna quis enim. Duis accumsan condimentum nunc. Quisque maximus vel mi eget dignissim. Donec neque erat, convallis non risus ac, fermentum tincidunt dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget vehicula ex. Integer quis felis sed felis bibendum ornare. Sed vel dui libero. Sed efficitur et ex non blandit. Maecenas feugiat elit in massa congue, vitae malesuada massa auctor.

Morbi ornare risus volutpat efficitur faucibus. Sed laoreet, magna non iaculis dapibus, ligula sapien rhoncus eros, id interdum mi nunc in mi. Morbi ac elementum lorem, ac sollicitudin massa. In consequat libero metus, a dictum purus elementum congue. Proin tempus lorem at nunc feugiat, et tincidunt turpis porttitor. Integer eu dignissim mauris. Pellentesque non massa in metus gravida mollis. Pellentesque eu lacus mauris. Nunc in lobortis massa. In hac habitasse platea dictumst. Sed a tellus vel elit lobortis scelerisque. Integer vitae ante nec lectus condimentum lacinia non nec orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vestibulum vestibulum

Spoiler: code

[div= max-width: 620px; height: auto; margin: auto; background-color: #5b8075;][div=visibility: hidden;][accordion=100%]{slide=[div= visibility: visible; background-color: ##8fa59f; margin: -7px; padding: 7px;][div=font-family: arial black; letter-spacing: 1px;]click me[/div][/div]}[div= visibility: visible;][div= background-color: #8fa59f; color: grey; padding: 15px; ]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium magna non ornare efficitur. Nullam viverra, leo nec posuere auctor, massa nunc iaculis turpis, eget eleifend magna magna quis enim. Duis accumsan condimentum nunc. Quisque maximus vel mi eget dignissim. Donec neque erat, convallis non risus ac, fermentum tincidunt dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget vehicula ex. Integer quis felis sed felis bibendum ornare. Sed vel dui libero. Sed efficitur et ex non blandit. Maecenas feugiat elit in massa congue, vitae malesuada massa auctor.

Morbi ornare risus volutpat efficitur faucibus. Sed laoreet, magna non iaculis dapibus, ligula sapien rhoncus eros, id interdum mi nunc in mi. Morbi ac elementum lorem, ac sollicitudin massa. In consequat libero metus, a dictum purus elementum congue. Proin tempus lorem at nunc feugiat, et tincidunt turpis porttitor. Integer eu dignissim mauris. Pellentesque non massa in metus gravida mollis. Pellentesque eu lacus mauris. Nunc in lobortis massa. In hac habitasse platea dictumst. Sed a tellus vel elit lobortis scelerisque. Integer vitae ante nec lectus condimentum lacinia non nec orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vestibulum vestibulum[/div][/div][/accordion][/div][/div]

 

[Audren Sykes]

Nicely done. Maybe it's the settings on my browser (I wouldn't be surprised and am too lazy to test in others or unmodded right now) but after I start the playback clicking anywhere on the 'button' that's clickable just shifts the song position. Pause isn't an option. Neither is volume control of course.

 

[Kyra Perl]

This one is more a guilty pleasure, but I've seen people replicate this a few times so!

Authentic looking chats whose text boxes grow with your text length.

►Joza

·

Why is the garage door missing?

Kyra ◄

·

Yula.

Feth you could even make it scroll!

Spoiler: code

[div= max-width: 600px!important; height: auto; margin: auto; padding: 50px; padding-top: 20px; border: 2px solid white;]

[div=display: flex; flex-direction: column;][div=flex: 1;]
[IMG]https://cdn.discordapp.com/emojis/580599902057529384.png?v=1[/IMG]►[SIZE=30px][I][B][COLOR=rgb(61, 142, 185)]Joza[/COLOR][/B][/I][/SIZE]
[/div][div=flex:1;][div=
   height: 0px;
   width: 0px;
   border-top: 13px solid transparent;
   border-right: 26px solid #d5d5d5;
   border-bottom: 13px solid transparent;
   margin-bottom: -28px;][color=transparent]·[/color][/div][div=

   min-height: 35px; height: 100%;
   max-width: 300px; width: 100%;
   background-color: #d5d5d5;
   border: 2px solid #d5d5d5;
   border-radius: 8px;][div=
   margin-top: 5px;
   margin-left: 15px;
   padding: 3px;
   color: #000;
   font-size: 1em;][FONT=Courier New]Why is the garage door missing?[/FONT][/div][/div]
[/div]

[div=display: flex; flex-direction: column; align-items: flex-end;][div=flex:1;]
[RIGHT][SIZE=30px][I][B][COLOR=rgb(61, 142, 185)]Kyra[/COLOR][/B][/I][/SIZE] ◄ [IMG]https://cdn.discordapp.com/emojis/537540397036208129.png?v=1[/IMG][/RIGHT]
[/div][div=flex: 1;][div=
   height: 0px;
   width: 0px;
   border-top: 13px solid transparent;
   border-right: 26px solid #d5d5d5;
   border-bottom: 13px solid transparent;
   margin-bottom: -28px;][color=transparent]·[/color][/div][div=

   min-height: 35px; height: 100%;
   max-width: 300px; width: 100%;
   background-color: #d5d5d5;
   border: 2px solid #d5d5d5;
   border-radius: 8px;][div=
   margin-top: 5px;
   margin-left: 15px;
   padding: 3px;
   color: #000;
   font-size: 1em;][FONT=Courier New]Yula.[/FONT][/div][/div]       [/div][/div]


[/div][/div]

 

[Kyra Perl]

Nicely done. Maybe it's the settings on my browser (I wouldn't be surprised and am too lazy to test in others or unmodded right now) but after I start the playback clicking anywhere on the 'button' that's clickable just shifts the song position. Pause isn't an option. Neither is volume control of course.

Alack alas working on that!

edit: fixed!

 

[Kyra Perl]

Last for the night is hiding your scroll bar. To preface, this is 100% Runi Verin 's data pad template. I'm just tweaking it to hide her bar cause im too lazy to make one of my own and frankly hers is already awesome.

Spoiler: Here's what a hidden scroll bar looks like

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam diam eros, eleifend quis commodo sed, semper in neque. Aenean justo justo, bibendum ut laoreet non, efficitur in augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet tempus nisl. Sed non porttitor nisl. Nullam ultrices, justo eu mollis finibus, tortor arcu lacinia tortor, eu vehicula ipsum quam ac felis. Integer id dolor in tellus pellentesque blandit non vel dolor. Vivamus feugiat mollis pretium. Aenean nisi augue, interdum et enim dapibus, ornare luctus nunc. Proin ac massa at justo porta ultricies id in erat. Cras tempus dignissim risus in consectetur. Morbi ornare fermentum lorem, et ultrices justo ullamcorper at.

---

Duis vestibulum ipsum at dignissim feugiat. Duis nunc felis, blandit blandit ornare at, pellentesque non ex. Aliquam hendrerit luctus odio. Sed posuere laoreet libero non consequat. Fusce sit amet magna ut dui interdum sollicitudin eget sit amet risus. Sed quis felis luctus, lacinia elit eget, vulputate sapien. Morbi non ex vitae orci semper sagittis in in diam. Pellentesque vestibulum leo mi, vitae blandit mauris fringilla a. Vestibulum porttitor eros sem, et suscipit nibh egestas ut. Maecenas posuere tincidunt blandit. Duis nec faucibus libero, sit amet eleifend eros. Nullam diam nisi, consectetur non dolor euismod, viverra placerat est. Proin bibendum dui non mauris convallis fermentum. Nam rutrum nunc eu eleifend vulputate. Vestibulum eget mollis dolor.

---

Nulla augue elit, sodales nec metus vestibulum, faucibus blandit urna. Quisque lacus risus, congue vitae malesuada pellentesque, viverra in lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tempus mauris diam, sed porta magna rutrum vel. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed dignissim massa et purus pulvinar bibendum. Aenean bibendum nunc id laoreet commodo. Quisque et consectetur nisi, sed elementum odio. Sed at consequat massa. Morbi mattis, ipsum id dictum luctus, elit nibh luctus mi, quis tempor quam orci vulputate quam. Proin convallis, justo quis semper venenatis, ex dolor aliquet arcu, ac pellentesque erat urna sit amet ligula. Morbi a massa maximus, dapibus dolor a, facilisis augue. Maecenas magna enim, cursus nec tempus gravida, ultricies in turpis.

Aliquam erat volutpat. Suspendisse augue lorem, lacinia eget luctus vel, tincidunt et turpis. Quisque nec egestas quam. Praesent auctor porttitor posuere. In sed semper risus. Pellentesque eu quam nisi. Phasellus elementum finibus orci. Sed quis auctor magna. Ut at leo enim. Pellentesque suscipit elit ut urna luctus scelerisque quis et massa. Etiam porta, odio in mollis tempor, nisl lacus interdum turpis, eu tincidunt sapien orci eu orci. Cras est nulla, pellentesque vel eros quis, imperdiet volutpat nunc. Duis venenatis tempor magna, id viverra ligula maximus non.

Nam ultricies venenatis mauris. Proin vitae ullamcorper sapien. Aenean sed purus eget enim mollis pharetra at in nunc. Quisque ac consectetur eros, ac facilisis augue. Nulla venenatis magna lacus, eleifend congue enim euismod eu. Suspendisse urna velit, ultricies non sollicitudin vitae, porta at dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae ipsum id nunc accumsan convallis sed ac ex. Integer faucibus massa eros, eget pellentesque nunc vestibulum quis. Integer mattis orci sed lectus gravida, nec vestibulum turpis pellentesque. Nulla iaculis ex commodo, facilisis massa at, finibus leo. Nullam eget nisi convallis, posuere velit et, consequat est.

[div='color: #292E35; margin: 0 auto; max-width: 514px; height: 788px; background-image: url("https://i.imgur.com/iLj0dBV.png"); ']-[div=background: rgba(0, 0, 0, 0.0);color: #ffffff; font-family: courier new;  text-shadow: 0px 0px 10px #000; border: 0px solid white; margin: 58px 0 0 50px; padding: 10px 60px 10px 10px; max-width: 750px;height: 607px; overflow:hidden;]
[div= width: 120%; height: 788px; overflow-y: scroll; margin-left: 00%; padding-right: 20%;]

Text
[/div][/div][/div]

Okay, so essentially what you need is two divs

• The first has all your basics. Set those up at your discretion
• Set your height and width (don't do max-width, do 'width: #px').
• add 'overflow: hidden;'

And a second div inside your first. In that div, add

• width: 120%
• the height you desire for your text box
• overflow-y: scroll;
• margin-left: 00%;
• padding-right: 20%;

You can play with the latter two numbers if needed. Otherwise, you're good to go!

 

[Captain Jordan]

Are these still working?

Just realized the play button isn't engaging the sound anymore. It was working not even a week ago when I checked last. Maybe a new board update changed things?

 

[Kyra Perl]

It's working for me. Do you have your browser minimized in any way? Isyoursoundon.

[center]
[div= width:100px; height: 22px; margin: auto; overflow: hidden][div= width:100px; height: 22px; color: white;][fa]fa-play[/fa]  [fa]fa-pause[/fa][/div]
[div= width: 190px; height: 22px; margin: auto; opacity: 0%; margin-top: -110px; padding-left: 32px; ][media=youtube]VhywC_lph94[/media][/div][/div][/center]

try turning your opacity to 100% and check that the youtube button lines up. adjust the margins and padding in tiny increments if needed

lemme know!

 

[Captain Jordan]

It's working in Chrome still. Broken in Firefox, that's why it stopped working for me.

 

[Kyra Perl]

Solution for those that weren't in our pms-- Update your firefox and check your extensions (turn them off one after another.) An extension is blocking it.