Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides >
Hello~
I was wondering if I could get some help. I'm in the process of making a template and would like to put a pic next to the first textbox, how would I do that?
Oh I can add my coding if needed but would really like how to make it work so I know for future reference. Thank-you for any & all help.
hey could someone help me as well please ?
im trying to put text over a background image but i either cant get it over the image and its on the space under it
or i get it on top of the image but i cant move it where i need it to and also it creates a second layer of my background image ?
heres my code any help would be appreciated ^^
code
[styleclass=background][img]https://pokefarm.com/upload/Agent8/signature4.png[/img][styleclass="text"]nya nyaa
nya. nya ny an ya,
nya[/styleclass]
[/styleclass]
[style]
.background {
background-image: url("https://pokefarm.com/upload/Agent8/signature4.png");
background-size: 100% auto; }
[/style]
[style]
.text a {
position: absolute;
top: 20px;
left: 16px;
}
[/style]
[styleclass="blocklink"][url=https://pfq.link/~LVXV]Store[/url][/styleclass]
[style]
.blocklink a {
display: block;
height: 27%;
width: 70%;
background: transparent;
color: transparent;
position: absolute;
top: 10%;
left: 15%;
border:0px solid white;}
[/style]
for rule purposes
art credit: offical splatoon 2: octo expansion art
what it looks like
nya nyaa
nya. nya ny an ya,
nya
@agent8
Try this?
nya nyaa
nya. nya ny an ya,
nya
code
[sc=background]
[sc="blocklink"][url=https://pfq.link/~LVXV]Store[/url][/sc][sc=text]nya nyaa
nya. nya ny an ya,
nya[/sc]
[/sc]
[style]
.background {
width:600px;
height:200px;
background-image: url("https://pokefarm.com/upload/Agent8/signature4.png");
background-size: 100% auto;
background-repeat: no-repeat;
}
.text {
color:#fff;
padding: 5px;
position:relative;
left:100px;
top:20px;
}
.blocklink a {
display: block;
height: 60px;
width: 350px;
background: transparent;
color: transparent;
position: relative;
top: 3px;
left: 100px;
}
[/style]
thank you so so much euradym !! ^^
I have been trying to make a template but horizontal tabbed interfaces are messing up, I can't seem to figure out why this occurs. Could anyone help me out? ^^
code
[style]
@header-background: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@header-txt-color: white;
@stroke-color: black;
@txt-box-bg: rgb(0,0,0,.80);
@txt-box-txt: #757575;
@tab-box-color: black;
@tab-txt-color: white;
@tab-active-color: #ca702c;
@credit-color: white;
@header-bg: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@header-txt-color: white;
@a-color: #ce2531;
@b-color: #59426c;
@h2-color: #363636;
@table-border: white;
@th-background: "https://i.ibb.co/2dPQ4BB/793-B8-CC1-AC58-478-B-B108-DD880-FD84-CF0.png";
@th-txt-color: white;
@th-border: black;
@td-background: #1C1C1C;
@td-border: #4D4D4D;
@td-txt-color: #999999;
@td-hover-background: #bf6723;
@td-hover-text: black;
@td-hover-border: #4b2a11;
@link-background: white;
@link-txt: black;
@link-hover-bg: transparent;
@link-hover-color: #ca702c;
@expbar-bg: #012B24;
@expbar-fill: linear-gradient(to right,#76B4AA,#0D4C41);
@tooltip-txt: white;
@tooltip-border: black;
@tooltip-bg: rgb(0,0,0,.80);
@tooltip-content-txt: white;
@display-header-bg: #458C80;
@display-header-txt: white;
@display-box-bg: white;
@display-box-txt: #858585;
@display-box-border: #59426c;
//------
@font-face{font-family:daisy;src:url('https://dl.dropboxusercontent.com/s/sj8j1947fw813sm/paperdaisy-demo.ttf?dl=0');}
.top {
display: inline-block;
width: 600px;
max-width: 100%;
img {
width: 100%;
}
}
.bottom {
display: inline-block;
width: 600px;
max-width: 100%;
img {
width: 100%;
}
}
.border {
border-radius: 55px;
border-color: black;
border-style: solid;
}
.bg{background-image:url(@background);
background-size:cover;
width:100%;
height:auto;}
.header{background-image:url(@header-background);
position:relative;
top:0px;
left:0px;
height:150px;
width:100%;
border-bottom:30px @tab-box-color solid;}
.headtxt{position:relative;
top:45px;
width:100%;
text-align:center;
font-family:daisy;
font-size:55px;
font-weight:bold;
color:@header-txt-color;
letter-spacing:1px;
text-transform:uppercase;}
.headtxt{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
div.tab,div.tab-active{position:relative;
margin-top:-2%;
margin-left:4.5%;
width:90%;
background-color:@txt-box-bg;
border:none;
box-shadow:none;
padding:5px;}
div.tab,div.tab-active{font-family:calibri;
font-size:14px;
color:@txt-box-txt;
letter-spacing:1px;
word-spacing:5px;
line-height:16px;}
.tabbed_interface {
border: 1px black dotted;}
ul{position:relative;
top:-32px;
left:0%;
height:33px;
width:100%;
background:transparent;
border:none;}
li{background:transparent;
border:none;
padding-top:10px;
text-align:center;}
li{font-family:consolas;
font-size:13px;
color:@tab-txt-color;
text-transform:uppercase;
font-weight:bold;
letter-spacing:1px;
transition:.6s ease-in-out;}
li.tab-active{color:@tab-active-color;
transition:.6s ease-in-out;}
.credit{position:relative;
float:right;
margin-bottom:5px;
margin-right:5px;}
.credit a{font-family:consolas;
font-size:10px;
color:@credit-color;
font-weight:bold;
text-decoration:none;}
.h1{display:block;
background-image:url(@header-bg);
padding-left:5px;
width:99%;
height:20px;
font-family:consolas;
font-size:14px;
color:@header-txt-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:2px;
word-spacing:5px;}
.h1{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
.a{display:inline;
font-family:verdana;
font-size:11px;
color:@a-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}
.b{display:inline;
font-family:verdana;
font-size:11px;
color:@b-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:-1px;}
.h2{border-bottom:2px @h2-color solid;}
table{width:100%;
border:1px @table-border dotted;}
th{background-image:url(@th-background);
background-attachment:top left;
height:30px;
padding:3px;
vertical-align:middle;
text-align:center;
font-family:consolas;
font-size:12px;
color:@th-txt-color;
font-weight:bold;
text-transform:uppercase;
letter-spacing:1px;
border:1px @th-border solid;}
th{webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
td{height:25px;
padding:3px;vertical-align:middle;
text-align:center;
background-color:@td-background;
font-family:calibri;
color:@td-txt-color;
border:1px @td-border dotted;
transition:.6s ease-in-out;}
td:hover{background-color:@td-hover-background;
color:@td-hover-text;
border:1px @td-hover-border solid;
transition:.6s ease-in-out;}
div.tab a,div.tab-active a{background-color:@link-background;
font-family:calibri;
font-size:12px;
color:@link-txt;
padding:3px;
margin:5px;
text-align:center;
text-decoration:none;
transition:.6s ease-in-out;}
div.tab a:hover,div.tab-active a:hover{background-color:@link-hover-bg;
color:@link-hover-color;
transition:.6s ease-in-out;}
.expbar{width:96%;
border-radius:10px;
background-color:@expbar-bg;
height:15px;
border:3px @expbar-bg solid;}
.expbar span{font-family:verdana;
font-size:10px;
color:white;
margin-top:-4px;
font-weight:bold;}
.expbar div{border-radius:10px;
background:@expbar-fill;}
.expbar img{display:block-inline;
width:15px;
height:15px;
margin-top:3px;}
span.bbcode_tooltip{font-family:calibri;
font-size:14px;
color:@tooltip-txt;
line-height:12px;
word-spacing:5px;
padding-bottom:2px;
border-bottom:1px @tooltip-border dashed;
margin:3px;}
.tooltip_content{background-color:@tooltip-bg;
font-family:consolas;
font-size:10px;
color:@tooltip-content-txt;
border-radius:0px;
border:none;
font-weight:bold;}
.panel{background-color:transparent;
box-shadow:none;
border:none;
border-radius:0px;}
.panel>h3,.panel>h3 a{background-image:url(@display-header-bg);
background-position:center right;
font-family:verdana;
font-size:13px;
color:@display-header-txt;
font-weight:bold;
letter-spacing:-1px;
text-align:left;
padding:3px;
margin:0px;
border-bottom:0px;
text-transform:uppercase;
webkit-text-stroke-width:1px @stroke-color;
text-shadow:1px 1px 0 @stroke-color,-1px -1px 0 @stroke-color,1px -1px 0 @stroke-color,-1px 2px 0 @stroke-color,1px 1px 0 @stroke-color;}
.panel>div{background-color:@display-box-bg;
font-family:consolas;
font-size:10px;
color:@display-box-txt;
border-left:1px @display-box-border dotted;
border-right:1px @display-box-border dotted;
border-bottom:1px @display-box-border dotted;}
[/style]
[sc=border][sc=top][img]https://i.ibb.co/wzHBzg1/3rksyD3b.png[/img][/sc][css=background:url('https://i.ibb.co/Fng5mbz/vhddj64y.png'); background-repeat:repeat-y; background-size:100%; padding: 0px 100px 0px 100px; color:black;]
TEXT HERE
[sc=credit][url=https://pokefarm.com/user/NightVisions101]CREDITS[/url][/sc]
[/css][sc=bottom][img]https://i.ibb.co/RSHR035/sZTdnJVb.png[/img][/sc][/sc]
Avatar drawn by me of Villain Deku, sprite made by Nightlore, Animated by AsteroidPizza39!! Hover
My Journal
Come and challenge me and my friend at The 5th Gym! My Sprite/Art shop
70% of the world thinks Warrior Cats is stupid. 25% say: "Who cares?". Repost if you are part of that 5% that would take a hard cover copy of Warrior Cats and slap the other people saying: "STARCLAN IS OUT FOR REVENGE!”
5th Heart badge
Click the sprite!
My Journal
Come and challenge me and my friend at The 5th Gym! My Sprite/Art shop
Can you specify what is messing up? Plugging in a basic horizontal tabbed interface gave me nothing obvious to look at.
Avatar by me for my personal use only.
Links
Helpful: PFQ Rules | Staff Roster | Help Forums | PFQ Wiki
Fan-made Tools: Calculator
Personal: Journal
Template © Eltafez
Sorry wrong wording x.x I meant a vertical tabbed interface. With the vertical one it aligns the 'Title' in the middle and you can't click on it to change it to the next tab.
Again sorry about the incorrect wording
Hey, is it possible to make a typewriter-esque animation w/ words in styleclass or with any kind of coding that would work on PFQ?
An example of what I mean is this:
How do I have the style just transition to a different color?
- Articuno UFT
- Featured Story
- Adoption Gachapon
- Journal
- Shop
All non-shiny Articuno are UFT I hatch!
Price:100k cr/100gp/30zc Each
Okay,I'm going on vacation.Protect the town,alright?
Okay then master.
5 mins later
BACON PARTYYY!!!
Featured Story
Well that depends on what you mean and what you’re wanting to transition.
Do you mean gradient (on a background), change colors upon hovering, doing it on its own randomly or something else?
Are you trying to do this to a link, hide boxes, back ground, table? Or just everything in general?
♪ SCA ♪ 🌸 Wiki Help 🌸
Specials ♥ PM Me ♥ My Shoppe~
Current Hunt: Mudkip
B> Lunar Wings for 45 ZC ea.
B> Lunar Wings for 45 ZC ea.Cannot post: Please log in to post