- Feel free to use the free use templates as you wish, for journals, shoppes, etc. Use them only where they're designed for as 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 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.
- 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 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.
- Custom templates are for the user whom it is commissioned for only, unless that user tells me otherwise.
- All PFQ rules apply.
- I reserve the right to modify the rules as necessary.
Coding Diaries
Forum Index > PokéFarm > Journals >
Name
content here
some more content here
more stuff
Extra line
things in here
some words
blah blah blah words go here
Code
[sc=container][sc=name]Name[/sc][
][sc=small] type[/sc]
[sc=bubble][/sc][
][sc=stack][sc=box boxTL]content[/sc][
][sc=box boxTR]content[/sc][
][sc=box boxML]content[/sc][
][sc=box boxMR]content[/sc][
][sc=box boxBL]content[/sc][
][sc=box boxBR]content[/sc][
][sc=bubble][/sc][
][/sc][
][sc=credit][url=https://pokefarm.com/forum/post/6297217][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][/sc]
[style]
.container {
width: 300px;
min-height:580px;
padding: 1%;
padding-top: 2%;
box-sizing: border-box;
background-color: #2a2a2a;
font-family: 'Roboto';
text-align:center;
color: #8b8b8b;
.name {
text-transform: uppercase;
font-size: 26pt;
font-family: 'Raleway';
}
.small {
text-transform: lowercase;
font-style: italic;
font-family: 'Raleway';
}
.bubble {
height: 30px;width: 30px; border-radius: 100%;border: 4px solid #8b8b8b;margin:0 auto;
}
.box{padding:5px;height:120px;width:120px; overflow: hidden!important;display: inline-grid;border:2px solid #8b8b8b;}
.boxTL{border-top: none;border-left:none;margin-top:-2px;}
.boxTR{border-top: none;border-right:none;margin-top:-2px;}
.boxML{border-left:none;}
.boxMR{border-right:none;}
.boxBL{border-bottom: none;border-left:none;}
.boxBR{border-bottom: none;border-right:none;}
.credit
{
position: absolute;
bottom: 5px;
left: 5px;
> a > img:hover
{
filter: drop-shadow(0 0 5px #777);
}
}
a,a:link,a:active,a:hover,a:hover{color:#9b9b9b;}
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: local('Raleway'), local('Raleway-Regular'), url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0IT4ttDfA.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;
}
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu7GxKKTU1Kvnz.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.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]
Buying:
BSDs 20 ZC
Prisms 70 ZC
BSDs 20 ZC
Prisms 70 ZCby Kaede
Header Text Here
Snek made by Cele. Template coded by Aemilia.
Text!
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. Nunc ligula ante, facilisis commodo lacinia sed, luctus ac mauris. Vivamus nec ipsum rutrum, faucibus dui et, pharetra neque. Ut vitae turpis justo. Phasellus ut ultricies ipsum. Maecenas vitae eros mollis, consequat justo vitae, sollicitudin nulla.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. Ut cursus sodales nisl at convallis. In id facilisis augue. Curabitur laoreet gravida mi, sit amet mattis massa mattis fermentum. Proin felis augue, imperdiet sed laoreet a, dictum vitae sem. Quisque eu purus eu urna tempor lobortis eu sit amet nulla. Suspendisse justo magna, tristique non dolor non, gravida tincidunt lectus. Aenean rhoncus tellus orci, non facilisis tortor placerat sit amet. Aenean a dolor rutrum, volutpat urna imperdiet, ullamcorper dui.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
Title 3
Contents 3
Title 4
Contents 4
| 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
free useCode
[sc=test][sc=header]Header Text Here[/sc][sc=body]
[/sc][sc=footer][url=https://pokefarm.com/forum/post/6297219][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url]free use[/sc][/sc]
[style]
/* Color scheme palette */
@bg = #012b4d;
@color = #F0F7FE;
@base = #F1F7C5;
@accent = #bbd1aa;
/* importing fonts, DO NOT TOUCH */
/* latin-ext */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/worksans/v7/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBiEJpp_c.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Work Sans';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/worksans/v7/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K3vXBi8Jpg.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;
}
/* latin-ext */
@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spartan/v1/l7gAbjR61M69yt8Z8w6FZf9WoBxdBrG3uV6HABTdfw.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Spartan';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spartan/v1/l7gAbjR61M69yt8Z8w6FZf9WoBxdBrG3uV6JABQ.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;
}
/* DO NOT TOUCH UNLESS YOU KNOW WHAT YOU'RE DOING */
.test
{
background: @bg;
.header
{
font-variant: small-caps;
min-height: 25px;
padding: 2.5%;
text-align: center;
font-size: 22pt;
color: @color;
font-family: 'Work Sans';
text-shadow: 0 0 10px #999;
}
.body
{
min-height: 100px;
background-image: linear-gradient(to left, rgba(78, 104, 149, 0) 0%, rgba(78, 104, 149, 1) 7%, rgba(78, 104, 149, 1) 93%, rgba(78, 104, 149, 0) 100%);
-webkit-box-shadow: 0 7px 6px -5px black, 0 -7px 6px -5px black;
-moz-box-shadow: 0 7px 6px -5px black, 0 -7px 6px -5px black;
box-shadow: 0 7px 6px -5px black, 0 -7px 6px -5px black;
color: @color;
font-family: 'Spartan';
letter-spacing: 1px;
line-height: 1.3;
padding: 1% 8% 0% 8%;
font-size: 10pt;
text-align: justify;
b, u, i, o, s
{
color: @base;
}
::selection
{
background: @color !important;
color: @base !important;
}
h1, h2, h3 {
margin: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
}
h1{font-size:20px;}h2{font-size:15pt;}h3{font-size:12pt;}
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));
}
a
{
opacity: 1;
color: @base;
font-weight: bold;
text-decoration: none;
}
a:hover
{
color: @color;
}
a:before
{
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -2.5px;
left: 0;
background-color: @color;
visibility: hidden;
delay: 0s none !important;
position: true;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before
{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.panel
{
margin-top: 10px;
background: none;
text-align: left !important;
border: none;
border-radius: 0px;
box-shadow: none !important;
a { color: @color; }
a:before
{
background-color: @base;
bottom: -1px;
}
&>h3
{
padding: 5px;
font-size: 11.5pt;
text-transform: uppercase;
background: none;
color: @color;
border: @base;
a { color: @color; }
a:before { background-color: @color; }
}
&>div
{
border-left: 2px solid @base !important;
margin-left: 10px;
padding: 5px 10px;
color: @color;
border: @base;
}
}
table
{
margin: 0 auto;
border: none;
a { color: @accent; }
a:hover { color: @base; }
a:before { background-color: @base; }
}
th, td
{
background: none;
border: 1px solid @color;
text-align: center;
color: @color;
padding: 5px;
}
td:hover
{
background: @color;
color: @base;
-webkit-transition: 800ms ease-out;
transition: 800ms ease-out;
}
th
{
background: @color;
color: @bg;
text-transform: uppercase;
letter-spacing: 1px;
}
.tooltip_content
{
background: @accent !important;
font-size: 10.5tx;
letter-spacing: 5%;
text-decoration: uppercase;
box-shadow: -1px -1px 1px @bg;
border: @bg 1px solid ;
color: @bg;
}
span.bbcode_tooltip { border-color: @base; }
.expbar
{
color: @bg;
background-color: rgba(255,255,255,0);
border-color: @color;
text-shadow: 0px 0px 3px #676767;
overflow: hide;
&>div
{
background-color: @color !important;
border-right: none;
}
}
.expbar>span
{
font-size: 10.5pt;
text-transform: uppercase;
border-right: none;
}
ol, ul
{
text-align: left;
}
.tabbed_interface
{
font-size: inherit;
border: none;
}
.tabbed_interface > ul
{
background: none;
}
.tabbed_interface > ul > li
{
//text-shadow: 0px 0px 3px #232323;
background-position: center;
background: @bg;
border: 2px solid @color;
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: @color;
}
.tab, .tab-active
{
background-color: transparent;
box-shadow: none;
border: none;
color: @color;
text-align: inherit;
padding-top: 2%;
}
.tabbed_interface > ul > li:hover
{
cursor: pointer;
background: @color;
color: @bg;
text-shadow: none;
}
}
.footer
{
padding-top: 1%;
padding-bottom: 1%;
font-variant: small-caps;
//min-height: 25px;
font-size: 10pt;
text-align: center;
color: @color;
text-shadow: 0px 0px 10px #999;
> a > img
{
position: absolute;
bottom: 172px;
left: 5px;
&:hover
{
filter: drop-shadow(0 0 5px #777);
}
}
a, a:link, a:visited, a:active
{
opacity: 1;
color: @base;
font-weight: bold;
text-decoration: none;
}
a:hover
{
color: @color;
}
a:before
{
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -2.5px;
left: 0;
background-color: @color;
visibility: hidden;
delay: 0s none !important;
position: true;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before
{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
}
[/style]
Kaede
Code
[sc=about][
][sc=header]Name[/sc][
][sc=nav][
][sc=tabbed_interface][
][ul][
][li][tip=About Me]웃[/tip][/li][
][li][tip=Friends]❥[/tip][/li][
][li][tip=Collections]∞[/tip][/li][
][li][tip=Credits]</>[/tip][/li][
][/ul][
][sc=tab tab-active]Content[/sc][
][sc=tab]Content[/sc][
][sc=tab]Content[/sc][
][sc=tab]Coded by [url=https://pfq.link/@bPV]Aemilia[/url][/sc][
][/sc][
][/sc][
][sc=credit][url=https://pokefarm.com/forum/post/6297225][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][
][/sc]
[style]
/****************************************
* EDIT THESE VALUES ONLY. MAKE SURE TO *
* FOLLOW PFQ'S LEGIBILITY GUIDELINES. *
****************************************/
@Light = #A4ACB7;
@LightTabContent = #9EA7B3;
@MidShade = #36393f;
@Dark = #2f3136;
/***************************************
* 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;
}
/**************************
* IMPORTED FONT-FAMILIES *
**************************/
/* latin-ext */
@font-face
{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face
{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.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;
}
/* latin-ext */
@font-face
{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCGPrEHJA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face
{
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v18/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVvaorCIPrE.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;
}
/*******************
* ABOUT ME CODING *
*******************/
.about
{
display: flex;
flex-flow: column;
width: 310px;
min-height: 450px;
background: @Dark;
font-size: 12pt;
font-family: Helvetica;
color: @Light;
.nav
{
flex-grow: 1;
display: flex;
&>.tabbed_interface
{
flex: 1;
}
}
.header
{
text-align: center;
font-size: 22pt;
font-family: Open Sans;
letter-spacing: 1.5px;
padding-top: 0.75%;
padding-bottom: 0.75%;
}
.tabbed_interface
{
display: flex;
> ul
{
padding-top: 5px;
background: @Dark;
width: 45px;
display: flex;
flex-flow: column nowrap;
justify-content: flex-start;
}
> ul > li
{
flex: 0;
text-align: center;
display: inline-block;
background: transparent;
color: @Light;
font-size: 20pt;
width: 35px;
height: 35px;
padding: 5px;
padding-top: 6px;
padding-bottom: 4px;
border-radius: 100%;
border: 5px solid transparent;
font-weight: bold;
z-index: 5;
span.bbcode_tooltip
{
border: none;
}
.tooltip_trigger.lock+.tooltip_content, .tooltip_trigger.lock.dismiss+.tooltip_content
{
display: block !important;
z-index: 10000;
}
.tooltip_trigger
{
cursor: pointer;
}
.tooltip_content
{
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
position: absolute;
border-radius: 0 10px 10px 0;
white-space: nowrap;
top: 4px;
left: 49px;
height: 30px;
background: @Dark;
color: @Light;
border: none;
font-weight: bold;
font-size: 12pt;
padding-left: 25px;
padding-right: 10px;
line-height: 1.75;
}
}
> ul > li:last-child
{
font-size: 15pt;
line-height: 1.65;
}
> ul > li.tab-active
{
background: @Light;
color: @Dark;
border: 5px solid @Dark;
}
> .tab, > .tab-active
{
flex-grow: 1;
background: @MidShade;
font-size: 12pt;
line-height: 1.25;
border:none;
padding-left: 6%;
padding-right: 2%;
padding-top: 4px;
padding-bottom: 1%;
text-align: justify;
font-family: Raleway;
color: @LightTabContent;
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: #ccc;
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: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
transition: transform .5s ease-out;
}
a:hover
{
color: #000;
text-shadow: 0 0 4px #888;
font-style: normal;
}
a:hover::before
{
transform: translateY(0);
transition: transform .5s ease-out;
}
a:active
{
}
u
{
text-decoration: underline;
text-decoration-color: #c2e59c;
-moz-text-decoration-color: #c2e59c;
text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
/*background-image: linear-gradient(to right, @Light 50%, transparent 50%);
background-position: 0 1.1em;
background-repeat: repeat-x;
background-size: 6px 1px;*/
}
del
{
text-decoration: line-through;
text-decoration-color: #c2e59c;
-moz-text-decoration-color: #c2e59c;
text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
}
b
{
color: #64b3f4;
}
.panel
{
margin-top: 10px;
background: none;
text-align: left !important;
border: none;
border-radius: 0px;
box-shadow: none !important;
a
{
color: @Light;
}
&>h3
{
padding: 5px;
font-size: 13pt;
text-transform: uppercase;
background: none;
text-shadow:none;
font-family: Open Sans;
font-weight: bold;
-webkit-text-stroke: 0;
a
{
color: @Light;
-webkit-text-stroke: 0;
}
a:before
{
background-color: @Light;
}
a:hover
{
color:black;
}
}
&>div
{
border-left: 1px solid @Light !important;
margin-left: 10px;
padding: 5px 10px;
color: @Light;
border: @Light;
font-size: 12pt!important;
font-family: Helvetica;
}
}
h1,h2,h3
{
font-family: Open Sans;
color: @Light;
-webkit-text-stroke: 1.5px @Dark;
text-shadow: 0px 0px 3px @Light;
}
hr
{
border: 0;
height: 2px;
background-image: linear-gradient(to right, rgba(54, 57, 63,0), rgba(158, 167, 179,0.75), rgba(54, 57, 63,0));
}
ol
{
list-style-type: lower-greek;
list-style-position: outside;
}
ul
{
list-style-type: square;
list-style-position: outside;
}
.tooltip_content
{
background: @Light !important;
font-size: 10pt;
letter-spacing: 5%;
padding: 2%;
box-shadow: 0px 0px 5px @LightTabContent;
border: @Dark 2px solid;
color: @Dark;
}
span.bbcode_tooltip
{
border-color: @Light;
}
.expbar
{
color: @Dark;
background-color: rgba(255,255,255,0.2);
border-color: @Light;
border-radius: 10px;
text-shadow: 1px 1px 0 #efefef, 1px -1px 0 #efefef, -1px 1px 0 #efefef, -1px -1px 0 #efefef;
font-weight: bold;
overflow: hide;
&>div
{
background-color: @Light !important;
border-right: none;
}
}
.expbar>span
{
font-size: 10pt;
text-transform: uppercase;
border-right: none;
}
table
{
margin: 0 auto;
border: none;
width: auto;
border-spacing: 5px;
border-collapse: separate;
a { color: @Light; }
a:hover { color: @Dark; }
a:before { background-color: @Dark; }
}
th, td
{
background: none;
border: 1px solid @Light;
text-align: center;
color: @color;
padding: 5px;
border-radius: 5px;
}
td:hover
{
background: @Light;
color: @Dark;
-webkit-transition: 800ms ease-out;
transition: 800ms ease-out;
}
th
{
background: @Light;
color: @Dark;
text-transform: uppercase;
letter-spacing: 1px;
}
}
}
.credit
{
position: absolute;
bottom: 5px;
left: 5px;
> a > img:hover
{
filter: drop-shadow(0 0 5px #777);
}
}
}
[/style]
Snek made by Cele. Template coded by Aemilia.
Text!
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. Nunc ligula ante, facilisis commodo lacinia sed, luctus ac mauris. Vivamus nec ipsum rutrum, faucibus dui et, pharetra neque. Ut vitae turpis justo. Phasellus ut ultricies ipsum. Maecenas vitae eros mollis, consequat justo vitae, sollicitudin nulla.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. Ut cursus sodales nisl at convallis. In id facilisis augue. Curabitur laoreet gravida mi, sit amet mattis massa mattis fermentum. Proin felis augue, imperdiet sed laoreet a, dictum vitae sem. Quisque eu purus eu urna tempor lobortis eu sit amet nulla. Suspendisse justo magna, tristique non dolor non, gravida tincidunt lectus. Aenean rhoncus tellus orci, non facilisis tortor placerat sit amet. Aenean a dolor rutrum, volutpat urna imperdiet, ullamcorper dui.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
Title 3
Contents 3
Title 4
Contents 4
| 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
[sc=snowy][img]https://sierralibertini.com/pfq/template/free_use/misc/snowy-forest.png[/img][sc=body]Content
[hr][sc=credits][url=https://theeverygirl.com/free-downloadable-tech-backgrounds-for-november/]BG[/url][/sc][/sc][sc=credit][url=https://pokefarm.com/forum/post/6297227][img]https://behindthemoonpfq.com/assets/images/templates/personal/snek_by_Cele.png[/img][/url][/sc][/sc]
[style]
/* variables */
@base: #000; /* default */
@color: #1754C4; /* secondary */
@accent: #DBDBFF; /* accents */
/* latin */
@font-face {
font-family: 'Mukta';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/mukta/v8/iJWKBXyXfDDVXbnBrXw.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;
}
.snowy
{
margin: 0 auto;
text-align: center;
width: 80%;
.body
{
background: #FFF;
color: @base;
text-align: left;
padding: 1.5%;
//width: 500px;
font-family: 'Mukta';
margin: 0 auto;
b, u, i, o, s
{
color: @color;
}
::selection
{
background: @color !important;
color: @base;
}
h1, h2, h3 {
margin: 0;
display: block;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0px 0px 5px #666;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(178, 53, 45, 0), rgba(178, 53, 45, 0.75), rgba(178, 53, 45, 0));
}
a
{
opacity: 1;
color: @color;
font-weight: bold;
text-decoration: none;
}
a:hover
{
color: @color;
}
a:before
{
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: -2.5px;
left: 0;
background-color: @color;
visibility: hidden;
delay: 0s none !important;
position: true;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before
{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.panel
{
margin-top: 10px;
background: none;
text-align: left !important;
border: none;
border-radius: 0px;
box-shadow: none !important;
a { color: @base; }
a:before
{
background-color: @base;
bottom: -1px;
}
&>h3
{
padding: 5px;
font-size: 11pt;
text-transform: uppercase;
background: none;
color: @color;
border: @base;
text-shadow: none;
a { color: @color; text-shadow: none; }
a:before { background-color: @color; }
}
&>div
{
border-left: 1px solid @color !important;
margin-left: 10px;
padding: 5px 10px;
color: @base;
border: @color;
}
}
table
{
margin: 0 auto;
border: none;
a { color: @accent; }
a:hover { color: @base; }
a:before { background-color: @base; }
}
th, td
{
background: none;
border: 1px solid @color;
text-align: center;
color: @color;
padding: 5px;
}
td:hover
{
background: @color;
color: #ffffff;
-webkit-transition: 800ms ease-out;
transition: 800ms ease-out;
cursor: default;
}
th:hover
{
cursor: default;
}
th
{
background: @color;
color: @accent;
text-transform: uppercase;
letter-spacing: 1px;
}
.tooltip_content
{
background: @accent !important;
font-size: 10.5pt;
letter-spacing: 5%;
text-decoration: small-caps;
box-shadow: -0px -0px 2px @color;
border: @color 1px solid;
color: @color;
}
span.bbcode_tooltip { border-color: @base; }
.expbar
{
color: @accent;
background-color: rgba(255,255,255,0);
border-color: @color;
text-shadow: 0px 0px 3px #232323;
overflow: hide;
&>div
{
background-color: @color !important;
border-right: none;
}
}
.expbar>span
{
font-size: 10.5pt;
text-transform: uppercase;
border-right: none;
}
ol, ul
{
text-align: left;
margin-left: 10px;
}
.tabbed_interface
{
font-size: inherit;
border: none;
}
.tabbed_interface > ul
{
background: none;
}
.tabbed_interface > ul > li
{
//text-shadow: 0px 0px 3px #232323;
background-position: center;
background: @accent;
border: 2px outset @color;
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: @color;
}
.tab, .tab-active
{
background-color: transparent;
box-shadow: none;
border: none;
color: @base;
text-align: inherit;
padding-top: 2%;
}
.tabbed_interface > ul > li:hover
{
cursor: pointer;
background: @color;
color: @accent;
text-shadow: none;
}
.credits
{
text-align: center;
//position: relative;
//bottom: 2px;
color: black;
}
}
.credit
{
position: absolute;
bottom: 5px;
left: 11%;
> a > img:hover
{
filter: drop-shadow(0 0 5px #777);
}
}
}
[/style]
Name Here
Template coded by Aemilia. If you use this template, do not remove the link back to this post.
Code
[styleclass=carrdStyle][sc=carrd][sc=img][/sc][h1]Name[/h1][
]Text
[sc=bubble link1][url=https://google.com]Trades [img]https://img.icons8.com/material-sharp/25/000000/transaction.png[/img][/url][/sc]
[sc=bubble link2][url=https://google.com]Art [img]https://img.icons8.com/external-tulpahn-basic-outline-tulpahn/25/000000/external-art-back-to-school-tulpahn-basic-outline-tulpahn.png[/img][/url][/sc][/sc][sc=carrd2][url=https://google.com][img]https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-notebook-interface-kiranshastry-lineal-kiranshastry.png[/img][/url][url=https://google.com][img]https://img.icons8.com/fluency-systems-regular/48/000000/trophy.png[/img][/url][url=https://google.com][img]https://img.icons8.com/windows/64/000000/friends.png[/img][/url][/sc]
[sc=credits][url=https://pokefarm.com/forum/post/6297232]Template[/url] | [pit=Icons8][url=https://icons8.com/icon/92276/transaction]Transaction[/url] || [url=https://icons8.com/icon/4G3lPrTsMBd9/art]Art [/url] || [url=https://icons8.com/icon/REc7gZxaUO7W/notebook]Notebook[/url] || [url=https://icons8.com/icon/ehCpqWjLfVRz/trophy]Trophy[/url] || [url=https://icons8.com/icon/55461/friends]Friends[/url][/pit] | [url=https://placekitten.com/75/75]Kitty[/url] | Free Use[/sc][/styleclass]
[style]
/* TEMPLATE BY AEMILIA, FREE USE, MUST HAVE PERMISSION TO EDIT CODES OUTSIDE OF THE COLOURS AND PICTURES */
/* ONLY EDIT THIS PORTION TO MODIFY THE COLOURS IN THE TEMPLATE */
@bg = #F28C28;
@text = #000000;
@accent1 = #CB6A0A;
@accent2 = #A15000;
@link1 = #000000;
@link2 = #000000;
@button1 = rgba(255,255,255,.85);
@button2 = rgba(255,255,255,.85);
@border = #000000;
@pic = 'https://placekitten.com/75/75';
/* DO NOT MODIFY THIS PORTION WITHOUT PERMISSION */
.carrdStyle
{
background-color: @bg;
min-height: 475px;
box-sizing: border-box;
padding-top: 25px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 310px;
color: @text;
font-size: 10pt;
a, a:link, a:active, a:hover, a:visited
{
color: @link1;
}
.carrd
{
a, a:link, a:visited, a:hover, a:active{text-decoration: none;color:@link1;}
border-radius: 15px 15px 0 0;
height: 66.67%;
width: 80%;
background-color: @accent1;
padding: 10px;
box-sizing: inherit;
text-align: center;
.img
{
background: url(@pic) grey;
border-radius: 100%;
background-size: cover;
border: 3px solid @border;
height: 75px;
width: 75px;
margin: 0 auto;
}
h1
{
font-size: 20pt;
font-family: sans-serif;
padding-top: 5px;
}
.bubble
{
height: 45px;
line-height: 45px;
text-align: left;
padding-left: 15px;
font-size: 13pt;
border-radius: 15px;
color: black;
img
{
float: right;
margin-top: 10px;
margin-right: 15px;
}
a
{
display:block;
height:100%;
width:100%;
}
}
.link1
{
a{color: @link1;}
background: @button1;
}
.link2
{
a{color: @link2;}
background-color: @button2;
}
}
.carrd2
{
background-color: @accent2;
border-radius: 0 0 15px 15px;
height: 60px;
width: 80%;
margin-bottom: 25px;
display: flex;
justify-content: center;
align-items: center;
a img {height:30px;width:30px;}
a
{
display: inline-block;
background: @button1;
margin:5px;
padding:5px;
border-radius:100%;
}
}
.credits
{
position:absolute;
bottom:175px;
span.bbcode_tooltip
{
border-bottom-color:black;
}
.tooltip_content
{
position:absolute;
bottom:0;
left:0;
background:@accent1;
text-align:center;
color:#000000;
a,a:link,a:hover,a:active,a:visited
{
color:inherit;
font-weight:bold;
}
}
}
}
[/style]
- Tab
- Tab
- Tab
Name
Template coded by Aemilia. If you use this template, do not remove the link back to this post.Information here
More info
Code
[sc=eclipseTemplate][sc=card][
][styleclass=tabbed_interface horizontal][ul][
][li]Tab[/li][
][li]Tab[/li][
][li]Tab[/li][
][/ul][sc=tab tab-active][h1]Name[/h1][
]Some information here[/sc][
][sc=tab]Information here[/sc][
][sc=tab]More info[/sc][
][/styleclass]
[sc=links][url=https://google.com][img]https://img.icons8.com/external-kiranshastry-lineal-kiranshastry/64/000000/external-notebook-interface-kiranshastry-lineal-kiranshastry.png[/img][/url][url=https://google.com][img]https://img.icons8.com/material-sharp/25/000000/transaction.png[/img][/url][url=https://google.com][img]https://img.icons8.com/windows/64/000000/friends.png[/img][/url][/sc][/sc]
[sc=credits][url=https://pokefarm.com/forum/post/6297233]Template[/url]| [url=https://pixabay.com/illustrations/earth-space-sunlight-sun-rays-1756274/]BG[/url] | [pit=Icons8][url=https://icons8.com/icon/92276/transaction]Transaction[/url] || [url=https://icons8.com/icon/REc7gZxaUO7W/notebook]Notebook[/url] || [url=https://icons8.com/icon/55461/friends]Friends[/url][/pit] | [url=https://placekitten.com/75/75]Kitty[/url] | Free Use[/sc][/sc]
[Style]
/* TEMPLATE BY AEMILIA, FREE USE, MUST HAVE PERMISSION TO EDIT CODES OUTSIDE OF THE COLOURS AND PICTURES */
/* MODIFY THIS PORTION OF THE TEMPLATE ONLY */
@bg-pic = 'https://cdn.pixabay.com/photo/2016/10/20/18/35/earth-1756274_1280.jpg';
@card-bg = rgba(255, 255, 255, 0.85);
@text = #000000;
@border = #000000;
@credLinkColour = #333333;
/* DO NOT MODIFY ANYTHING BELOW HERE WITHOUT PERMISSION */
/* latin-ext */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/roboto/v29/KFOmCnqEu92Fr1Mu4mxK.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;
}
.eclipseTemplate
{
background: url(@bg-pic) black;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
width: 310px;
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
.card
{
background: @card-bg;
//height: 350px;;
width: 80%;
.tabbed_interface
{
box-shadow: none;
box-sizing: border-box;
background: none;
font-size: 11pt;
display: inline;
> ul
{
background: inherit;
whitespace: nowrap;
width: 100%;
> li
{
margin: 5px;
padding: 5px 0 5px 0;
background: inherit;
border: 2px solid @border;
display: inline;
text-align: center;
color: @text;
font-family: 'Roboto' sans-serif;
}
> li:hover
{
cursor: pointer;
}
}
.tab
{
border: none;
border-top: 2px solid @border;
border-bottom: 2px solid @border;
background: none;
box-shadow: none;
width: 95%;
margin: 0 auto;
color: @text;
text-align; center;
h1{font-family: 'Roboto' sans-serif;font-weight: normal;}
a,a:link,a:hover,a:active,a:visited{color: inherit;}
}
}
.links
{
margin: 0 auto;
text-align: center;
a
{
display: inline-block;
border-radius: 100%;
border: 2px solid @border;
padding: 5px;
margin: 5px;
margin-top: -10px;
img
{
height: 30px;
width: 30px;
}
}
}
}
.credits
{
position: absolute;
bottom: 0px;
color: @text;
background: @card-bg;
width: 310px;
font-size: 10pt;
text-align: center;
position: absolute;
bottom:0;
a,a:link,a:hover,a:active,a:visited
{
color: @credLinkColour;
font-weight: bold;
}
span.bbcode_tooltip
{
border-bottom-color:#000000;
}
.tooltip_content
{
background: #FFFFFF;
text-align:center;
color: @credLinkColour;
a,a:link,a:hover,a:active,a:visited
{
color:inherit;
font-weight:bold;
}
position: absolute;
bottom:0;
}
}
}
[/Style]
Kaede's Templates
Rules
Shoppe
- I am only offering custom post templates and about me templates at this moment.
- All post templates come with text, lists (non-image), tips, progress bars, panels, links, tabs, tables, and headers.
- About me templates come with the same as post templates, minus the tabs unless specifically requested to include tabs.
Templates can also be coded for the following for +50
each:
- Custom Bullets
- Horizontal Rules
- PKMN Panels
- Italics/Bold/Strikethrough/Underline Effects
- Image Effects
- Columns
- Cursors
- Hover Effects
- Grid Capability*
- Light/Dark Mode
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 one, where I do not create a graphic to create it.
- 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.
Currency Conversion: 500k 
:500 
:100 :$1 USD.
I will also accept Box Boxes valued at 100 ZC per, Blue Soul Dews valued at 35 ZC per, Black Prisms valued at 55 ZC per, and Wishing Stars valued at 30 ZC per. At least half of the payment must be at least half currency.
I will accept any of these currencies and items as long as it equates to the correct price.
Graphic are 750
About Me Templates
Pure CSS are 350
Graphic are 650
Pure CSS templates are similar to this one, where I do not create a graphic to create it.
- 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.
Currency Conversion: 500k 
:500 
:100 :$1 USD.
I will also accept Box Boxes valued at 100 ZC per, Blue Soul Dews valued at 35 ZC per, Black Prisms valued at 55 ZC per, and Wishing Stars valued at 30 ZC per. At least half of the payment must be at least half currency.
I will accept any of these currencies and items as long as it equates to the correct price.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]
Free Use Templates
Post Templates
About Me Templates
Signature Templates
Code
[sc=container][sc=card][sc=header]Header[/sc][sc=body]
[/sc][/sc][
][sc=credits][url=https://pokefarm.com/forum/post/6297234]Template[/url] | [url=https://pfq.link/@bPV]Pixel Art[/url] | [url=https://pixabay.com/illustrations/seamless-repeat-repetitive-2033661/]BG[/url] | [pit=Icons8][url=https://icons8.com/icon/36871/hand-with-pen]Hand[/url] || [url=https://icons8.com/icon/69/user-account]People[/url] || [url=https://icons8.com/icon/REc7gZxaUO7W/notebook]Notebook[/url][/pit] | Free Use[/sc][/sc]
[style]
/* ONLY MODIFY THESE VARIABLES */
@bg-url = 'https://cdn.pixabay.com/photo/2017/02/02/19/44/seamless-2033661_1280.jpg';
@border = #6495ED;
@text = #000000;
@card-bg = rgba(255, 255, 255, 0.90);
@shadow = #000000;
@link = #0047AB;
/* DO NOT EDIT ANYTHING PAST THIS POINT WITHOUT PERMISSION */
/* latin-ext */
@font-face {
font-family: 'Open-Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIUx6EQRjA.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open-Sans';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/opensans/v27/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVIUx6EQ.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;
}
.container
{
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
flex-direction: column;
background: url(@bg-url);
background-repeat: repeat;
background-size: contain;
box-sizing: border-box;
padding: 25px 0 25px 0;
.card
{
width: 90%;
background: @card-bg;
color: @text;
box-sizing: border-box;
box-shadow: 0 0 15px @shadow;
margin-bottom: 15px;
.header
{
height: 50px;
line-height: 40px;
padding: 5px;
box-sizing: border-box;
font-size: 18pt;
border-bottom: 4px solid @border;
width:100%;
text-align: center;
color: @text;
font-variant: small-caps;
font-family: 'Open-Sans' sans-serif;
font-weight: bold;
}
.body
{
min-height: 100px;
width:90%;
//padding: 5px;
margin-left: auto;
margin-right: 0;
border-left: 4px solid @border;
box-sizing: border-box;
padding-top: 3px;
color: @text;
> .text
{
padding: 5px;
}
ul
{
margin: 0;
list-style: none;
padding:0;
}
ul li
{
padding-left: 5px;
}
ul li:nth-child(even)::before
{
content: "";
margin-right: 8px;
display: inline-block;
background: url('https://i.ibb.co/N27Gkk0/blue.png');
width: 15px;
height: 15px;
}
ul li:nth-child(odd)::before
{
content: "";
margin-right: 8px;
display:inline-block;
width: 15px;
height: 15px;
background: url('https://i.ibb.co/HNRGy8y/green.png');
}
h1
{
border: 3px solid @border;
border-left: 0;
border-right: 0;
font-family: 'Open-Sans' sans-serif;
font-variant: small-caps;
background: transparent;
background: linear-gradient(45deg, rgba(205, 205, 205, 0.75) 0%, rgba(157, 157, 157, 0.75) 100%);
font-size: 16pt;
}
h2
{
border: 2px solid @border;
border-left: 0;
border-right: 0;
font-family: 'Open-Sans' sans-serif;
font-variant: small-caps;
background: transparent;
background: linear-gradient(45deg, rgba(205, 205, 205, 0.75) 0%, rgba(157, 157, 157, 0.75) 100%);
font-size: 14pt;
}
h3
{
border: 1px solid @border;
border-left: 0;
border-right: 0;
font-family: 'Open-Sans' sans-serif;
font-variant: small-caps;
background: transparent;
background: linear-gradient(45deg, rgba(205, 205, 205, 0.75) 0%, rgba(157, 157, 157, 0.75) 100%);
font-size: 13pt;
}
hr
{
background: url('https://i.ibb.co/qdcxMJx/divider.png');
width: 216px;
height: 25px;
border: none;
}
.links
{
text-align: center;
display: grid;
margin: 0 auto;
grid-column-gap: 25px;
grid-template-columns: 45px 45px 45px;
grid-template-rows: 70px;
align-items: center;
justify-content: center;
.texts {visibility: hidden;}
.bubble
{
display: flex;
width: 50px;
height: 50px;
padding: 3%;
border-radius: 100%;
border: 2px solid black;
}
.bubble a
{
margin: 5px;
img
{
height: 40px;
width: 40px;
}
}
.bubble .texts
{
visibility: hidden;
width: 120px;
background-color: #cccccc;
background: linear-gradient(45deg, rgba(205, 205, 205, 1) 0%, rgba(157, 157, 157, 1) 100%);
border: 2px solid @border;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 12%;
color: black;
font-size: 12pt;
left: 45%;
}
.bubble:hover .texts
{
visibility: visible;
}
}
.form
{
.panel
{
width: 98%;
margin: 0 auto;
background: transparent;
border-radius: 0;
border: none;
box-shadow: none;
& > h3
{
font-family: 'Open-Sans' sans-serif;
border: 2px solid @border;
font-variant: small-caps;
background: transparent;
background: linear-gradient(45deg, rgba(205, 205, 205, 0.75) 0%, rgba(157, 157, 157, 0.75) 100%);
font-size: 14pt;
border-radius: 0;
text-align: center;
color: black;
}
& > div
{
color: black;
-webkit-user-select: all;
-moz-user-select: all;
-ms-user-select: all;
user-select: all;
}
& > div::selection
{
background: black;
color: white;
}
}
}
}
}
.credits
{
position: absolute;
align-self: flex-end;
width: 100%;
bottom: 172px;
background: @card-bg;
color: @text;
text-align: center;
padding: 3px;
box-sizing: border-box;
a, a:link, a:hover, a:active, a:visited{color: @link;}
span.bbcode_tooltip
{
border-bottom-color:black;
}
.tooltip_content
{
position: absolute;
bottom: 0;
text-align: center;
background: @card-bg;
color: black;
a, a:link, a:hover, a:active, a:visited
{
color: inherit;
}
}
}
}
[/style]
Columns example:
About the code:
- You can use the same class multiple times! Do not mess with the CSS unless you understand what you're doing.
- There are six classes: columns, which embodies the code and contains everything for it without affecting other parts of a post/template; row, which symbolises a row; col-1, a column with a width of 25% of the available space; col-2, a column with a width of 50% of the available space; col-3, a column with a width of 75% of the available space; and col-4, a column with a width of 100% of the available space.
- Make sure each row equals exactly 100% maximum width of all columns combined. Excess forced a column onto a new line, while too little will create gaps at the end of the row. There can be a maximum of four columns in a row, all must be using the col-1 class.
-- On mobile, all col- classes are 100% and will take up the whole width for mobile compatibility. Please take this into account when using the code.
- Feel free to increase/decrease the padding as necessary, and add a border to the columns. The box-sizing property makes sure that the width includes the size of both in its calculations.
- If you need more columns, create another col- class and then recalculate the widths. For example, if you have five columns, you'd need to set col-1 width to 1/5th of the available space, col-2 width to 2/5ths, col-3 width to 3/5ths, col-4 width to 4/5ths, and col-5 width to 5/5ths.
- If you have other concerns, feel free to PM me on site or DM me on Discord
Apples
Bananas
Trees
Grass
An entire line needed here
Code
Columns example:
[sc=columns][
][sc=row][
][sc=col-1]Apples[/sc][
][sc=col-3]Bananas[/sc][
][/sc][
][sc=row][
][sc=col-2]Trees[/sc][
][sc=col-2]Grass[/sc][
][/sc][
][sc=row][
][sc=col-4]An entire line needed here[/sc][
][/sc][
][/sc]
[style]
*
{
box-sizing: border-box;
}
.columns
{
[class*="col-"]
{
width: 100%;
float: left;
padding: 1%;
margin-bottom: 0.75%;
}
@media only screen and (min-width: 768px)
{
.col-1
{
width: 25%;
}
.col-2
{
width: 50%;
}
.col-3
{
width: 75%;
}
.col-4
{
width: 100%;
}
}
.row::after
{
content: "";
clear: both;
display: table;
}
}
[/style]
Kaede.php#1366
. Upon responses, if I feel there's a question often heard, I'll add it to this section of the post.Let's put some words in here and keep rambling. Can't believe I'm a year older now, can time stop going so fast? Some more text in here yea yea. Coding is so much fun.
Code
[sc=wrapper][sc=about][sc=frame]Box under the overlay![/sc][/sc][
][sc=overlay]Overlay, hover or click me (if on mobile)[/sc][/sc]
[style]
.wrapper {
position: relative;
}
.overlay {
position: absolute;
background:#232323;
color: #dedede;
font-family: Calibri;
top: 0;
bottom: 0;
text-align: center;
width: 310px;
a:link, a:visited
{
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
text-decoration: underline;
}
a:hover
{
text-decoration: underline;
}
}
.wrapper:hover > .overlay {
display: none;
}
.frame
{
width: 310px;
}
[/style]
Project Sunshine
Grounding techniques can be found at the end of this post. Resources are just above them. If you have anything you would like me to add, lemme know and I can include them!
A good chunk of the world's population suffers from at least one mental illness, from depression to anxiety and so many more. Mental health is linked to your physical wellbeing, so it is good to reach out when you're struggling or otherwise in a rough spot. Everyone has their good days, the sunny days, and their bad days, the stormy day, or a mix between the two. I hope that perhaps one day, every day is a sunny day, but life doesn't work like that and there will always be a cloudy or rainy day mixed in. Just, hopefully much fewer, if any, stormy days. Until those days do come, I want to be able to help as many people work towards their sunny day, get out of the storm enough to breath and learn to grow on their own and with others, perhaps even encouraging them to reach out and help others as I want to and am doing. Transitioning from a stormy day, to that rainy day, to a cloudy day, all the way to a sunny day takes work and time, as well as having the right people and right ways to ground yourself to the current moment.
Everyone, and I mean everyone, is ALWAYS welcome to message me on PFQ or on Discord (my handle is Kaede.php#0472) if you want advice or just someone to talk to or vent at for a while. I am always willing to lend the ear and reach out my hand to help pull you up. Please note that I am not a doctor in any forme, so while I cannot offer any medical advice, I can share with you some grounding techniques, my confidential ear (I will not speak a word to anyone about anything you do not want shared unless I feel it is life threatening), or any way I can otherwise help. Most of the techniques I have to offer did come from various doctors I have had over the years, so even if you don't trust my own experiences with them, believe that they are backed by science.
I will be posting some resources that I've found beneficial, most of them are free to use, though a couple may have paid portions to it, but they are not necessary to purchase, I promise. I have never paid for anything outside of my doctor, so believe me when I say that it is up to you if you decide you want it.
If you need medical attention, seek it. Please. Everyone is valuable, even if you do not believe it.
Resources
The Depression Project - I recommend following them on social media because they post a lot of great content and quotes on them Military Crisis Line - If you are or have served in the US Armed Forces, this is completely confidential and a great place to talk to someone to help you relax or calm down If you know of other good resources, shoot me a message so I can add it!Grounding Techniques
- 5-4-3-2-1: find 5 things you can see, find 4 things that you can touch, find 3 things that you can hear, find 2 things you can smell, and find 1 thing you can taste. Take a moment each time to absorb it and think about it for a second before moving to the next item. If you can't find anything to taste, that's okay. - Make lists: choose a category and list as many things as you can think of. Some possible categories are: colours, plants, animals, clothes, languages, furniture, whatever topics you know well work best. I usually stick to programming languages, for example. - TIPP: ~ Temperature: cooler temperatures can slow down your heart rate. Splash your face with cold water or set an ice cube on it. ~ Intense Exercise: Redirect and release built up energy. Jumping jacks, running, pushups, dancing, something that has movement. Stretching works too, but I recommend something that is a little more strenuous if you can. ~ Paced Breathing: slow and deep diaphragm breaths; count the seconds, 5 in, hold for 2-3, 5 out works best for me, but adjust as necessary. ~ Progressive Muscle Relaxation: Close your eyes. Tense up each muscle on the inhale, relax it on the exhale. Work your way from your head to your toe. Scrunch up your eyes, then your cheeks, chest, arms, fists, etc, working down to your feet. This one by itself is also good to do. - Butterfly Hug: 1. Cross your arms over your chest and make a butterfly shape. Interlock your thumbs. 2. Hands and fingers as vertical as possible, pointing towards the neck. 3. Eyes can be completely or slightly closed. Focus on the tip of your nose. 4. Move your hands like a butterfly gently flapping its wings, tapping your self. Breathe deeply. 5. Notice what thoughts, images, feelings, physical sensations are going through your mind. - Reorient yourself: ~ My name is ------- ~ I am safe right now. ~ I am ------ years old. ~ I am currently at -------- ~ Today is --------- ~ The season is -------- ~ The weather is -------- ~ I am wearing -------- ~ I can see --------- (objects, shapes, colours) ~ Everything is going to be alright. - Count in a random order (your brain can't count out of order unless it calms down so it helps bring you back) - Take a walk/exercise - Listen to music/podcast/show - Write/do art/something creative to channel your excessive energy into seomthing productive - Take a nap Note that these grounding techniques are good to do even when you're not in a panick-y state, but when you're calm already. If a method doesn't work for you the first time, give it at least two or three more tries before giving up on it. Sometimes it may take a few times before you find that it actually does help. Remember, not every technique will work for everyone, so don't be afraid to try a few of them concurrently. Some you may find to be more beneficial for yourself, so don't limit yourself to just one. Also, you do not need to be "talented" to do art, write, etc., so long as YOU enjoy it, that's what matters. This list is non-exhaustive, so if you find something that works for you and is not listed here, tell me so I can add it to the list!Code
[sc=sunnyDay][sc=header]Project Sunshine[/sc]
[sc=body]This template is only meant to be used for housing regular text and links, nothing else. Tips, panels, progress bars, pkmn panels are NOT coded for.[/sc][
][sc=credits][url=https://pokefarm.com/forum/post/6301908]Template[/url] || [url=https://www.transparentpng.com/details/sun-clipart-images-_5473.html]Sun[/url] || Free Use[/sc][/sc]
[style]
@bg-img: 'https://www.transparentpng.com/download/sun/sun-clipart-images-png-7.png';
@text = #000000;
@link-text = #830000;
/* latin-ext */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pbCGPrEVJz9d-c8.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/raleway/v22/1Ptxg8zYS_SKggPN4iEgvnHyvveLxVs9pbCIPrEVJz9d.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;
}
.sunnyDay
{
width: 100%;
min-height: 100px;
background: url(@bg-img) #E49B0F;
background-size: 75px 75px;
background-position: 10px 10px;
background-repeat: no-repeat;
box-sizing: border-box;
> .header
{
height: 75px;
border: 0px solid red;
margin-left: 95px;
line-height: 95px;
font-size: 24pt;
margin-right: 0; font-variant: small-caps;
color: @text;
font-family: 'Raleway';
}
> .body
{
font-size: 12pt;
padding: 2%;
color: @text;
width: 85%;
margin: 0 auto;
background: rgba(225, 225, 225, 0.8);
box-shadow: 0 0 5px 5px #E49B0F inset;
> a
{
color: @link-text;
}
}
> .credits
{
color: @text;
padding: 1%;
text-align: center;
> a
{
color: @text;
}
}
}
[/style]
Cannot post: Please log in to post