• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Resource Mads' Coding Freebies

Favorite Breakfast Food?

  • Cereal

    Votes: 9 14.1%
  • Pancakes

    Votes: 16 25.0%
  • Waffles

    Votes: 11 17.2%
  • Eggs

    Votes: 14 21.9%
  • Toast

    Votes: 5 7.8%
  • Other

    Votes: 9 14.1%

  • Total voters
    64
IC Reply
  • 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!


    Code:
    [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]
     
    Last edited:
    IC Reply
  • 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!


    Code:
    [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]
     
    Last edited:
    IC Reply
  • Simple Koi
    Code:
    [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]
     
    Last edited:
    Character Sheet
  • 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 ^^


    Code:
    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]
     
    Last edited:
    Back
    Top