Resource spook's corner revamped: 100% freebies, 100% mobile friendly

Discussion in 'BBCode Center' started by spookie spook, Apr 10, 2017.

  1. [​IMG]

    ☆★☆
    hi.
    my name is ash, but i usually go by spook or spookie. i'm your typical depressed emo guy who also happens to be mediocre at the thing called bbcode... which is why you're reading this.

    all of my codes are free to use... every last one of them. i strongly believe that all hobbyist, nonprofit codes like these should be free for everyone and not "exclusive" and hoarded away. nothing is lost by allowing others to borrow a code, they're not worth money and don't decrease in quality or value if used by more than one person for something as casual and transformative in nature as a roleplay. i won't bore you with a rant about this, but it's why i've promised to share every decent code i create freely. you will never find me hogging certain designs or freaking out if someone ends up creating a similar code, and you're welcome to pick apart my work and learn from it as well as edit it to your preferred style as long as the credit at the bottom of the design remains.

    [​IMG]
    ☆the rules☆

    ★all codes are 100% mobile friendly and were created on my crash-happy old phone... and believe me, if it can handle them, you have absolutely nothing to worry about.

    ★you do NOT need to ask if you can use these codes, but you should LIKE the ones you're planning on using. it lets me know you appreciate that particular design, and it's a nice way of saying thank you.

    ★feel free to pick apart my codes, tinker with them, learn from them. they're nothing spectacular, but you're free to tear them apart and put them back together as long as you don't claim them as your own.

    ★if you don't like the backgrounds, fonts, colors ect, go ahead and change them... i promise i won't be offended.

    ★please do NOT remove the credit. it's there for a reason, don't make me cry any more than i already am ;-;

    ★that's about it, i think...

    [​IMG]

     
  2. #2 spookie spook, Apr 10, 2017
    Last edited: Apr 10, 2017
    [​IMG]

    ✰name here✰
    mood: ??? | currently: ??? | with: ??? | mentions: ???
    this is a very basic ic post designed to look decent while functioning on low-end/dated phones without crashing or glitching. it's not the most exciting design, but it sure looks a lot better than plain text, right?

    features convenient character/interaction overview and basic scrollbox as well as a neat place for an image/fc.
    code by @spookie spook

    Code:
    [centerblock=70%][border=3px solid black][center][IMG]https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full[/IMG][bg=black][font=Special Elite][color=white][center]
    [size=10]✰name here✰[/size]
    [size=2]mood: ??? | currently: ??? | with: ??? | mentions: ???[/size][/center][/color][/font][/bg][/center][/border][center][/center][/centerblock][center][centerblock=70%][border=3px solid black][scroll=300px ][font=Merriweather][size=17]t[/size][size=3]his is a very basic ic post designed to look decent while functioning on low-end/dated phones without crashing or glitching. it's not the most exciting design, but it sure looks a lot better than plain text, right?
    
    features convent character/interaction overview and basic scrollbox as well as a neat place for an image/fc.
    [/size][/font][/scroll][font=Merriweather][size=3][/size][/font][/border][/centerblock]
    [sub][font=Merriweather][size=1]code by [USER=5845]@spookie spook[/USER][/size][/font][/sub][/center]
     
  3. this is 'in pieces', a cs design that i'm pretty proud of. it has my signature emo style, but also a bit of the sleek and modern design that appears to be popular with bbcode here. you can add or remove image and quote blocks pretty easily, so it shouldn't be hard to customize.

    like all my codes, it's 100% mobile friendly and also part of a set, so i'll be posting the ic and starter post codes soon. enjoy!


    name here

    [​IMG]


    put an angsty quote here.

    [​IMG]
    insert dark, depressing stuff about your character here.
    insert dark, depressing stuff about your character here.
    insert dark, depressing stuff about your character here.
    insert dark, depressing stuff about your character here.
    insert dark, depressing stuff about your character here.
    [​IMG]


    insert an angsty quote here.

    [​IMG]


    insert an angsty quote here.
    code by @spookie spook

    Code:
    centerblock=50%][border=2px solid black][bg=black][center][font=Special Elite][color=white][size=15]✮
    name here[/size][/color][/font][/center][/bg][/border][/centerblock]
    
    [centerblock=50%][div=background:url('https://www.rpnation.com/media/img_7462.25653/full');background-size:cover;border:2px black solid;color: #000000;padding:5px;][center][IMG]https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full[/IMG][/center][/div][/centerblock]
    
    [centerblock=50%][border=2px solid black][bg=black][center][font=Special Elite][color=white]✮
    put an angsty quote here.[/color][/font][/center][/bg][/border][/centerblock]
    
    [centerblock=50%][div=background:url('https://www.rpnation.com/media/img_7462.25653/full');background-size:cover;border:2px black solid;color: #000000;padding:5px;][center][IMG]https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full[/IMG][/center][/div][/centerblock][centerblock=58%][border=0px solid black][accordion=50%]{slide=center | [bg=black][color=white]✮[/color][/bg]}[bg=white][font=Merriweather][size=1]insert dark, depressing stuff about your character here.[/size][/font][/bg]{/slide}{slide=center | [bg=#323232][color=white]✮[/color][/bg]}[bg=white][font=Merriweather][size=1]insert dark, depressing stuff about your character here.[/size][/font][/bg]{/slide}{slide=center | [bg=#575757][color=white]✮[/color][/bg]}[bg=white][font=Merriweather][size=1]insert dark, depressing stuff about your character here.[/size][/font][/bg]{/slide}{slide=center | [bg=#A2A2A2][color=white]✮[/color][/bg]}[bg=white][font=Merriweather][size=1]insert dark, depressing stuff about your character here. [/size][/font][/bg]{/slide}{slide=center | [bg=#D1D1D1][color=white]✮[/color][/bg]}[bg=white][font=Merriweather][size=1]insert dark, depressing stuff about your character here.[/size][/font][/bg]{/slide}[/accordion][/border][/centerblock]
    [centerblock=50%][div=background:url('https://www.rpnation.com/media/img_7462.25653/full');background-size:cover;border:2px black solid;color: #000000;padding:5px;][center][IMG]https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full[/IMG][/center][/div][/centerblock]
    
    [centerblock=50%][border=2px solid black][bg=black][center][font=Special Elite][color=white]✮
    insert an angsty quote here.[/color][/font][/center][/bg][/border][/centerblock]
    
    [centerblock=50%][div=background:url('https://www.rpnation.com/media/img_7462.25653/full');background-size:cover;border:2px black solid;color: #000000;padding:5px;][center][IMG]https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full[/IMG][/center][/div][/centerblock]
    
    [centerblock=50%][border=2px solid black][bg=black][center][font=Special Elite][color=white]✮
    insert an angsty quote here. [/color][/font][/center][/bg][/border][/centerblock][center][sub][font=Special Elite][size=1]code by @spookie spook[/size][/font][/sub][/center]
     
    Kyouka and revolting like this.
  4. back again with a not-exactly-new code... this was designed for a rp i haven't yet launched, and i'm too lazy to change the color scheme. obviously, you're welcome to adjust it to your personal preference. as for using this code for my roleplay... well... i'll get around to it someday.











    title
    Text or something.

    title
    Text or something.

    title
    Text or something.

    title
    Text or something.

    title
    Text or something.
    code by @spookie spook

    Code:
    [centerblock=98][div=background:url('https://www.rpnation.com/media/img_8185.27344/full');background-size:cover;border:0px white solid;color: #000000;padding:4px;]
    
    
    
    
    
    
    
    
    [/div][/centerblock]
    
    [centerblock=98][bg=#FADB6F][centerblock=68][border=4px solid white][center][font=Amatic SC][size=35px][color=white][b]title[/b][/center][/font][/size][/color][/border][border=0px solid white][accordion=100%]{slide=center | [bg=#FADB6F][color=white][size=20]▽[/size][/color][/bg]}[bg=#FADB6F][font=Raleway][color=white][size=20]T[/size][size=5]ext or something.[/size][/color][/font][/bg]{/slide}[/accordion][/border][/bg][/centerblock][/centerblock]
    
    [centerblock=98][bg=#FAB96F][centerblock=68][border=4px solid white][center][font=Amatic SC][size=35px][color=white][b]title[/b][/center][/font][/size][/color][/border][border=0px solid white][accordion=100%]{slide=center | [bg=#FAB96F][color=white][size=20]▽[/size][/color][/bg]}[bg=#FAB96F][font=Raleway][color=white][size=20]T[/size][size=5]ext or something.[/size][/color][/font][/bg]{/slide}[/accordion][/border][/bg][/centerblock][/centerblock]
    
    [centerblock=98][bg=#FA8F6F][centerblock=68][border=4px solid white][center][font=Amatic SC][size=35px][color=white][b]title[/b][/center][/font][/size][/color][/border][border=0px solid white][accordion=100%]{slide=center | [bg=#FA8F6F][color=white][size=20]▽[/size][/color][/bg]}[bg=#FA8F6F][font=Raleway][color=white][size=20]T[/size][size=5]ext or something.[/size][/color][/font][/bg]{/slide}[/accordion][/border][/bg][/centerblock][/centerblock]
    
    [centerblock=98][bg=#FA6D6F][centerblock=68][border=4px solid white][center][font=Amatic SC][size=35px][color=white][b]title[/b][/center][/font][/size][/color][/border][border=0px solid white][accordion=100%]{slide=center | [bg=#FA6D6F][color=white][size=20]▽[/size][/color][/bg]}[bg=#FA6D6F][font=Raleway][color=white][size=20]T[/size][size=5]ext or something.[/size][/color][/font][/bg]{/slide}[/accordion][/border][/bg][/centerblock][/centerblock]
    
    [centerblock=98][bg=#FA006F][centerblock=70%][border=4px solid white][center][font=Amatic SC][size=35px][color=white][b]title[/b][/center][/font][/size][/color][/border][border=0px solid white][accordion=100%]{slide=center | [bg=#FA006F][color=white][size=20]▽[/size][/color][/bg]}[bg=#FA006F][font=Raleway][color=white][size=20]T[/size][size=5]ext or something.[/size][/color][/font][/bg]{/slide}[/accordion][/border][/bg][/centerblock][/centerblock]
    [center][sub][font=Raleway][size=1]code by @spookie spook[/size][/sub][/font][/center]
    
     
  5. #5 spookie spook, Jul 8, 2017
    Last edited: Jul 19, 2017




    name here

    | location | mood | currently | with |



    an updated edition of the heartache code, now modified to look better on larger formats and devices while retaining its original mobile friendliness.

    also features a convenient accordion to stash your tags/mentions without taking away the clean lines.

    this scrolls, and it doesn't cut off on mobile.
    mentions:
    [​IMG]


    Code:
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:100px;width:100px;border-radius:100px;border:2px #373737 solid;color: #000000;padding:30px;]
    [/div][centerblock=70][border=1px solid #373737; height:0; padding:0][bg=transparent; display:none;].[/bg][/border]
    
    [border=1px solid #373737; height:0; padding:0][bg=transparent; display:none;].[/bg][/border]
    
    [border=1px solid #373737; height:0; padding:0][bg=transparent; display:none;].[/bg][/border][/centerblock]
    
    [centerblock=80][bg=#363636][center][font=Raleway][color=ghostwhite][size=6][div=padding 4px; text-shadow: 0px 0px 5px white]name here[/size]
    [size=3]| location | mood | currently | with |[/size][/font][/color][size=3][/center][/bg][/div]
    [div= padding; 4px; border-radius:0px; background-color: #F0F0F0; color:#363636; height:250px; overflow:auto;][centerblock=90][font=Raleway][center]
    
    this scrolls, and it doesn't cut off on mobile.
    [/center][/font][border=0px solid #F0F0F0][accordion=70%]{slide=center | [bg=#F0F0F0][color=#363636][fa]fa-heartbeat[/fa][/color][/bg]}[bg=#F0F0F0]mentions:[/bg]{/slide}[/accordion][/border][/centerblock][/div][/centerblock][centerblock=80][bg=#F0F0F0][center][IMG]https://www.rpnation.com/media/gif.26764/full[/IMG][/center][/bg][/centerblock]
    
    [centerblock=80][bg=#363636][color=ghostwhite][font=Raleway][size=1][center][div=padding 4px; text-shadow: 0px 0px 5px white]code by [USER=5845]@spookie spook[/USER][/div][/center][/size][/font][/color][/bg][/centerblock]
     
  6. These are awesome!!
     
    spookie spook likes this.
  7. awwh, thank you so much ^^
     
  8. here is the code to helena, a cs i made custom for my own rp 'the place'. i really like the way it turned out, and it should be compatible with most monitor resolutions as well as mobile devices.






    helena
    ------------------///------------------
    in loving memory

    what's the worst that i can say?
    test
    things are better if i stay
    test
    so long and goodnight
    test
    so long and goodnight...
    test

    code by @spookie spook

    Code:
    [centerblock=90][div=background:url('https://www.rpnation.com/media/img_8877.29005/full');background-size:cover;border:0px black solid;color: #000000;border-radius:5px;padding:4px;]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin:0 auto;border:2px black solid;color: #000000;height:100px;width:100px;border-radius:100px;padding:30px;]
    
    [/div]
    [center][color=white][size=100px][font=Bad Script]helena[/size]
    [size=12px]------------------///------------------[/size]
    [size=15px]in loving memory[/size]
    [/font][/color][/center]
    
    [centerblock=85][border=0px solid #F0F0F0][accordion=70%]{slide=center | [bg=#414141][color=ghostwhite][font=Raleway][size=12px]what's the worst that i can say?[/size][/font][/color][/bg]}[bg=#F0F0F0]test[/bg]{/slide}[/accordion][/border]
    [border=0px solid #F0F0F0][accordion=70%]{slide=center | [bg=#373737][color=ghostwhite][font=Raleway][size=12px]things are better if i stay[/size][/font][/color][/bg]}[bg=#F0F0F0]test[/bg]{/slide}[/accordion][/border]
    [border=0px solid #F0F0F0][accordion=70%]{slide=center | [bg=#282828][color=ghostwhite][font=Raleway][size=12px]so long and goodnight[/size][/font][/color][/bg]}[bg=#F0F0F0]test[/bg]{/slide}[/accordion][/border]
    [border=0px solid #F0F0F0][accordion=70%]{slide=center | [bg=#222222][color=ghostwhite][font=Raleway][size=12px][i]so long and goodnight...[/i][/size][/font][/color][/bg]}[bg=#F0F0F0]test[/bg]{/slide}[/accordion][/border][/centerblock]
    
    [center][size=3px][color=white][font=Raleway]code by @spookie spook[/font][/color][/size][/center]
    [/div][/centerblock]
     
  9. wowwie I really love your codes they're so nice ♥ ♥
     
    spookie spook likes this.
  10. These are great ^.^
     
    spookie spook likes this.
  11. These are great! Definitely gonna use.
     
    spookie spook likes this.
  12. This saved my life, thank you so much <3
     
    spookie spook likes this.
  13. Thanks for the MCR reference; listening to them really decreased my stress levels this morning.
     
    spookie spook likes this.
  14. Thank you for the amazing codes! They all look lovely. c:
    //I especially like how they're mobile friendly, haha. ♥
     
    spookie spook likes this.
  15. #15 spookie spook, Sep 4, 2017
    Last edited: Sep 4, 2017

    ✕demolition lovers✕


    urbex; noun;
    the study of parts of civilization that are normally unseen or off-limits, such as abandoned structures, drains, sewers, ect.;


    ✕✕✕

    intro;

    this is probably my laziest code to date and took all of five minutes, but i'll share it anyway. it's currently themed to fit one of the rps i'm developing, but obviously it can be modified and the picture swapped out.

    code by @spookie spook

    Code:
    [centerblock=80][div=background:url('https://www.rpnation.com/media/house.30041/full');background-size:cover;border:0px black solid;color: #000000;border-radius:0px;padding:4px;]
    [centerblock=60][div=padding:5px; background-color:whitesmoke; opacity:0.9; border:0px white solid; border-radius:0px;][center][size=25px][font=Special Elite]✕demolition lovers✕[/font][/size][/center][/div]
    
    [div=padding:5px; background-color:whitesmoke; opacity:0.9; border:0px white solid; border-radius:0px; height:300px; overflow:auto;][center][font=Special Elite][size=10px][b]urbex; noun;[/b]
    the study of parts of civilization that are normally unseen or off-limits, such as abandoned structures, drains, sewers, ect.;[/size][/font]
    
    ✕✕✕
    
    [b][size=18px][font=Special Elite]intro;[/font][/size][/b]
    
    [font=Alegreya][size=15px]this is probably my laziest code to date and took all of five minutes, but i'll share it anyway. it's currently themed to fit one of the rps i'm developing, but obviously it can be modified and the picture swapped out. [/size][/font][/center][/div][/centerblock][center]
    [font=Special Elite][size=11px][color=whitesmoke]code by [USER=5845]@spookie spook[/USER][/center][/font][/size][/color][/div][/centerblock]
     
  16. I love your codes! <3
     
    spookie spook likes this.
  17. Definitely using no. 2 for my roleplays, with your credit of course. c:
    These are simply elegant and inspiring.
     
    spookie spook likes this.









  18. SHADOW MOSES
    a code for interest checks and roleplay starters, though it could also make a nice cs. features mobile-friendly scrollbox and two scrolling image boxes. you can easily add or remove image placeholders, so it can technically have as many or few images as you desire.









    code by @spookie spook

    Code:
    [centerblock=70][border=3px solid #414141][border=1px solid black][div=padding:0px; height:200px; overflow:auto;][div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc[/fa][/center][/div][/border][/border][/centerblock]
    
    [centerblock=70][border=1px solid #414141][bg=#414141] 
    [/bg][/border][/centerblock]
    
    [centerblock=70][border=1px solid black][bg=black] [/bg][/border][/centerblock]
    
    [centerblock=70][div=padding: 3px; background-color: #A8A7A7; opacity: 0.8; height: 200px; box-shadow: 2px 2px 3px black, 3px 3px 4px #363636; overflow:auto;][center][size=100px][font=Megrim][b][color=black][div=padding: 0 px; text-shadow: 3px 3px 3px ghostwhite]SHADOW MOSES[/div][/color][/b][/font][/size][font=Raleway][size=13px][color=black ]this is a filler paragraph to give you an idea of what actual writing will look like when placed here.[/color][/size][/font][/center][/div][/centerblock]
    
    [centerblock=70][border=1px solid black][bg=black] [/bg][/border][/centerblock]
    
    [centerblock=70][border=1px solid #414141][bg=#414141] 
    [/bg][/border][/centerblock]
    
    [centerblock=70][border=3px solid #414141][border=1px solid black][div=padding:0px; height:200px; overflow:auto;][div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center]
    
    [div=background:url('https://www.rpnation.com/media/custom-img-placeholder-blk.25844/full');background-size:cover;margin: 0 auto;height:200px;width:200px;border-radius:0px;border:0px #373737 solid;color: #000000;padding:30px; overflow: auto;] [/div][center][fa]fa-sort-desc fa[/fa][/center][/div][/border][/border]
    [center][font=Raleway][color=black][size=12px]code by @spookie spook[/size][/color][/font][/center][/centerblock]
     
  19. *stumbles into thread*
    *stands and dusts self up*
    *becomes randomly tsundere*

    IT'S NOT LIKE I THINK THESE ARE REALLY SUPER-DUPER COOL OR ANYTHING, BAKA!
     
    spookie spook likes this.

Share This Page