Resource Mads' Coding Freebies

[PrincessMuk]

Hey, y'all! I'm PrincessMuk, otherwise known as Mads, and I'm here today to start my own freebies thread!

All of my code is free to use with credit. I've been practicing my coding for a few months now and I think I'm getting the hang of it enough to post, so here we are ^^ The way I space out my coding is pretty much the same as sox since I saw a lot of their coding and liked the way the spacing looked (very easy for my ADHD brain to keep track of what's going on, haha) so I've been coding like that ever since. I promise I'm not copying them, though, lol! My coding is all my own.

Anyways, I'm learning new things all the time and I hope someday to make really complicated code! All of you are free to alter my code if you choose to use it, just please keep the credit in. Of course, if there's just one specific thing you take from my code because you aren't sure how to do it yourself, you can take that without any strings attached ^^ I don't own the way to do one thing, after all.

I hope you all enjoy my code! I've worked very hard to get to the skill level I'm at and I hope to improve even further in the year to come.

 

[PrincessMuk]

Scarlet Royalty​

Hello everyone! This is one of the first codes I created (that actually turned out usuable, at least, lmao) and it is an in-character reply thread. The example used here is my character Jing Fei from the RP "Of Crowns and Ball Gowns".

Hope you enjoy!

[nobr]

    [class=bkgd]
        position: relative;
        overflow: auto;
        box-sizing: border-box;
        background:  #790D03;
        width: 710px;
        height: 700px;
                border-radius: 10px;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]

    [class=image]
        position: absolute;
        overflow: visible;
        width: 600px;
        height: 250px;
        left: 50px;
        top: 15px;
        border: 3px solid #EAA221;
                border-radius: 10px;
                background-image: url(https://www.rpnation.com/gallery/zhang-xinyuan-8-jpg.41566/full);
                background-size: 100%;
                background-position: 60% 10%;
    [/class]

    [class=basicscontainer]
        position: absolute;
        overflow: hidden;
        width: 660px;
        height: 100px;
        left: 20px;
        top: 280px;
        border: 3px solid #EAA221;
                border-radius: 10px;
                background: #B21226;
    [/class]

    [class=basics]
        position: absolute;
        overflow-y: scroll;
        width: 655px;
        height: 95px;
                border-radius: 10px;
                background: #B21226;
                padding: 5px 25px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                font-weight: Normal;
                color: #FFFFFF;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=textcontainer]
        position: absolute;
        overflow: hidden;
        width: 660px;
        height: 270px;
        left: 20px;
        top: 400px;
        border: 3px solid #EAA221;
                border-radius: 10px;
                background: #B21226;
    [/class]

    [class=text]
        position: absolute;
        overflow-y: scroll;
        width: 650px;
        height: 260px;
                border-radius: 10px;
                background: #B21226;
                padding: 5px 25px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: #FFFFFF;
                text-align: justify;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

        [class=subtitle]
                height: 10px;
                display: inline-block;
                background: #EABA3D;
                padding: 0px 4px 5px 3px;
                color: #000000;
                font-size: 16px;
                font-family: Book Antiqua;
                font-weight: Bold;
                text-transform: uppercase;
                margin: 2px;
                border-radius: 10px;
        [/class]

        [class=credit]
        position: absolute;
        left: 260px;
        top: 680px;
        overflow: hidden;
        width: 200px;
        height: 20px;
        text-align: center;
        font-family: Book Antiqua;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: #FFFFFF;
        [/class]
[/nobr]

[div class=bkgd][div class=bkgdpic][/div]

[div class=image][/div]

[div class=basicscontainer][div class=basics][Row][Column=span2][div class=subtitle]Name:[/div]
info here
[/Column][Column=span2][div class=subtitle]Location:[/div]
info here
[/Column][Column=span2][div class=subtitle]Time:[/div]
info here
[/Column][Column=span2][div class=subtitle]With/Tags:[/div]
info here
[/Column]
[/Row]
[/div][/div]

[div class=textcontainer][div class=text][div class=subtitle]Reply:[/div]
reply here
[/div][/div]
[div class=credit] Code by [User=64889]PrincessMuk[/user] [/div]
[/div]

 

[PrincessMuk]

Cybercity Lights​

Hello everyone! So, these next two are basically the same code, but one is long, and one is wide. The first is also mobile-friendly due to the shape, which is unfortunately not the case with most of my code, aha. This was my first time doing any CSS animations, and I think they look pretty nice!

I was really inspired by the two pixelated gifs I found (links in the code, haha) to make sliding code that I'd seen floating around the site. They're not perfect, but y'all can change up the insides if you want. ^^ As always, credit me unless you're only taking small parts from the code, or changing it completely (as in, there are very few to no similarities you can see by just looking at them).

That's all I have to say about these two. Enjoy!

[nobr]

    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        background: #341B5F;
        width: 360px;
        height: 480px;
        overflow: auto;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]

    [class=basics]
        position: absolute;
        overflow-y: scroll;
        width: 190px;
        height: 170px;
                padding: 5px 35px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: #FFFFFF;
                text-align: left;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=basicscontainer]
        position: absolute;
        left: 145px;
        top: 5px;
        overflow: hidden;
        width: 200px;
        height: 180px;
                padding: 5px 35px 5px 5px;
[/class]

    [class=text]
        position: absolute;
        overflow-y: scroll;
        width: 325px;
        height: 255px;
                padding: 5px 35px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: #FFFFFF;
                text-align: left;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=textcontainer]
        position: absolute;
        left: 5px;
        top: 185px;
        overflow: hidden;
        width: 325px;
        height: 265px;
                padding: 5px 35px 5px 5px;
[/class]

    [class=image]
        position: absolute;
        overflow: visible;
        width: 140px;
        height: 180px;
        left: 12px;
        top: 5px;
                background-image: url(https://www.rpnation.com/gallery/andy-fc2-png.39090/full);
                background-size: 100%;
                background-position: 0% 0%;
    [/class]

    [class=subtitle]
        height: 15px;
        display: inline-block;
        background: #000000;
        padding: 5px 4px 5px 4px;
        color: #FFFFFF;
        font-size: 16px;
        font-family: Book Antiqua;
        text-transform: uppercase;
        margin: 2px;
    [/class]

    [class=credit]
        position: absolute;
        left: 85px;
        top: 460px;
        overflow: hidden;
        width: 200px;
        height: 20px;
        text-align: center;
        font-family: Book Antiqua;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: #FFFFFF;
    [/class]

    [class=bkgdpic]
        position: absolute;
        box-sizing: border-box;
        border-right: 7px solid black;
                background-image: url(https://media.giphy.com/media/84SFZf1BKgzeny1WxQ/giphy.gif);
        width: 360px;
        height: 480px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        top:0;
        transition: all 1.5s ease-in-out;
        cursor: pointer;
    [/class]

    [class=hide]
        width: 0;
    [/class]

    [class=bkgdpicShow]
        opacity: 1;
        width: 70px;
    [/class]

    [script=bkgdpic]
        set Open 1
    [/script]

    [script class=bkgdpic on=click]
        if (eq ${Open} 1) (addClass hide bkgdpic)
        if (eq ${Open} 0) (removeClass hide bkgdpic)
        if (eq ${Open} 1) (set Open 0) (set Open 1)
    [/script]

[div class=bkgd]
[div class=image][/div]
[div class=basicscontainer][div class=basics]
[div class=subtitle]Name:[/div] info here
[br][/br]
[div class=subtitle]Location:[/div] info here
[br][/br]
[div class=subtitle]Time:[/div] info here
[br][/br]
[div class=subtitle]With/Tags:[/div] info here
[/div][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Reply:[/div]
[br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[/div][/div]
[div class="bkgdpic show"][/div]
[div class=credit]Code by [User=64889]PrincessMuk[/user][/div]
[/div]
[/nobr]

 

[PrincessMuk]

Simple Koi​

[nobr]

    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        background: #042433;
        width: 500px;
        height: 288px;
        overflow: auto;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]

    [class=bkgdpic]
        position: absolute;
        box-sizing: border-box;
        border-right: 8px solid #031728;
                background-image: url(https://i.imgur.com/b0S7pGV.gif);
        width: 500px;
        height: 288px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        top:0;
        transition: all 1.5s ease-in-out;
        cursor: pointer;
    [/class]

    [class=basics]
        position: absolute;
        overflow-y: scroll;
        width: 470px;
        height: 96px;
                padding: 5px 35px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: #FFFFFF;
                text-align: left;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=basicscontainer]
        position: absolute;
        left: 5px;
        top: 120px;
        overflow: hidden;
        width: 480px;
        height: 96px;
                padding: 5px 35px 5px 5px;
[/class]

    [class=text]
        position: absolute;
        overflow-y: scroll;
        width: 480px;
        height: 80px;
                padding: 5px 35px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: #FFFFFF;
                text-align: left;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=textcontainer]
        position: absolute;
        left: 5px;
        top: 175px;
        overflow: hidden;
        width: 480px;
        height: 80px;
                padding: 5px 35px 5px 5px;
[/class]

    [class=image1]
        position: absolute;
        overflow: visible;
        width: 240px;
        height: 110px;
        left: 8px;
        border: 6px solid #06684d;
                background-image: url(https://www.rpnation.com/gallery/zhang-xinyuan-8-jpg.41566/full);
                background-size: 100%;
                background-position: 0% 15%;
    [/class]

    [class=image2]
        position: absolute;
        overflow: visible;
        width: 240px;
        height: 110px;
        right: 0px;
        border: 6px solid #06684d;
                background-image: url(https://www.rpnation.com/gallery/zhang-xinyuan-4-jpg.41562/full);
                background-size: 160%;
                background-position: 30% 0%;
    [/class]

    [class=subtitle]
        height: 15px;
        display: inline-block;
        background: #000000;
        padding: 5px 4px 5px 4px;
        color: #FFFFFF;
        font-size: 16px;
        font-family: Book Antiqua;
        text-transform: uppercase;
        margin: 2px;
    [/class]

    [class=credit]
        position: absolute;
        left: 150px;
        top: 268px;
        overflow: hidden;
        width: 200px;
        height: 20px;
        text-align: center;
        font-family: Book Antiqua;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: #FFFFFF;
    [/class]

    [class=hide]
        width: 0;
    [/class]

    [class=bkgdpicShow]
        opacity: 1;
        width: 70px;
    [/class]

    [script=bkgdpic]
        set IsText 1
    [/script]

    [script class=bkgdpic on=click]
        if (eq ${IsText} 1) (addClass hide bkgdpic)
        if (eq ${IsText} 0) (removeClass hide bkgdpic)
        if (eq ${IsText} 1) (set IsText 0) (set IsText 1)
    [/script]

[div class=bkgd]
[div class=image1][/div][div class=image2][/div]
[div class=basicscontainer][div class=basics][Row][Column=span2][div class=subtitle]Name:[/div]
[br][/br]info here
[/Column][Column=span2][div class=subtitle]Location:[/div]
[br][/br]info here
[/Column][Column=span2][div class=subtitle]Time:[/div]
[br][/br]info here
[/Column][Column=span2][div class=subtitle]With/Tags:[/div]
[br][/br]info here
[/Column]
[/Row]
[/div][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Reply:[/div]
[br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[br][/br][br][/br]
Lorem ipsum dolor sit amet, commune invenire moderatius per ad, pri id persius definiebas complectitur, offendit consequat ut nam. Postea interpretaris eam cu. Gubergren scriptorem ea pro, an per legere animal latine, qui ei putant insolens conclusionemque. Sit eu insolens consetetur, in inani placerat repudiare eam.
[/div][/div]
[div class="bkgdpic show"][/div]
[div class=credit]Code by [User=64889]PrincessMuk[/user][/div]
[/div]
[/nobr]

 

[Ayama]

Those animated ones are adorable and quite pretty!

​

 

[PrincessMuk]

Those animated ones are adorable and quite pretty!

​

Thank you so much!!

 

[sox]

i'm so glad you space out your code the same way tbh its so much easier to read than huge blocks of solid text ;-; they're looking great!! i love the layouts!!

 

[PrincessMuk]

i'm so glad you space out your code the same way tbh its so much easier to read than huge blocks of solid text ;-; they're looking great!! i love the layouts!!

Omg! I'm glad you approve >.< I'm so glad you like them! Thank you!

 

[sox]

Omg! I'm glad you approve >.< I'm so glad you like them! Thank you!

ofc!! the only thing i would suggest for this thread is giving your codes some identifying names so they can be easily referenced c: good luck on your coding journey, love!!

 

[PrincessMuk]

ofc!! the only thing i would suggest for this thread is giving your codes some identifying names so they can be easily referenced c: good luck on your coding journey, love!!

Ah, yeah! I'm no good at naming things, but I was thinking about doing that ^^; Thanks again!!

 

[PrincessMuk]

Royal Engagements​

Hello everyone! Let me just say: Ahh! I'm so happy to have finished this!

This isn't much more complicated than my last CSS animations, but it was definitely a learning curve for me. And, this is my first code to include tabs! They're really confusing and I'm still sure there's more consistent code for them, but I'm just happy they work at all, haha.

This can be used as an interest check or info for a roleplay, as in the example shown, or as a character sheet! There's opportunity for lots of images and information can be separated by tabs.

The images and theme for this are from a roleplay I'm hosting (info coming soon!) for The Selection, which is a great dystopian romance by Kiera Cass. Check it out if you haven't! It's like if The Bachelor and The Hunger Games had a baby. Anyways, that inspired the name for this code, so yay!

Now, this is by far the longest and most complicated code I've ever made. There's lots of parts to it due to the tabs and CSS, so I've tried to separate the code into sections. Before the first line of code is a note on the things you can alter in the code to fit your needs without messing it up completely. As always, make sure to keep the credit but feel free to use parts of the code for other things! I hope you all enjoy ^^

P.S. If anyone has critique for me or suggestions on the code (to make it more concise or easier to read/understand) feel free to reply to this thread or shoot me a PM! I'm always open to whatever you veteran coders have to teach ^^

THINGS YOU CAN CHANGE: Background colors, colors, font-size, font-family, font-weight, text-transform, images (labeled 1-3 for position, a-d for tab), coverpic image, and of course the contents of the text boxes, the title, and the names of the tabs.

[nobr]

    [class=bkgd]
        position: relative;
        box-sizing: border-box;
        background: White;
        width: 950px;
        height: 710px;
        overflow: auto;
        margin: auto;
        padding: 0;
                align-content: center;
    [/class]

    [class=text]
        position: absolute;
        overflow-y: scroll;
        width: 810px;
        height: 670px;
                padding: 5px 150px 5px 5px;
                font-size: 14px;
                font-family: Book Antiqua;
                color: Black;
                text-align: left;
                font-weight: Normal;
                line-height: 14px;
        margin: auto;
    [/class]

    [class=textcontainer]
        position: absolute;
        left: 5px;
        top: 5px;
        overflow: hidden;
        width: 820px;
        height: 680px;
                padding: 5px 5px 5px 5px;
[/class]

[comment]------------------------------------------------WORDS------------------------------------------------[/comment]

    [class=subtitle]
        height: 15px;
        display: inline-block;
        background: #dbc09e;
        padding: 5px 4px 5px 4px;
        color: #FFFFFF;
        font-size: 16px;
        font-family: Book Antiqua;
        text-transform: uppercase;
        margin: 2px;
    [/class]

    [class=title]
        position: absolute;
        left: 220px;
        top: 300px;
        height: 50px;
        display: inline-block;
        background: #dbc09e;
        padding: 0px 4px 5px 4px;
        color: #FFFFFF;
        font-size: 40px;
        font-family: Cinzel Decorative;
        font-weight: heavy;
        text-transform: uppercase;
        margin: 2px;
        transition: all 1.5s ease-in-out;
    [/class]

    [class=credit]
        position: absolute;
        left: 380px;
        top: 690px;
        overflow: hidden;
        width: 200px;
        height: 20px;
        text-align: center;
        font-family: Book Antiqua;
        font-style: normal;
        font-weight: normal;
        font-size: 12px;
        color: Black;
    [/class]

[comment]------------------------------------------------PICS------------------------------------------------[/comment]

    [class=image1a]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-cover-7-jpg.41917/full);
                background-size: 100%;
                background-position: 0% 60%;
        top: 223px;
        right: 5px;
    [/class]

    [class=image2a]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/report-2-1-jpg.41949/full);
                background-size: 150%;
                background-position: 20% 50%;
        top: 382px;
        right: 5px;
    [/class]

    [class=image3a]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/maid-2-jpg.41942/full);
                background-size: 150%;
                background-position: 30% 30%;
        top: 540px;
        right: 5px;
    [/class]

    [class=image1b]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-intro-jpeg.41941/full);
                background-size: 120%;
                background-position: 20% 20%;
        top: 223px;
        right: 5px;
    [/class]

    [class=image2b]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/smallz-raskind-portfolio-2-jpeg.41940/full);
                background-size: 100%;
                background-position: 0% 0%;
        top: 382px;
        right: 5px;
    [/class]

    [class=image3b]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-cover-jpg.41911/full);
                background-size: 130%;
                background-position: 48% 20%;
        top: 540px;
        right: 5px;
    [/class]

    [class=image1c]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-cover-4-jpg.41914/full);
                background-size: 200%;
                background-position: 40% 0%;
        top: 223px;
        right: 5px;
    [/class]

    [class=image2c]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-characters-jpg.41918/full);
                background-size: 150%;
                background-position: 0% 0%;
        top: 382px;
        right: 5px;
    [/class]

    [class=image3c]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-characters-2-jpg.41919/full);
                background-size: 150%;
                background-position: 20% 0%;
        top: 540px;
        right: 5px;
    [/class]

    [class=image1d]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/guard-1a-jpg.41948/full);
                background-size: 130%;
                background-position: 40% 0%;
        top: 223px;
        right: 5px;
    [/class]

    [class=image2d]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/pinklips2-jpg.41947/full);
                background-size: 130%;
                background-position: 0% 0%;
        top: 382px;
        right: 5px;
    [/class]

    [class=image3d]
        position: absolute;
        overflow: visible;
        width: 120px;
        height: 150px;
        background:url(https://www.rpnation.com/gallery/selection-rp-rules-jpg.41945/full);
                background-size: 180%;
                background-position: 20% 0%;
        top: 540px;
        right: 5px;
    [/class]

    [class=coverpic]
        position: absolute;
        box-sizing: border-box;
        border-right: 7px solid #dbc09e;
                background-image: url(https://www.rpnation.com/gallery/selection-rp-cover-6-jpg.41916/full);
                background-size: auto 100%;
                background-repeat: no-repeat;
        width: 950px;
        height: 710px;
        overflow: hidden;
        margin: 0;
        padding: 0;
        top: 0;
        transition: all 1.5s ease-in-out;
        cursor: pointer;
    [/class]

[comment]------------------------------------------------TITLE CSS------------------------------------------------[/comment]

    [class=hide]
        width: 0px;
    [/class]

    [class=wipe]
        transform: translateX( calc(-1* 750px) );
        transition: all 1.5s ease-in-out;
        transition: transform all 1s ease-in;
    [/class]

    [class=coverpicShow]
        opacity: 1;
        width: 70px;
    [/class]

    [script=coverpic]
        set IsText 1
    [/script]

    [script class=coverpic on=click]
        if (eq ${IsText} 1) (addClass hide coverpic)
        if (eq ${IsText} 1) (addClass wipe title)
        if (eq ${IsText} 0) (removeClass hide coverpic)
        if (eq ${IsText} 0) (removeClass wipe title)
        if (eq ${IsText} 1) (set IsText 0) (set IsText 1)
    [/script]

[comment]------------------------------------------------TABS------------------------------------------------[/comment]

    [class=tabcontainer]
        position: absolute;
        box-sizing: border-box;
        background: #dbc09e;
        right: 5px;
        top: 5px;
        overflow: hidden;
        width: 120px;
        height: 210px;
                padding: 5px 5px 5px 5px;
    [/class]

    [class=tabs]
        color: #dbc09e;
        font-size: 16px;
        font-family: Book Antiqua;
        text-transform: uppercase;
        line-height: 1;
        text-align: center;
        width: 100;
        height: 168;
    [/class]

    [class=tab]
        background-color: #FFFFFF;
        cursor: pointer;
        display: inline-block;
        padding: 10px 0px;
        width: 80%;
        margin-top: 10px;
    [/class]

    [class name=tab state=hover]
        background-color: #F5F5F5;
    [/class]

    [script class=tab on=click]
        hide tabsContent
        set currentTab (getText)
        if (eq ${currentTab} Intro) (show tabsContentIntro)
        if (eq ${currentTab} Plot) (show tabsContentPlot)
        if (eq ${currentTab} Roles) (show tabsContentRoles)
        if (eq ${currentTab} Rules) (show tabsContentRules)
    [/script]
[comment]IF YOU CHANGE THE TAB NAMES, YOU MUST CHANGE THEM HERE, TOO![/comment]

[comment]------------------------------------------------ACTUAL THING------------------------------------------------[/comment]

[div class=bkgd]

[div class=tabcontainer]

[div class=tabs][div class=tab]Intro[/div] [div class=tab]Plot[/div] [div class=tab]Roles[/div] [div class=tab]Rules[/div][/div][/div]
[comment]IF YOU CHANGE THE TAB NAMES, MAKE SURE YOU CHANGE THEM EVERYWHERE OR THEY WILL BREAK![/comment]

[div class="tabsContent tabsContentIntro"][comment]IF YOU CHANGE THE TAB NAMES, YOU MUST CHANGE THEM HERE, TOO![/comment]
[div class=image1a][/div][div class=image2a][/div][div class=image3a][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Introduction:[/div]
[br][/br][br][/br]
The intro! Remember to use line breaks to separate paragraphs ^^
[br][/br][br][/br]
P.S. There's an invisible scroll!
[/div][/div]
[/div]

[div class="tabsContent tabsContentPlot" style="display: none;"][comment]IF YOU CHANGE THE TAB NAMES, YOU MUST CHANGE THEM HERE, TOO![/comment]
[div class=image1b][/div][div class=image2b][/div][div class=image3b][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Plot:[/div]
[br][/br][br][/br]
The plot!
[/div][/div]
[/div]

[div class="tabsContent tabsContentRoles" style="display: none;"][comment]IF YOU CHANGE THE TAB NAMES, YOU MUST CHANGE THEM HERE, TOO![/comment]
[div class=image1c][/div][div class=image2c][/div][div class=image3c][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Roles:[/div]
[br][/br][br][/br]
The roles!
[/div][/div]
[/div]

[div class="tabsContent tabsContentRules" style="display: none;"][comment]IF YOU CHANGE THE TAB NAMES, YOU MUST CHANGE THEM HERE, TOO![/comment]
[div class=image1d][/div][div class=image2d][/div][div class=image3d][/div]
[div class=textcontainer][div class=text]
[div class=subtitle]Rules:[/div]
[br][/br][br][/br]
The rules!
[/div][/div]
[/div]

[div class="coverpic show"][/div][div class=title]Your Title Here[/div]
[div class=credit]Code by [User=64889]PrincessMuk[/user][/div]
[/div]
[/nobr]

 

[PrincessMuk]

BB Code Update​

As I'm sure everyone is aware by now, the site will no longer be supporting BBCode+. This means, unfortunately, that my codes will no longer work.

I will be working to learn ways to make code using only the regular BBCode and will hopefully continue to come up with codes that I can share with all of you. Coding has quickly become something I'm very passionate about and I don't plan to stop, though it is a bit discouraging for the coding to change. I can't wait to see what everyone comes up with, and I hope some of you can still find my codes appealing when I share them.

Coding is so fun for me because I just love how creative one has to be to utilize them. Seeing everybody's codes on this site inspires me to learn more and improve my skills, and I love using them to make my posts more readable and creative. It's such a joy to create them and even better to discover that there are actual people out there who want to use my codes for their own projects. I'm so grateful to everyone who has supported my coding journey and to everyone who has helped me learn, whether it was by helping me directly or by creating amazing threads of code or tutorials. I'm excited to see what the future holds for coding.

For anyone feeling discouraged by the changes: Don't give up! There's so much we can learn (or, in some cases, re-learn) so we can manipulate what we have and make it into something amazing. There will still be beautiful codes, and no contribution is worthless. Every act of creation helps you to improve your skills and show what you're capable of. It won't be long before we're all making things we're incredibly proud of.

Until next time, happy coding and roleplaying!

 

[PrincessMuk]

IMPORTANT UPDATE: I WILL BE CHANGING ALL OF THESE POSTS TO PRESERVE THE CODING SO THEY DO NOT BREAK WHEN THE UPDATE OCCURS. I AM WORKING ON WAYS TO USE THE BASIC CODE TO MAKE NEW THINGS FOR ALL OF YOU. FURTHER UPDATES WILL COME SOON!