Loading...

Top
PFQ Banner

This is PokéFarm Q, a free online Pokémon collectables game.

Already a user? New to PFQ?

eggsy's free templates thread

Forum Index > Other > Other Art >

Pages: 123··· 678

eggsy's Avatareggsy
eggsy's Avatar

eggsy's templates

feel free to edit these templates as much as you like but please dont change the code credit!

if you spot an error with my codes, feel free to post here. i find it difficult to check my templates on mobile, but i always try to fix a problem with them if there is on!

  • about codes
  • journal codes
  • signature codes
none yet sorry!
none yet sorry!
templates avatar image is my own xenoblade chronicles 2 screenshot
eggsy's Avatareggsy
eggsy's Avatar
username
pronouns:
---/---
sign:
---------
mbti:
----
  • main
  • hunt
  • links
  • more
  • credit
text here!
progress bar
0s/0a/0m/0h
more content here i guess!
code credit: image credit: official pkmn art

code

[sc=container][sc=icon][/sc][sc=username]username[/sc] [sc=biobox]pronouns:[/sc] ---/--- [sc=biobox]sign:[/sc] --------- [sc=biobox]mbti:[/sc] ---- [sc=tabbox][sc=tabbed_interface][ul] [li]main[/li] [li]hunt[/li] [li]links[/li] [li]more[/li] [li]credit[/li][/ul][ ][sc=tab-active]text here![/sc][ ][sc=tab][progress=50/100]progress bar[/progress]0s/0a/0m/0h[/sc][ ][sc=tab][url=https://pokefarm.com]link1[/url] [url=https://pokefarm.com]link2[/url] [url=https://pokefarm.com]link3[/url][/sc][ ][sc=tab]more content here i guess![/sc][ ][sc=tab]code credit: [url=https://pokefarm.com/user/eggsy]★[/url] image credit: official pkmn art[/sc][ ][/sc][/sc][/sc] [style] // you only need to change these! @main-bg: #39393a; @main-text: #e6e6e6; @username: #ff8552; @highlight: #202020; @border: pink; @tabs-bg: #e6e6e6; @tabs-text: #39393a; @tabbox-bg: #202020; @tabbox-text: #e6e6e6; @hover-bg: #202020; @hover-text: pink; @expbar-bg: #36363a; @expbar-text: white; @expbar-progress: #202020; @link: pink; @link-hover: #ff8552; // make sure this stays in quotation marks! @icon-image: "https://pokefarm.com/upload/eggsy/222Corsola_OS_anime.png"; .container { background-color: @main-bg; color: @main-text; font-family: verdana; font-size: 13px; padding: 10px 8px; margin: 2px; letter-spacing: 1px; line-height: 20px; width: 290px; } .username { color: @username; font-size: 23px; text-decoration: lowercase; border-left: 5px solid @border; padding-left: 5px; background-color: @highlight; } .biobox { display: inline; border-left: 3px solid @border; padding-left: 3px; background-color: @highlight; } .icon { background-image: url(@icon-image); border: 2px solid @border; width: 100px; height: 100px; border-radius: 50px; float: right; background-color: #f8f8f8; background-size: 100px 100px; margin-right: 12px; } .tabbox { padding-top: 5px; height: auto; } .tabbed_interface { width: 95%; margin: 0; padding: 0px; > ul { background: none; width: 55px; border: none; float:left; border-right: 2px solid @border; > li { padding-left: 5px; border: none; border-radius: 0; position: relative; height: 4%; background: @tabs-bg; color: @tabs-text; text-transform: lowercase; &.tab-active { color: @hover-text; background-color: @hover-bg; } } li:hover { color: @hover-text; background-color: @hover-bg; -webkit-transition: all 0.2s ease-in-out; } } > div { border: none; border-radius: 0px; background: @tabbox-bg; color: @tabbox-text; animation: fade 1s; min-height: 88px; text-align: center; position: relative; padding: 4px 15px; width: 201px; box-shadow: 0 0 0 transparent; padding-bottom: 8px; margin-left: 59px; } } .expbar { padding: 6px; width: 70%; background: @expbar-bg; color: @expbar-text; border: 2px solid @border; > div { background: @expbar-progress; border-right: 1px solid @border; } } a { color: @link; text-decoration: none; } a:hover { color: @link-hover; } .panel { box-shadow: 0 0 0 transparent; border-radius: 5px; border: 2px solid @border; overflow: hidden; > h3 { border-radius: 0; background-color: @main-bg; color: @main-text; border: none; > a { color: @main-text; } a:hover { color: @link-hover; } } > div { background-color: @tabs-bg; color: @tabs-text; } } [/style]
eggsy's Avatareggsy
eggsy's Avatar
icon: xenoblade chronicles 2 header: archivenamjin
username
this is your bio! it can be as long as you want!!
location
  • tab 1
  • tab 2
  • tab 3

element previews

italics and bold hover: like this
hi!
link: like this
this is a table
cell 1cell 2cell 3
all panels look like this:

heading

content here!
progress bars:
progress
make sure to change the icon and header credit at the top of the page when you change them! the header is 300px by 100px so you might want to crop the image before uploading it since otherwise it'll just crop off any extra at the bottom! the icon should be okay though because its square
content 2
content 3
code by eggsy

code

[sc=body][sc=header] [/sc][sc=credit]icon: xenoblade chronicles 2 header: [url="https://archivenamjin.tumblr.com/post/168123723835/like-or-reblog-if-save"]archivenamjin[/url][/sc][ ][sc=icon][/sc][ ][sc=username]username[/sc][ ][sc=bio]this is your bio! it can be as long as you want!![/sc][ ][sc=location][img]https://pokefarm.com/upload/eggsy/Screen_Shot_2018-01-02_at_19.22.02.png[/img] location[/sc][ ][sc=tabbox][sc=tabbed_interface horizontal][ ][ul][li]tab 1[/li][ ][li]tab 2[/li][ ][li]tab 3[/li][/ul][ ][sc=tab-active][ ][hide=element previews][ ][i]italics[/i] and [b]bold[/b] hover: [pit="like this"]hi![/pit] link: [url="https://pokefarm.com"]like this[/url] [table][tr][th=3x1]this is a table[/th][/tr][tr][td]cell 1[/td][td]cell 2[/td][td]cell 3[/td][/tr][/table] all panels look like this: [display=heading]content here![/display] progress bars: [progress=1/2]progress[/progress] [/hide] make sure to change the icon and header credit at the top of the page when you change them![/sc][ ][sc=tab]content 2[/sc][ ][sc=tab]content 3[/sc][img]https://pokefarm.com/upload/eggsy/Screen_Shot_2018-01-02_at_21.45.07.png[/img][/sc][/sc][ ][sc=credit bottom]code by [url="https://pokefarm.com/user/eggsy"]eggsy[/url][/sc][/sc] [style] @icon: "https://pokefarm.com/upload/eggsy/pyra.jpg"; @header: "https://pokefarm.com/upload/eggsy/jin_header.jpg"; .body { width: 300px; background-color: white; font-family: "Helvetica Neue"; color: black; padding-bottom: 15px; } .header { background-image: url(@header); background-repeat: no-repeat; background-size: 100%; height: 100px; } .icon { width: 75px; height: 75px; border: 3px solid white; border-radius: 50px; margin-top: -40px; margin-left: 10px; background-image: url(@icon); background-size: 100%; } .username { margin-left: 10px; font-weight: 700; font-size: 21px; line-height: 26px; } .bio { margin-left: 10px; line-height: 18px; font-size: 15px; height: auto; text-align: left; padding-right: 10px; padding-top: 3px; padding-bottom: 5px; } .location { > img { display: inline; width: 25px; height: 25px; margin-left: 8px; } color: #657786; line-height: 21px; padding-top: 2px; padding-bottom: 6px; font-size: 15px; text-align: left; } .tabbox { width: 100%; height: auto; margin: 0 auto; border: none; border-radius: 0; } .tabbed_interface { border: none; border-radius: 0; border-bottom: 1px solid #E7ECF0; > img { width: 65%; margin-left: 5px; } > ul { border-top: 7px solid #E7ECF0; border-bottom: 2px solid #E7ECF0; >li { border: none; background-color: white; text-align: center; line-height: 16px; padding-top: 5px; padding-bottom: 5px; font-size: 16px; text-transform: capitalize; color: #657786; font-weight: bold; &.tab-active { color: #1b95e0; border-bottom: 2px solid #1b95e0; } } li:hover { background-color: #F6F8FA; color: #1b95e0; } } > div { animation: fade 0.5s; background-color: white; padding-left: 10px; padding-right: 10px; border: none; box-shadow: 0 0 0 transparent; line-height: 18px; letter-spacing: 0.5px; padding-top: 10px; padding-bottom: 10px; font-size: 15px; color: black; } } .credit { font-size: 10px; display: inline; float: right; text-align: right; padding-right: 10px; margin-top: -4px; &.bottom { margin-top: 3px; } } a { color: #1b95e0; text-decoration: none; } a:hover { color: #1b95e0; text-decoration: underline; } th { background-color: #F6F8FA; } td { background-color: white; } table { border: 1px solid #E7ECF0; padding: 0; border-collapse: separate; border-radius: 7px; border-spacing: 0; overflow: hidden; width: 90%; } td, th { text-align: center; border: none; line-height: 21px; } tfoot td { border-bottom:none; } td:first-child { border-left:none; } td:last-child { border-right:none; } th:first-child { border-radius:7px 0 0 0; border-left:none; } th:last-child { border-radius:0 7px 0 0; border-right:none; } tfoot td:first-child { border-radius:0 0 0 7px; } tfoot td:last-child { border-radius:0 0 7px 0; } span.bbcode_tooltip { color: black; border-bottom: 1px dotted #1b95e0; } .tooltip_content { color: black; background-color: white; border: 1px dashed #1b95e0; } .panel { box-shadow: 0 0 0 transparent; width: 90%; margin: 0 auto; border-radius: 5px; border: 1px solid #E7ECF0; border-collapse: collapse; overflow: hidden; > h3 { background-color: white; border-bottom: 2px solid #E7ECF0; border-top: 7px solid #E7ECF0; border-radius: 0; color: #657786; a { color: #657786; } a:hover { background-color: #F6F8FA; color: #1b95e0; text-decoration: none; } } > div { padding-left: 10px; padding-right: 10px; background-color: white; color: black; border-bottom: 1px solid #F6F8FA; } } .expbar { background-color: white; color: black; border: 1px solid #657786; > div { background-color: #E7ECF0; border-right: 1px solid #657786; } } [/style]
eggsy's Avatareggsy
eggsy's Avatar

  • 1
  • 2
  • 3
italics and bold link: like this hover: like this
hi!
progress
they only go as big as your image, but you can change the min-height in the style code to make it as big as you want!!
content 2
content 3
bg: official pkmn art | code by eggsy

code

[sc=body][sc=tabbox][hide= ][sc=tabbed_interface horizontal][ ][ul][li]1[/li][ ][li]2[/li][ ][li]3[/li][/ul][ ][sc=tab-active]content 1[/sc][ ][sc=tab]content 2[/sc][ ][sc=tab]content 3[/sc] [/sc][/hide][/sc] [sc=bg][/sc][sc=credit]bg: official pkmn art | code by [url="https://pokefarm.com/user/eggsy"]eggsy[/url][/sc][/sc] [style] * { box-sizing: border-box; } .body { width: 300px; background-color: white; min-height: 200px; } .tabbed_interface { > ul { background: transparent; display: grid; grid-template-columns: 33% 33% 33%; padding-left: 43px; padding-top: 5px; padding-bottom: 5px; > li { display: flex; flex: auto; align-items: center; justify-content: space-around; height: 50px; width: 50px; border-radius: 50%; background-color: black; border: 5px solid white; color: white; &.tab-active { color: black; background-color: #FFDE00; border: 4px solid black; } } > li:hover { color: black; background-color: #FFDE00; } } > div { background: rgba(255, 255, 255, 0.9); margin-left: 6px; text-align: center; box-shadow: 0 0 0 transparent; border: none; color: black; padding-left: 5px; padding-right: 5px; max-height: 230px; padding-top: 0.5em; padding-bottom: 0.5em; } } .tabbox .panel { position: absolute; margin-left: 125px; > h3 { width: 50px; height: 50px; border: 5px solid white; background-color: black; color: white; border-radius: 50%; position: static; > a { color: black; } } > div { margin-left: -43%; width: 290px; } border: none; background: none; box-shadow: 0 0 0 transparent; } .bg { background-image: url('https://assets.pokemon.com/static2/_ui/img/chrome/external_link_bumper.png'); background-size: 100% auto; min-height: 300px; background-repeat: no-repeat; } .tooltip_content { color: black; background-color: white; border: 1px solid #F1252C; margin-left: 44%; } span.bbcode_tooltip { border-bottom: 1px dashed #F1252C; } a { color: #F1252C; text-decoration: none; } a:hover { letter-spacing: 1px; transition: all 0.5s ease; } .expbar { width: 90%; background-color: white; color: black; border: 2px solid black; > div { background-color: #FFDE00; border-right: 1px solid black; } } .credit { font-size: 9px; display: inline; float: right; text-align: right; padding-right: 10px; background-color: white; width: 100%; color: black; padding-top: 2px; padding-bottom: 2px; } [/style]
edit: removed scroll
frayed's Avatarfrayed
frayed's Avatar
Not sure if I was allowed to reply (if not report this and get it deleted) but I would just love to be the first to say that these templates are AMAZING and going to definitely use one in the later future~
thank u kanye very cool
my activity on the site is on and off. find me on reddit browsing r/whitepeopletwitter or doing something dumb on instagram, probably danganronpa or blend-s related but go off ig kay faraday best girl i love peko pekoyama she's a gorgeous baby angel bye bro i am just vibing
eggsy's Avatareggsy
eggsy's Avatar
@frayed (idk if i can tag/reply to people oops) aaaaaaaAAAAAA thank you so much!!! im really glad people like them :D replying is totally cool i really want to hear what ppl think of these cos its my first try at bbcode
frayed's Avatarfrayed
frayed's Avatar
@eggsy unfortunately you can't ping on Pokefarm (would open up a lot of my thread subscriptions lol) but I love all of them! Excited for when you make some more~ I decided to use the twitter themed one. Thanks!
eggsy's Avatareggsy
eggsy's Avatar
gif credit: wakata.tumblr.com
imgs: official pokemon art code: eggsy
text goes here this is what it looks like when you write more than one line

code

[sc=body][sc=box][sc=header][sc=h_credit]gif credit: wakata.tumblr.com[/sc][/sc][sc=textbox][sc=icon][sc=credit]imgs: official pokemon art code: [url="https://pokefarm.com/user/eggsy"]eggsy[/url][/sc][/sc][sc=text]text goes here [/sc][/sc][/sc][sc=overlay][sc=image][/sc][/sc][/sc] [style] .textbox { position: absolute; width: 250px; border: 1px solid black; border-radius: 5px; padding: 5px; margin-left: 5px; font-size: 14px; color: black; letter-spacing: .6px; text-align: center; overflow: hidden; height: 80px; > .text { text-align: center; width: 150px; display: inline-block; } > .icon { float: left; width: 80px; height: 80px; border: 1px solid black; border-radius: 3px; background-image: url("https://vignette.wikia.nocookie.net/pokemon/images/4/42/700Sylveon_Dream_2.png/revision/latest?cb=20140809221536"); background-size: 150%; background-repeat: no-repeat; background-position: 45%; position: -webkit-sticky; position: sticky; top: 0; > .credit { display: none; > a { color: #BB828D; text-decoration: none; } > a:hover { letter-spacing: 1.5px; transition: all 0.5s ease; } } &:hover .credit { display: block; background: rgba(255, 255, 255, 0.9); text-align: center; padding-top: 5px; padding: 3px; font-size: 9px; } } } .box { position: absolute; padding: 10px; padding-left: 15px; } .header { width: 275px; background-image: url("https://78.media.tumblr.com/647f81092f661e729cd259e43617b62e/tumblr_ojwg7dWKwf1qkz08qo1_540.gif"); background-size: 100%; background-repeat: no-repeat; position: relative; height: 165px; &:hover .h_credit { display: block; background-color: #F8F9FB; width: 38%; color: black; margin-left: 5px; margin-top: 5px; border: 1px solid black; border-radius: 5px; padding: 3px; padding-bottom: 1px; font-size: 11px; position: absolute; } } .body { width: 300px; height: 280px; background-color: white; overflow: hidden; position: relative; } .overlay { transition: all 1.3s ease; width: 100%; height: 100%; position: relative; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238,193,197,1)), color-stop(100%, rgba(193,220,236,1))); > .image { width: 100%; height: 100%; background-image: url("https://cdn.bulbagarden.net/upload/e/e8/700Sylveon.png"); background-position: 70%; z-index: 10; display: inline; position: absolute; top: 0; left: 0; background-size: 80%; background-repeat: no-repeat; } } .body:hover .overlay { transform: translate(-295px, 0px); } .h_credit { display: none; } [/style]
this one's just super basic. i wanted to try out different animations other than fades so i made the hover/slide thing and i really like sylveon's colours so the gradient effect at least looks nice (i couldnt find a way to do a gradient in bbcode so i made 10 boxes and coloured them all to make the gradient)(i found a way to do gradients in bbcode so i updated this!!). i hope someone likes it though!! if you ever need any help with one of my codes or want me to style something a little differently just post here or send me a PM and i'll respond as soon as i can! :D edit: removed scroll. text will now appear out of the box if you write more than firs in the space, but i dont have a fix right now so i'll update later.
eggsy's Avatareggsy
eggsy's Avatar
username
title
subtitle
  • tab 1
  • tab 2
  • tab 3

element previews

italics and bold hover: like this
hi!
link: like this
this is a table
cell 1cell 2cell 3
all panels look like this:

heading

content here!
progress bars:
progress
content 2
content 3
icon: official critical role art | code by eggsy

code

[sc=body][sc=username]username[/sc] [sc=icon][/sc][ ][sc=title]title[/sc][ ][sc=sub]subtitle[/sc][ ][sc=tabbox][sc=tabbed_interface horizontal][ ][ul][li]tab 1[/li][li]tab 2[/li][li]tab 3[/li][/ul][ ][sc=tab-active][ ][hide=element previews][ ][i]italics[/i] and [b]bold[/b] hover: [pit="like this"]hi![/pit] link: [url="https://pokefarm.com"]like this[/url] [table][tr][th=3x1]this is a table[/th][/tr][tr][td]cell 1[/td][td]cell 2[/td][td]cell 3[/td][/tr][/table] all panels look like this: [display=heading]content here![/display] progress bars: [progress=1/2]progress[/progress] [/hide][/sc][ ][sc=tab]content 2[/sc][ ][sc=tab]content 3[/sc][/sc][ ][sc=credit]icon: official critical role art | code by [url="https://pokefarm.com/user/eggsy"]eggsy[/url][/sc][/sc][/sc] [style] // here's the stuff you can customise! // if you change the bg-color to something dark you'll need to go through the code and change the text colors to white so it's visible! // don't forget to update the icon credit when you change it! @bg-color: #f8e9ee; @icon: "https://pokefarm.com/upload/eggsy/nott.jpg"; .body { width: 300px; background-color: @bg-color; overflow: scroll; font-family: 'Helvetica Neue', sans-serif; } .icon { width: 75px; height: 75px; border: 3px solid white; border-radius: 6px; background-color: white; background-image: url(@icon); background-size: 100%; background-repeat: no-repeat; position: relative; left: 110px; right: 110px; top: -5px; margin-bottom: 8px; } .username { font-family: 'Helvetica Neue', sans-serif; font-weight: 500; color: black; padding-left: 7px; padding-top: 4px; font-size: 15px; transition: all 0.5s ease; letter-spacing: 0.3px; &:hover { opacity: 0.3; } } .title { font-family: 'Roboto', sans-serif; font-weight: 700; letter-spacing: 1.3px; text-align: center; padding-left: 35px; padding-right: 35px; font-size: 20.5px; color: black; line-height: 25px; } .sub { color: rgba(0, 0, 0, 0.6); font-family: 'Helvetica Neue', sans-serif; text-align: center; padding: 15px; padding-top: 5px; font-size: 13.5px; padding-left: 40px; padding-right: 40px; letter-spacing: 0.5px; } .tabbox { width: 100%; height: auto; margin: 0 auto; border: none; border-radius: 0; } .tabbed_interface { border: none; border-radius: 0; > ul { > li { border: none; background-color: @bg-color; text-align: center; line-height: 15px; padding-top: 6px; padding-bottom: 8px; font-size: 12px; color: rgba(0,0,0,0.5); font-family: 'Helvetica Neue', sans-serif; text-transform: uppercase; letter-spacing: 0.7px; transition: color 0.5s ease-in-out 0.2s; border-bottom: solid 1px rgba(0,0,0,0.2); &.tab-active { border-bottom: solid 2px black; color: black; } } li:hover { color: black; } } > div { background-color: white; box-shadow: 0 0 0 transparent; border: none; font-family: 'Helvetica Neue', sans-serif; color: black; font-weight: 400; font-size: 15px; line-height: 21px; letter-spacing: 0.4px; padding: 7px 10px; } } .credit { font-size: 9.5px; display: inline; float: right; text-align: right; padding-right: 5px; padding-bottom: 2px; font-family: 'Helvetica Neue', sans-serif; letter-spacing: 0.4px; color: black; background-color: white; width: 100%; } a { color: black; opacity: 0.5; text-decoration: none; transition: all 0.5s ease; } a:hover { opacity: 1; font-style: italic; } th { background-color: @bg-color; } td { background-color: white; } table { margin: 0 auto; border: 1px solid rgba(0,0,0,0.5); padding: 0; border-collapse: separate; border-radius: 7px; border-spacing: 0; overflow: hidden; width: 90%; color: black; } td, th { text-align: center; border: none; line-height: 21px; } tfoot td { border-bottom:none; } td:first-child { border-left:none; } td:last-child { border-right:none; } th:first-child { border-radius:7px 0 0 0; border-left:none; } th:last-child { border-radius:0 7px 0 0; border-right:none; } tfoot td:first-child { border-radius:0 0 0 7px; } tfoot td:last-child { border-radius:0 0 7px 0; } span.bbcode_tooltip { color: black; border-bottom: 1px dotted black; } .tooltip_content { color: black; background-color: white; border: 1px dashed black; font-size: 14px; } .panel { box-shadow: 0 0 0 transparent; width: 90%; margin: 0 auto; border-radius: 0; border: none; border-collapse: collapse; overflow: hidden; margin-top: 3px; > h3 { background-color: white; border: solid 1px rgba(0,0,0,0.2); border-bottom: solid 2px rgba(0,0,0,0.2); border-radius: 0; color: black; padding-left: 6px; a:hover { font-style: normal; } } > div { padding: 5px 10px; background-color: white; color: black; border: solid 1px rgba(0,0,0,0.2); border-top: none; } } .expbar { background-color: white; color: black; border: solid 1px rgba(0,0,0,0.5); > div { background-color: @bg-color; border-right: solid 1px rgba(0,0,0,0.5); } } @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); [/style]
please if you use this one dont forget to change the icon and the credit for it! i've tried to make it as easy as possible to do but if you get stuck just post here or send me a PM and i'll try to explain it better! anyway, here's my tumblr themed about code! enjoy :D
fictiøn's Avatarfictiøn
fictiøn's Avatar
oh gosh your templates are a d o r a b l e ! im especially fond of that new one, so cute :o keep up your good work!!
avatar by bananalizard

Pages: 123··· 678

Cannot post: Please log in to post

© PokéFarm 2009-2020 (Full details)Contact | Rules | Privacy | WikiGet shortlink for this page