👍 5

Posted 10/Apr/2022 03:56:43 (2 years ago)
Edited 02/Jun/2022 15:56:31 (1 year ago)

So, asked a friend

aka Cele because she's awesome

if I should do this, so here's some cool link effects. Also, some hr effects. Also, while I'm posting this now, does not mean I'm done updating it. Gotta rest soon, which means saving this so I might add to it while I'm at work.

Link Effects

All links lead back to my profile.

So, here's example one. When hovered over, the text becomes slightly larger, and a background appears behind it.

Now, here's example two. The background grows slightly when hovered over and it moves to be completely under the link.

Onto example three. There's a gradient underline that grows when hovered over, and changes the colour of the text to match legibility.

And now example four! It's like a highlight originally, that grows when hovered to cover the link.

Example One Code

@link-colour = VALUE; //colour of link text by default before hovered over @underline-bg = VALUE; //colour of underline beneath the link, background of the link when hovered over @hover-text-colour = VALUE; //colour of link text when hovered @border = VALUE; //colour of border when hovered over a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited { color: @link-colour; display: inline-block; transition: 0.3s; transition-delay: 0s; transform: scale(1); } a:not(.panel > h3 > a)::before { content: ' '; position: absolute; z-index: -1; bottom: 0; left: -2px; padding: 0 2px; width: 100%; height: 1px; border-bottom: 2px double @underline-bg; transition: 0.4s; } a:not(.panel > h3 > a)::after { content: ' '; position: absolute; z-index: -1; bottom: 0; left: 0; padding: 0 0px; width: 0; height: 0; border: 1px solid transparent; transition: 0.4s; } a:not(.panel > h3 > a):hover::before { border-color: transparent; } a:not(.panel > h3 > a):hover::after { width: 100%; height: 0.75em; left: -1em; bottom: -0.35em; padding: 0.5em 1em; border-color: @border; background-color: @underline-bg; border-radius: 2.5em; } a:not(.panel > h3 > a):hover { color: @hover-text-colour; transform: scale(1.2); transition-delay: 0.11s; }

Example Two Code

@link = COLOUR; @link-bg = COLOUR (use rgba at 0.25 opacity); a:not(.panel > h3 > a) { position: relative; overflow: hidden; text-decoration: underline wavy; color: @link; z-index: 1; &::after { content: ""; background: @link-bg; position: absolute; left: 12px; bottom: -8px; width: 105%; height: 110%; z-index: -1; transition: 0.35s cubic-bezier(0.25, 0.1, 0, 2.05); } &:hover:after { left: -3px; bottom: -5px; width: 115%; height: 125%; } }

Example Three Code

@link = COLOUR; @link-bg = COLOUR (recommend gradient!); @link-hover = COLOUR; a, a:link, a:visited { /* RESET */ text-decoration: none; font-style: none; position: relative; z-index: 0; display: inline-block; padding: 0px 5px; overflow: hidden; color: @link; vertical-align: bottom; transition: color .3s ease-out; } a::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; transform: translateY(calc(100% - 6px)); width: 100%; height: 100%; background-image: @link-bg; transition: transform .5s ease-out; } a:hover { color: @link-hover; text-shadow: 0 0 4px #888; font-style: normal; } a:hover::before { transform: translateY(0); transition: transform .5s ease-out; }

Example Four Code

@link = COLOUR; @link-bg = COLOUR (recommend hsla or rgba with 0.25 opacity); a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited { color: @link; display: inline-block; text-decoration: none; position: relative; } a:not(.panel > h3 > a)::before { content: ''; background-color: @link-bg; position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; } a:not(.panel > h3 > a):hover::before { bottom: -3px; height: 110%; width: 110%; left: -3px; }

HR Effects

Example One (note it is black so you may need to change your skin if your background is black to see it here)

Example Two

Example Three

Example Four

Example Five

HR One

hr { height: 10px; border: none; color: black; background-image: linear-gradient( black, black 33.33%, transparent 33.33%, transparent 100%); background-size: 100% 3px; width: 250px; }

HR Two

hr { border: none; height: 10px; box-shadow: 0 10px 10px -10px @col-border inset; &::before { height: 10px; width: 100%; content: ""; box-shadow: 0 -10px -10px 10px @col-border inset; } }

HR Three

hr { border: 0; height: 2px; background-image: linear-gradient(to right, rgba(214, 228, 49, 0), rgba(214, 228, 49, 0.75), rgba(214, 228, 49, 0)); }

HR Four

hr { overflow: visible; /* For IE */ height: 30px; border-style: solid; border-color: black; border-width: 1px 0 0 0; border-radius: 20px; } hr:before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: black; border-width: 0 0 1px 0; border-radius: 20px; }

HR Five

hr { height: 30px; border-style: solid; border-color: #8c8b8b; border-width: 1px 0 0 0; border-radius: 20px; } hr::before { display: block; content: ""; height: 30px; margin-top: -31px; border-style: solid; border-color: #8c8b8b; border-width: 0 0 1px 0; border-radius: 20px; }

he/she Joint Shoppe ☆ PKMN Shoppe Templates/Graphics Shoppe ☆ F2U Templates/Graphics

Buying:

BSDs 20 ZC

Prisms 70 ZC

by Kaede

Aemilia

👍 2

Posted 10/Apr/2022 04:13:08 (2 years ago)
Edited 25/Feb/2024 14:08:07 (3 months ago)

Coded by Aemilia. Snek cursor made by Cele. Official art used. Wave free use. For Sir Quackie's use only!

Title

Title 2

Title 3

Some testing text. Profile

Words

Words here too

Tab One
Tab Two
Tab Three

words in a tab

	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data

Aemilia

👍 3

Posted 11/Apr/2022 05:25:24 (2 years ago)
Edited 05/Apr/2024 23:36:40 (1 month ago)

Another version was made specifically for veltavle.

Header 1

Header 2

Header 3

[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]

List Item
List Item
List Item

50/100

QUOTE originally posted by User

Content

Display box

Content

Hide box

Content

Accordion 1

Content 1

Accordion 2

Content 2

Accordion 3

Content 3

Stackbox 1

Content 1

Stackbox 2

Content 2

Stackbox 3

Content 3

	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data

coded by aemilia || image

Code

[styleclass=about][sc=header][sc=icon][/sc][h1]Name[/h1][/sc][ ][styleclass=tabbed_interface horizontal][ ][ul][ ][li][/li][ ][li][/li][ ][li][/li][ ][li][/li][ ][/ul][ ][sc=tab tab-active]tab one do not put text in the li's![/sc][ ][sc=tab]two[/sc][ ][sc=tab]three[/sc][ ][sc=tab]four[/sc][ ][/styleclass][/styleclass][sc=credits]coded by [url=https://pokefarm.com/forum/post/6419911]aemilia[/url] || [url=https://placekitten.com/75/75]image[/url][/sc] [style] @bg = #ca8cd3; @border = darken(@bg, 35%); @text = #000000; @link = #13375D; @icon-img = url('https://placehold.co/75x75'); @margin-tabs = 30px; @list-img = url('https://pfq-static.com/img/navbar/party.png'); /*************************************** * IGNORES WHITESPACE BETWEEN ELEMENTS * ***************************************/ .tabbed_interface { white-space: nowrap; & > ul > li, & > div { white-space: pre-line; } } /**************** * RESET STYLES * ****************/ table, tr, th, td, .panel *, .panel, .tabbed_interface, .tabbed_interface > ul, .tabbed_interface > ul > li, .tabbed_interface > div { padding: 0; margin: 0; background: none; box-shadow: none; border: none; border-radius: 0; } .about { box-sizing: border-box; position: relative; width: 310px; background: @bg; border: 5px solid @border; padding: 1%; color: @text; font-size: 12pt; z-index: 5; margin-bottom: 20px; >.header { display: flex; flex-flow: row nowrap; align-items: center; > .icon { height: 75px; width: 75px; border-radius: 100%; border: 3px solid @border; background: @icon-img; box-shadow: 0 0 5px black; } > h1 { margin-left: 10px; font-family: 'Milonga'; font-weight: bold; font-size: 2em; } } > .tabbed_interface { display: grid; grid-template-areas: "cont" "tabbar"; > ul { background: transparent; grid-area: tabbar; display: flex; flex-flow: row nowrap; justify-content: space-evenly; margin-bottom: -30px; > li { grid-area: tab; display: inline-block; flex: initial; height: 40px; width: 40px; border-radius: 100%; border: 3px solid @border; background: @bg; box-shadow: 0 0 5px #000000; transition: all 0.15s ease-in-out; &:hover { cursor: pointer; } } &:hover li { filter:blur(3px); opacity:.5; transform: scale(.95); box-shadow:none; } &:hover li:hover { transform:scale(1); filter:blur(0px); opacity:1; box-shadow: 0 0 5px #000000; } } > .tab { grid-area: cont; padding: 10px 0; color: @text; ul > li:not(.tabbed_interface > ul > li) { list-style-image: @list-img; } h1, h2, h3 { margin: 0; } a:not(.panel > h3 > a), a:not(.panel > h3 > a):link, a:not(.panel > h3 > a):hover, a:not(.panel > h3 > a):active, a:not(.panel > h3 > a):visited { color: @link; display: inline-block; text-decoration: none; position: relative; } a:not(.panel > h3 > a)::before { content: ''; background-color: hsla(0, 0%, 100%, .5); position: absolute; left: 0; bottom: 3px; width: 100%; height: 8px; z-index: -1; transition: all .3s ease-in-out; } a:not(.panel > h3 > a):hover::before { bottom: -3px; height: 110%; width: 110%; left: -3px; } table { margin: 0 auto; text-align: center; border-collapse: separate; border-spacing: 5px; border: none; display: flex; width: 285px; overflow-x: auto; tr { th { width: fit-content; padding: 5px; background: @border; color: #ffffff; border: none; } td { background: @bg; color: @text; border: 1px solid @border; padding: 5px; } } } .expbar { padding: 5px; background: @bg; color: @text; border: 2px solid @link; border-radius: 0; div { background: lighten(@link, 75%); border: 2px solid @bg; border-radius: 0; } span { color: @text; } } hr { height: 10px; border: none; color: black; background-image: linear-gradient( black, black 33.33%, transparent 33.33%, transparent 100%); background-size: 100% 3px; width: 250px; } span.bbcode_tooltip { border-bottom: 1px dotted @text; } .tooltip_content { background: @link; color: black; border-radius: 0; border: 2px solid @border; } .panel { box-shadow: none; border: none; border-radius: 0; background: transparent; > h3 { border-radius: 0; border: 2px solid @border; background: @accent1; padding: 1%; color: @text; & > a { color: inherit; } &:not(.panel > h3:first-child) { margin-top: 3px; } } > div { background: none; border: 2px solid @border; color: @text; padding: 2%; margin-top: 3px; } } } } } /* latin */ @font-face { font-family: 'Milonga'; font-style: normal; font-weight: 400; font-display: swap; src: url(https://fonts.gstatic.com/s/milonga/v18/SZc53FHnIaK9W5kfTzrMkA.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } [/style]

Aemilia

👍 0

Posted 14/Apr/2022 06:43:51 (2 years ago)
Edited 25/Feb/2024 14:08:22 (3 months ago)

Snek image by Cele. HR image same as heart emojis in credit below. Template for Venko's use only. Coded and created by Aemilia.

Preview
Empty
Empty

Header 1

Header 2

Header 3

[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]

List Item
List Item
List Item
List Item
List Item

50/100

QUOTE originally posted by User

Content

Display box

Content

Hide box

Content

Accordion 1

Content 1

Accordion 2

Content 2

Accordion 3

Content 3

Stackbox 1

Content 1

Stackbox 2

Content 2

Stackbox 3

Content 3

	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data

Aemilia

👍 0

Posted 16/Apr/2022 05:35:20 (2 years ago)
Edited 17/Apr/2022 01:53:10 (2 years ago)

Potential Design One

One
Two
Three
Four

Brief words here

yup

yee

yah

Potential Design Two

One
Two
Three
Four

Self-note: Undefined colour/background for non-active tabs intentional. If used, set bg based on template, and modify colour of text accordingly. Or leave undefined for both if using skin bg instead.

yup

yee

yah

Potential Design Three

One
Two
Three
Four

Brief words here

yup

yee

yah

Aemilia

👍 1

Posted 17/Apr/2022 03:46:33 (2 years ago)
Edited 27/Jun/2023 04:05:39 (11 months ago)

Teaching time! I've been asking in a few places what people would like to know more about, explain how things are done, and just things they wondered were possible. So here's the first part to that. The list of things (along with who requested it) will be in this post as well as links to posts answering them if it's not in this post. If you want something explained, feel free to poke me :D List: - Vertical Tabs (yosei) - DONE! - Carousel Tabs (Pochi) - Gradient Text (quaxly/kitwurm) - DONE! - Spinning eggs on hover in shelter (KO) - DONE!

Vertical Tabs!
Gradient Text
Spinning Eggs
Carousel Tabs

Code
Explanation
Tab Three

/***************************************
 * IGNORES WHITESPACE BETWEEN ELEMENTS *
 ***************************************/
.tabbed_interface {
    white-space: nowrap;
    & > ul > li, & > div 
    {
        white-space: pre-line;
    }
}

/****************
 * RESET STYLES *
 ****************/
.tabbed_interface, .tabbed_interface > ul, 
.tabbed_interface > ul > li, .tabbed_interface > div 
{
    padding: 0;
    margin: 0;
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
}

.nav
{
    display: flex;
    flex-grow: 1;
    & > .tabbed_interface
    {
        flex: 1;
        display: flex;
        > ul
        {
            display: flex;
            flex-flow: column nowrap;
            justify-content: flex-start;
            width: 125px;
            flex-basis: auto;
            > li
            {
                border: 1px solid;
                padding: 5px;
                flex: 1 0;
                text-align: center;
                margin-bottom: 5px;
                width: 125px;
            }
        }
        > .tab, > .tab-active
        {
            border: 1px solid;
            margin-left: 5px;
            flex-grow: 1;
            padding: 5px;
        }
    }
}

I'll be breaking the code down into pieces, though for the second part, it's easier to rely on the website I linked than me trying to explain it myself.

Part One

/*************************************** * IGNORES WHITESPACE BETWEEN ELEMENTS * ***************************************/ .tabbed_interface { white-space: nowrap; & > ul > li, & > div { white-space: pre-line; } } /**************** * RESET STYLES * ****************/ .tabbed_interface, .tabbed_interface > ul, .tabbed_interface > ul > li, .tabbed_interface > div { padding: 0; margin: 0; background: none; box-shadow: none; border: none; border-radius: 0; }

This part of the code basically resets the CSS from the site to defaults to make it easier to manipulate the CSS to what you would like to do.

Part Two

.nav { display: flex; flex-grow: 1; & > .tabbed_interface { flex: 1; display: flex;

This part sets up the tabs to be able to stay vertically aligned. If you don't know flexbox well, I recommend checking out this guide for a basic rundown which explains the flex components better than I can.

Part Three

> ul { display: flex; flex-flow: column nowrap; justify-content: flex-start; width: 125px; flex-basis: auto;

This sets up the unordered list for the tabs to flex. Flex allows the tabs to flow vertically without wrapping to another column. Justify content allows the tabs to always start at the top. Flex basis allows it to base the height and width on the set height/width from the respectful properties.

Part Four

> li { border: 1px solid; padding: 5px; flex: 1 0; text-align: center; margin-bottom: 5px; width: 125px; }

I'm gonna assume here that you already understand the basics of CSS, so I'm gonna skip all of it except for flex. Flex is the shorthand of flex grow and flex shrink. This sets flex grow to 1 so it takes up just its unit of space and the zero prevents it from shrinking.

Part Five

> .tab, > .tab-active { border: 1px solid; margin-left: 5px; flex-grow: 1; padding: 5px; }

This allows the tab to take the remaining space as well as sets some stylistic properties to make it look a little smoother.

Tab three content

Gradient

Code

.header
{
    background: #454545;
    width: fit-content;
    margin: 0 auto;
    padding: 0 5px;
    h1
    {
        font-family: sans-serif;
        margin-top: 0;
        background: linear-gradient(to right, #F89C9B, #F896B7, #C3B1E2, #72BCF8, #26c6da, #76C679, #eeff41, #f9a825, #FFA185);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

For this, you do need a wrapper class. You have to set the background separate from the background used for the text colour. Make sure whatever the background colour is set to that the gradient contrasts against it so that it's legible. I set the width to fit-content so that it is only as big as the content contained inside, but that can be modified as you see fit. Margin was used to center it in the post, padding to make it look a little nicer within the box. The h1 block is where the magic happens. You do NOT need to set the font-family, you can have it set to default or any other font you'd like, margin is similar, you can set it as you'd like. The gradient gets set as the background. This is how you select the colour of your text. Set the gradient as you would like. -webkit-background-clip sets the text to be the path followed for the gradient to be filled within, then the fill colour line sets the text to be transparent so that the background peeks through the text rather than the background being around the text.

Short video clip of it working

Code

#shelterpage #shelter #shelterarea>.pokemon[data-stage*="egg"]>img:hover {
    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;
    
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

Basically, you create the animation using keyframes, to make it compatible with all browsers, you use each of those prefixes (yea, I know, it sucks, but if you just want it to work on a specific browser, you can remove some of them, webkit is for Chrome, ms for IE/Edge [not that it's always compatible even using the prefix], moz is for Firefox). Then you just set up the animation for hovering over the egg. Boom, done. Keyframes use either to/from or values to create the animation, in this case, to rotate 360 degrees, you start at 0deg then rotate to 360deg, from which I then set the animation to infinitely run...so long as you stay hovering over the egg. NOTE Keyframes ONLY work in the site skin, NOT when posted in the forums, about me area, etc.

Carousel Tabs coming soon

Aemilia

👍 0

Posted 21/Apr/2022 06:44:18 (2 years ago)
Edited 22/Oct/2022 11:59:28 (1 year ago)

Kaede's Templates

Rules
Coding
Prices
Form/Orders
Sales

Rules

Feel free to use the free use templates as you wish, for journals, shoppes, etc. Use them only where they're designed for.
Using a template in an about me section, for example, won't work properly.
Do not edit my codes without express permission from me. If you need something edited or want something added, ask prior to modifying it please so that I can verify it meets all legibility rules. For the CSS based templates, you are welcome to change the variables for backgrounds and colours without asking first, but you must make sure they meet the legibility guidelines.
You may look into my codes to see how they work, but do not take the code and replace a few images/lines and then say you created it on your own. This means you can pick it apart to learn from, but do NOT use it as a base for your own templates, but rather inspiration for it and a learning tool.
If you provide an image, make sure it's either free to use or commisioned for you and can be utilised in a template (screenshot permission/link to source if not created by yourself please!).
Do NOT sell my templates.
Do NOT remove my credits and claim it as your own.
I will not create any art/pixel art of characters. I may consider making pixel art for bullet points/dividers at an added cost, provided it isn't complex
Complex is relative. Inquire and I will let you know if I can create it myself for you.
.
Custom templates are for the user whom it is commissioned for only, unless that user tells me otherwise.
I display all of my templates that I create in my journal, however, if it is not free to use, the code will not be available for anyone to use like with my free templates.
All PFQ rules apply.
I reserve the right to modify these rules as necessary.

Coding

I am only offering custom post templates and about me templates at this moment. Templates come coded with the following: - Text - Links - Headers - Panels - Tables - Tips - Progress Bars - Lists (any if requested, except if custom images made by myself) - Tabs (if requested) Add-ons: - Custom Lists - Horizontal Rules - PKMN Panels - Italics/Bold/Strikethrough/Underline Effects - Image Effects - Columns - Hover Effects - Grid Capability* Even if it's not on this list, I may still be able to do it, so feel free to inquire! Depending on the request, it may not have an add-on charge. *Grids are more mobile friendly than tables imo, so I am willing to teach anyone how to utilise this code for things from breeding pairs to items. Just ask and I'll explain it to you if you have it added to your template. You can see a preview of grids at work in my shoppe under the summons and gems tabs.*

Prices

Post Templates Pure CSS are 500 Zophan Canisters

Graphic are 750 Zophan Canisters

About Me Templates Pure CSS are 350 Zophan Canisters

Graphic are 650 Zophan Canisters

Pure CSS templates are similar to this template, where I do not create a graphic for the template. - Pure CSS templates can use images! Graphic templates require custom images to create and often involve other images such as my munna template uses, or simply brushes and textures, similar to my signature. Graphic templates take much more time to complete, which is why they're more expensive. This template would be considered a graphic template, though not a traditional one that I often have made. Add-ons are 50 Zophan Canisters

per. Currency Conversion: 500k Credits

:500

:100

:$1 USD. I will also accept Box Boxes valued at 110 ZC per, Blue Soul Dews valued at 35 ZC per, Black Prisms valued at 55 ZC per, and Wishing Stars valued at 20 ZC per. At least half of the payment must be currency. I will accept any of these currencies and items as long as it equates to the correct price.

Form and Orders

Form

[h2]Kaede, I'd like a custom template![/h2] [b]Type of Template:[/b] [b]Style of Template:[/b] (Graphics or Pure CSS) [b]Images:[/b] (make sure to include any and all credits!) [b]Details Concerning Template:[/b] [b]Payment:[/b] [b]Other Information:[/b]

Orders

user

type

progress

✘

user

type

progress

✘

Name

Type

Progress

✘

Sales

Current Sales - People from a secret area are entitled to 50% off provided certain conditions are met. - Special Sale! Complete template set for $12.50 USD. This sale is USD only, and includes the following: post template, about me template, and signature template. Any of these templates can be exchanged for another of a different type. If you plan to take advantage of this sale, please leave a note in the "Other Information" section of the form. You can have up to three of the add-ons free of charge (which can be split amongst the templates or on the same template). Old and EXPIRED Sales - Store opening sale. First two currency orders are 25% off. Sales will be added for special occasions and perhaps just at random as well.

Aemilia

👍 0

Posted 05/May/2022 06:54:02 (2 years ago)
Edited 25/Feb/2024 14:08:49 (3 months ago)

Snek made by Cele. Template coded by Aemilia. Strawberries personal image, free use. Profile

Start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis tempor quam. Sed sit amet orci id lorem facilisis posuere in at enim. Proin dapibus enim at purus sodales aliquam. Curabitur in tristique sapien. Nullam nec fermentum erat.

Continue

Phasellus eget quam id ipsum condimentum dignissim. Praesent ullamcorper sapien sit amet lorem semper laoreet. Curabitur sed nisl ac sapien tempor fringilla ac sed diam. Nam efficitur placerat risus, vitae mattis tortor aliquam non. Aenean ullamcorper dignissim enim, ac sollicitudin tellus finibus at.

Fin

One
Two
Three

One
Two
Three

This is some testing text. Does it seem like I want to type these words? Because I don't want to, but have to instead. dolor sit amet, consectetur adipiscing elit. pharetra feugiat mi, vitae imperdiet dui egestas at.

Texty

Sed quis diam viverra, viverra arcu a, viverra ante. Nulla pulvinar hendrerit nisi, quis hendrerit odio posuere vel. Aenean mollis sem ante, sed porttitor tortor viverra vel. Duis nec porttitor metus. Aenean tincidunt a elit nec gravida. In in nisi euismod, faucibus lectus sed, lobortis lectus. Mauris at fermentum erat. Quisque et molestie diam.

Texty

Nullam vitae sapien quis arcu lobortis convallis. Proin porta diam et turpis luctus, vel luctus elit finibus. Vestibulum id tincidunt ante. Curabitur vel ligula ut nisl vulputate dignissim et eu odio.

Texty 2

Praesent neque felis, venenatis nec eros eu, condimentum dignissim mauris. Phasellus consequat dui at maximus ornare. Proin non lacinia orci. Curabitur rhoncus metus ut orci porta, sed facilisis leo finibus. Sed blandit, quam vel dapibus posuere, turpis lacus auctor turpis, sed ullamcorper tellus nibh ut sapien. Donec non tellus auctor velit pulvinar molestie. Praesent ac metus vel sapien accumsan egestas sit amet sed neque. Donec a dignissim orci.

Title 1

Contents 1

Title 2

Contents 2

Eyy, words go here, yup yup

texty	texty
texty	texty

Hm, maybe another sentence or two should work. Gotta verify I added enough padding to the sides. Oh no, tiny text. Must fix x.xNow the font looks okay. Maybe I should see what others think of the font. I'm not as big of a fan of it like I had been.

Some of the letters look goofy. Like the x and t. Random tex alert! Random text alert! Wee woo wee woo wee woo wee woo

Code

[styleclass=clefTemp][img]https://i.ibb.co/tbNWk7G/Clefairy-header.png[/img][sc=body] [/sc][img]https://i.ibb.co/zZ6MRf0/Clefairy-footer.png[/img][sc=credit][url=https://pokefarm.com/forum/post/6451791][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][/styleclass] [style] @Colour = #85000B; .clefTemp { font-size: 12pt; color: @Colour!important; border: none !important; position: relative; .body { background: url('https://i.ibb.co/1Lpw7my/Clefairy-body.png'); background-size: 100% 100%; min-height: 100px; padding: 1.5%; color: @Colour!important; border: none !important; .tabbed_interface { font-size: inherit; border: none; } .tabbed_interface > ul { background: none; } .tabbed_interface > ul > li { background: url('https://i.imgur.com/X7oHcrd.jpg'); background-size: 200%; text-shadow: 1px 1px 0 @Colour, -1px -1px 0 @Colour, -1px 1px 0 @Colour, 1px -1px 0 @Colour, 0px 0px 3px #232323; background-position: center; border: 2px solid @Colour; text-align: center; font-variant: small-caps; font-weight: bold; margin-left: 5%; margin-right: 5%; padding-top: 0.25%; padding-bottom: 0.5%; color: #F4BEBE; } .tab, .tab-active { background-color: transparent; box-shadow: none; border: none; color: @Colour; text-align: inherit; padding-top: 2%; } .tabbed_interface > ul > li:hover { cursor: pointer; background: @Colour; color: #efa1af; text-shadow: none; } .panel { border: 1px solid @Colour; box-shadow: none; border-radius: 0px; background: none; & > h3 { border: none; border-bottom: 2px solid @Colour; background: none; height: 20px; font-size: 18px; color: @Colour; border-radius: 0px; margin: 0px 5px 5px 5px; letter-spacing: 1px; } & > div { border: none; border-bottom: 1px solid @Colour; color: @Colour; } & > h3 { & > a { background: transparent; color: @Colour; text-decoration: none; } color: @Colour; } } .expbar { padding: 5px; background: none; color: @Colour; border: 2px solid @Colour; border-radius: 0px; div { background: #e88fa1; border-right: 2px solid @Colour; border-radius: 0px; } span { color: @Colour; } } table { border: none; margin: 0 auto; } th { background: none; border: solid 2px @Colour; color: @Colour; padding: 3px; text-align: center; } td { border: solid 2px @Colour; } a:link, a:visited, a:active { -webkit-transition: all 0.7s ease-in-out; -moz-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; color:#510006; text-decoration: underline; } a:hover { text-decoration: underline; color: @Colour; } .tooltip_content { background: #efa1af; color: @Colour; border: @Colour 1px solid; border-radius: 0px; } span.bbcode_tooltip { border-bottom: 1px dashed @Colour; } u { text-decoration: none; border-bottom: 2px solid @Colour; } hr { border: 1px solid @Colour; } h1, h2, h3 { text-decoration: underline; } ul { list-style: upper-roman outside; } } .credit { position: absolute; bottom: 2px; right: 2px; > a > img:hover { filter: drop-shadow(0 0 5px #777); } } } [/style]

Aemilia

👍 0

Posted 09/May/2022 02:47:48 (2 years ago)
Edited 25/Feb/2024 14:09:19 (3 months ago)

Coded by Aemilia. Snek image made by Cele. Pictures by Dracanea. Template for Dracanea's use only. Me

Rules
Pricing
Pairs
Specials

Header 1

Header 2

Header 3

[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]

List Item
List Item
List Item

50/100

QUOTE originally posted by User

Content

Display box

Content

Hide box

Content

Accordion 1

Content 1

Accordion 2

Content 2

Accordion 3

Content 3

Stackbox 1

Content 1

Stackbox 2

Content 2

Stackbox 3

Content 3

	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data

Kanto
Johto
Hoenn
Sinnoh
Unova
Kalos
Alola
Galar
PFQ

Aemilia

👍 23

Posted 12/May/2022 04:59:09 (2 years ago)
Edited 25/Feb/2024 14:09:41 (3 months ago)

Snek image by Cele. All images and template by Aemilia. Height is limited to what you see, anything that goes out of the tab WILL be hidden.

Header 1

Header 2

Header 3

[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]

List Item
List Item
List Item
List Item
List Item

50/100

QUOTE originally posted by User

Content

Display box

Content

Hide box

Content

Accordion 1

Content 1

Accordion 2

Content 2

Accordion 3

Content 3

Stackbox 1

Content 1

Stackbox 2

Content 2

Stackbox 3

Content 3

	Header	Header	Header	Header	Header	Header
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data
Header	Data	Data	Data	Data	Data	Data

credits

Code

[styleclass=tarot-card][ ][sc=tarot-card-inner][ ][sc=tarot-card-front][img]https://i.ibb.co/sbFvD9z/BackCard.png[/img][/sc][ ][sc=tarot-card-back][styleclass=tabbed_interface horizontal][ ][ul][ ][li][img]https://i.ibb.co/6sR7crg/air.png[/img][/li][ ][li][img]https://i.ibb.co/WDrXPrR/fire.png[/img][/li][ ][li][img]https://i.ibb.co/XL7Sm0G/water.png[/img][/li][ ][li][img]https://i.ibb.co/FbC2J0S/earth.png[/img][/li][ ][li][img]https://i.ibb.co/stRNyWv/spirit.png[/img][/li][ ][/ul][ ][sc=tab tab-active]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][sc=tab]TEXT HERE[/sc][ ][/styleclass][/sc][ ][/sc][ ][sc=credits][sc=align][url=https://pokefarm.com/forum/post/6463030][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc] [sc=align]credits[/sc][/sc][/styleclass] [style] @text: #ae9300; @text-alt: #8D976D; @font-face { font-family: Headers; src: url('https://pokefarm.com/upload/Aemilia/Fonts_For_Templates/Cataclysmic.jpg'); } .tarot-card { width: 310px; height: 517px; perspective: 1000px; border-radius: 15px; } /* positions the front and back side */ .tarot-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 1.5s; transform-style: preserve-3d; } /* horizontal flip when you move the mouse over the flip box container */ .tarot-card:hover .tarot-card-inner { transform: rotateY(180deg); } /* Position the front and back side */ .tarot-card-front, .tarot-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; /* Safari */ backface-visibility: hidden; filter: drop-shadow(0 0 3px #000); } /* Style the front side (fallback if image is missing) */ .tarot-card-front { background-color: transparent; color: black; } /* Style the back side */ .tarot-card-back { background: url('https://i.ibb.co/t4bSL14/Front-Card.png'); color: white; transform: rotateY(180deg); & > .tabbed_interface > ul > li > img { height: 35px; width: auto; } & > .tabbed_interface { background: transparent; border: none; box-shadow: none; margin: 0 auto; margin-top: 45px; width: 75%; > ul { background: transparent; border: none; display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; gap: 5px; > li { background: none; border: none; &:hover { cursor: pointer; filter: drop-shadow(0 0 5px #ae9300); } } } > .tab, > .tab-active { background: transparent; border: none; margin-top: 5px; padding: 0 5px; height: 380px; box-shadow: none; color: @text; text-align: left; overflow: hidden; hr { border: none; background: transparent; background: url('https://i.ibb.co/z8CM2Nw/rule.png'); background-size: 100%; height: 35px; width: 100%; } h1, h2, h3 { font-family: "Headers", sans-serif; color: @text-alt; } a, a:link, a:hover, a:active, a:visited { color: @text-alt; } a:not(.panel > h3 > a) { display: inline-block; color: lighten(@text-alt, 10%); text-decoration: none; position: relative; } a:not(.panel > h3 > a)::after { content: ""; background: white; mix-blend-mode: exclusion; width: 100% + 8px; height: 0; position: absolute; bottom: -2px; left: -2px; transition: all .3s cubic-bezier(0.445, 0.05, 0.55, 0.95); } a:not(.panel > h3 > a):hover { color: lighten(@text-alt, 35%); } a:not(.panel > h3 > a):hover::after { height: 100% + 8px; } span.bbcode_tooltip { border-bottom: 2px double @text-alt; } .tooltip_content { background: #7d4a28; color: #fff; border-radius: 0; border: 5px double @text-alt; } ul { list-style-type: circle; margin: 0; text-align: left; } .expbar { padding: 5px; background: transparent; color: #fff; border: 5px double @text; border-radius: 0; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; div { background: #CBB772; border-right: 2px solid #584927; border-radius: 0; } } .panel { box-shadow: none; border: none; border-radius: 0; background: transparent; > h3 { background: #c4a357; color: #000000; border-radius: 0; border: 5px double #584927; box-shadow: none; & > a { color: inherit; } &:not(h3:first-child):not(h3>a:first-child) { margin-top: 5px; } } > div { color: inherit; border: 5px double #584927; margin-top: 5px; box-shadow: none; } } table { margin: 0 auto; text-align: center; border-collapse: separate; border-spacing: 5px; border: none; display: flex; width: 100%; overflow-x: auto; tr { th { width: fit-content; padding: 5px; background: #c4a357; color: #000000; border: 5px double #584927; } td { background: transparent; color: @text; border: 5px double @text; padding: 5px; } } } } } } .credits { display: flex; align-items: center; justify-content: center; gap: 5px; position: absolute; width: 100%; bottom: 2px; left: 2px; font-variant: small-caps; color: #FFFFFF; font-size: 10pt; > .align { & > a > img:hover { filter: drop-shadow(0 0 5px #777); } &:last-child { margin-top: -12px; } } } [/style]

Loading...

Coding Diaries

Link Effects

Example One Code

Example Two Code

Example Three Code

Example Four Code

HR Effects

HR One

HR Two

HR Three

HR Four

HR Five

by Kaede

Title

Title 2

Title 3

Words

Name

Header 1

Header 2

Header 3

QUOTE originally posted by User

Display box

Hide box

Accordion 1

Accordion 2

Accordion 3

Stackbox 1

Stackbox 2

Stackbox 3

Code

Header 1

Header 2

Header 3

QUOTE originally posted by User

Display box

Hide box

Accordion 1

Accordion 2

Accordion 3

Stackbox 1

Stackbox 2

Stackbox 3

Part One

Part Two

Part Three

Part Four

Part Five

Gradient

Code

Code

Kaede's Templates

Rules

Coding

Prices

Form and Orders

Form

Orders

Sales

Start

Continue

Fin

Texty

Texty

Texty 2

Title 1

Title 2

Code

Header 1

Header 2

Header 3

QUOTE originally posted by User

Display box

Hide box

Accordion 1

Accordion 2

Accordion 3

Stackbox 1

Stackbox 2