Coding Diaries
Forum Index > PokéFarm > Journals >
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;
}
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZC
by Kaede
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. ProfileWords
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 |
Name
Another version was made specifically for veltavle.
Header 1
Header 2
Header 3
[Link] [Link] [Link] [Link] [Link] [Link] [Link] [Link]Tooltip
Tooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
- List Item
- List Item
- List Item
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 |
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]
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] TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
- List Item
- List Item
- List Item
- List Item
- List Item
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 |
Potential Design One
Potential Design Two
Potential Design Three
- One
- Two
- Three
- Four
Brief words here
yup
yee
yah
- 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
- One
- Two
- Three
- Four
Brief words here
yup
yee
yah
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!
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.
- Vertical Tabs!
- Gradient Text
- Spinning Eggs
- Carousel Tabs
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;
}
}
Short video clip of it working
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.
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);
}
}
Carousel Tabs coming soon
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 complexComplex 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
Graphic are 750
About Me Templates
Pure CSS are 350
Graphic are 650
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 per.
Currency Conversion: 500k 
: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
Name
Type
Progress
Paid
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.
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.
Lorem ipsum
testy
dolor sit amet, consectetur adipiscing elit. Sedtesty
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
| 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]
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] TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
- List Item
- List Item
- List Item
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
Bulbasaur:
Charmander:
Squirtle:
Caterpie:
Weedle:
Pidgey:
Rattata:
Alolan Rattata:
Spearow:
Ekans:
Pichu:
Sandshrew:
Alolan Sandshrew:
Nidoran:
Cleffa:
Vulpix:
Alolan Vulpix:
Igglybuff:
Zubat:
Oddish:
Paras:
Venonat:
Diglett:
Alolan Diglett:
Meowth:
Alolan Meowth:
Galarian Meowth:
Psyduck:
Mankey:
Growlithe:
Poliwag:
Abra:
Machop:
Bellsprout:
Tentacool:
Geodude:
Alolan Geodude:
Ponyta:
Galarian Ponyta:
Slowpoke:
Galarian Slowpoke:
Magnemite:
Farfetch'd:
Galarian Farfetch'd:
Doduo:
Seel:
Grimer:
Alolan Grimer:
Shellder:
Gastly:
Onix:
Drowzee:
Krabby:
Voltorb:
Exeggcute:
Cubone:
Lickitung:
Koffing:
Rhyhorn:
Tangela:
Kangaskhan:
Horsea:
Goldeen:
Staryu:
Mime Jr.:
Mr. Mime:
Galarian Mr. Mime:
Scyther:
Smoochum:
Pinsir:
Tauros:
Magikarp:
Lapras:
Eevee:
Omanyte:
Kabuto:
Aerodactyl:
Munchlax:
Snorlax:
Dratini:
Chikorita:
Cyndaquil:
Totodile:
Sentret:
Hoothoot:
Ledyba:
Spinarak:
Chinchou:
Togepi:
Natu:
Mareep:
Azumarill:
Marill:
Bonsly:
Sudowoodo:
Hoppip:
Aipom:
Sunkern:
Yanma:
Wooper:
Murkrow:
Misdreavus:
Unown A:
Unown B:
Unown C:
Unown D:
Unown E:
Unown F:
Unown G:
Unown H:
Unown I:
Unown J:
Unown K:
Unown L:
Unown M:
Unown N:
Unown O:
Unown P:
Unown Q:
Unown R:
Unown S:
Unown T:
Unown U:
Unown V:
Unown W:
Unown X:
Unown Y:
Unown Z:
Unown ?:
Unown !:
Girafarig:
Pineco:
Dunsparce:
Gligar:
Snubbull:
Qwilfish:
Shuckle:
Heracross:
Sneasel:
Teddiursa:
Slugma:
Swinub:
Corsola:
Galarian Corsola:
Remoraid:
Delibird:
Skarmory:
Houndour:
Phanpy:
Stantler:
Smeargle:
Tyrogue:
Elekid:
Magby:
Miltank:
Larvitar:
Treecko:
Torchic:
Mudkip:
Poochyena:
Zigzagoon:
Galarian Zigzagoon:
Wurmple:
Lotad:
Seedot:
Taillow:
Wingull:
Ralts:
Surskit:
Shroomish:
Slakoth:
Nincada:
Whismur:
Makuhita:
Nosepass:
Skitty:
Sableye:
Mawile:
Aron:
Meditite:
Electrike:
Plusle:
Minun:
Volbeat:
Gulpin:
Carvanha:
Wailmer:
Numel:
Torkoal:
Spoink:
Spinda:
Trapinch:
Cacnea:
Swablu:
Zangoose:
Seviper:
Lunatone:
Solrock:
Barboach:
Corphish:
Baltoy:
Lileep:
Anorith:
Feebas:
Castform:
Kecleon:
Shuppet:
Duskull:
Tropius:
Chimecho:
Absol:
Wynaut:
Snorunt:
Spheal:
Clamperl:
Relicanth:
Luvdisc:
Bagon:
Beldum:
Turtwig:
Chimchar:
Piplup:
Starly:
Bidoof:
Kricketot:
Shinx:
Budew:
Roselia:
Cranidos:
Shieldon:
Burmy:
Combee:
Pachirisu:
Buizel:
Cherubi:
Shellos:
Drifloon:
Buneary:
Glameow:
Stunky:
Bronzor:
Happiny:
Chansey:
Chatot:
Spiritomb:
Gible:
Riolu:
Hippopotas:
Skorupi:
Croagunk:
Carnivine:
Finneon:
Mantyke:
Mantine:
Snover:
Porygon:
Rotom:
Phione:
Snivy:
Tepig:
Oshawott:
Patrat:
Lillipup:
Purrloin:
Pansage:
Pansear:
Panpour:
Munna:
Pidove:
Blitzle:
Roggenrola:
Woobat:
Drilbur:
Audino:
Timburr:
Tympole:
Throh:
Sawk:
Sewaddle:
Venipede:
Cottonee:
Petilil:
Basculin:
Sandile:
Darumaka:
Galarian Darumaka:
Maractus:
Dwebble:
Scraggy:
Sigilyph:
Yamask:
Galarian Yamask:
Tirtouga:
Archen:
Trubbish:
Zorua:
Minccino:
Gothita:
Solosis:
Ducklett:
Vanillite:
Deerling:
Emolga:
Karrablast:
Foongus:
Frillish:
Alomomola:
Joltik:
Ferroseed:
Klink:
Tynamo:
Elgyem:
Litwick:
Axew:
Cubchoo:
Cryogonal:
Shelmet:
Stunfisk:
Galarian Stunfisk:
Mienfoo:
Druddigon:
Golett:
Pawniard:
Bouffalant:
Rufflet:
Vullaby:
Heatmor:
Durant:
Deino:
Larvesta:
Chespin:
Fennekin:
Froakie:
Bunnelby:
Fletchling:
Scatterbug:
Litleo:
Flabebe:
Skiddo:
Pancham:
Furfrou:
Espurr:
Honedge:
Spritzee:
Swirlix:
Inkay:
Binacle:
Skrelp:
Clauncher:
Helioptile:
Tyrunt:
Amaura:
Hawlucha:
Dedenne:
Carbink:
Goomy:
Klefki:
Phantump:
Pumpkaboo:
Bergmite:
Noibat:
Rowlet:
Litten:
Popplio:
Pikipek:
Yungoos:
Grubbin:
Crabrawler:
Oricorio:
Cutiefly:
Rockruff:
Wishiwashi:
Mareanie:
Mudbray:
Dewpider:
Fomantis:
Morelull:
Salandit:
Stufful:
Bounsweet:
Comfey:
Oranguru:
Passimian:
Wimpod:
Sandygast:
Pyukumuku:
Minior:
Komala:
Turtonator:
Togedemaru:
Mimikyu:
Bruxish:
Drampa:
Dhelmise:
Jangmo-o:
Grookey:
Scorbunny:
Sobble:
Skwovet:
Rookidee:
Blipbug:
Nickit:
Gossifleur:
Wooloo:
Chewtle:
Yamper:
Rolycoly:
Applin:
Silicobra:
Cramorant:
Arrokuda:
Toxel:
Sizzlipede:
Clobbopus:
Sinistea:
Hatenna:
Impidimp:
Milcery:
Falinks:
Pincurchin:
Snom:
Stonjourner:
Eiscue:
Indeedee:
Morpeko:
Cufant:
Dracozolt:
Arctozolt:
Dracovish:
Arctovish:
Duraludon:
Dreepy:
Lunupine:
Blophin:
Orkit:
Faemueño:
Wagell:
Gosold:
Impyre:
Searene:
Solynx:
Ardik:
Boxaby:
Flarbat:
Hydrark:
Taiveret:
Gragon:
Kinaster:
Luckoo:
Arasprit:
Quetzephyr:
Pixrine:
Kitsunari:
Kryptik:
Bandicoon:
Phastix:
Pasovan:
Glaquine:
Minibbit:
Tillink:
Bezerell:
Ayeren:
Skeleco:
Klaatupillar:
Maravol:
Kyutopi:
Kenyip:
Petripeep:
Gumairy:
Puppod:
Rokiwi:
Alicalf:
Valkind:
Croaket:
Slypin:
Selkrub:
Kawotor:
Kitwurm:
Pepyre:
Aphreyd:
Caimaw:
Valimp:
Frusky:
Skyrie:
Shinorin:
Sikannos:
Goschief:
Mocknock:
Flurrawr Boreal Forme:
Parapod:
Caprikid:
Tenrekki:
Possmol:
Exilant:
Lyruse:
Smokackle:
Inferial:
Saiyan Rattata:
Flying Pichu:
Surfing Pichu:
Shooting Star Cleffa:
Koroku:
Guild Igglybuff:
Apocalyptic Growlithe:
Snowpoke:
Death Star Voltorb:
Early Bird Natu:
Galvanic Wooper:
Vampire Gligar:
Scaracross:
Snichu:
Blue Moon Slugma:
Orthrus Houndour:
Frosdour:
Apocalyptic Poochyena:
Snoralts:
Apocalyptic Shroomish:
Arctic Numel:
Ryukuza:
Seasonal Turtwig:
Igneous Bidoof:
Shinxel:
Snow Combee:
Siberian Glameow:
Gibolu:
Hallowe'en Purrloin:
Apocalyptic Golett:
Glileo:
Spritzkrow:
Noismog:
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] TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
TooltipTooltip
- List Item
- List Item
- List Item
- List Item
- List Item
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]
Cannot post: Please log in to post