Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides >
BOOP!
Avatar is a sprite edit by me
if you have a link to the gif you wanted you could use the background-image property intead.
for example [ background-image: url("link to image here"); ]
QUOTE originally posted by B0r1sL0v3r
if you have a link to the gif you wanted you could use the background-image property intead.
for example [ background-image: url("link to image here"); ]
hello! so i'm using this template in my art shop, but someone's said that the text in hideboxes appears dark green when it should be set to white. thing is, i cant find a single thing wrong with the code that would make the text green.
what's even stranger is the fact that they also say the text in the top part with the zorua appears white after i edited it to try and fix the problem, but this text shouldnt be able to be altered since its part of an image.
could someone please have a look and let me know if i'm doing something wrong?
Here's my code
[img]https://i.imgur.com/HQyvHHW.png[/img][css=background:url('https://i.imgur.com/DYIDJbW.png'); background-repeat:repeat-y; background-size:100%; padding: 5px 20px 5px 20px; color:white;][style]//-------------------Tabs-------------------
.tabbed_interface > ul > li.tab-active{
color: white;
background: #8141C1;
box-shadow: none;
padding: 10px 5px;
border: #8A2BE2;
border-radius: 5px;
}
.tabbed_interface > ul > li{
color: white;
background: #331244;
box-shadow: none;
padding: 10px 5px;
border: #8A2BE2;
border-radius: 5px;
}
.tabbed_interface > div.tab-active{
background: #522172;
color: white;
box-shadow: none;
padding: 10px 5px;
border: none;
border-radius: 5px;
}
//-------------------Lines [hr]-------------------
hr { border: 2px dashed #8A2BE2 }
//-------------------Links-------------------
a:link { color: #8A2BE2; }
a:visited { color: #8B008B; }
a:hover { color: #9F00C5; }
a:active { color: #DD00FF; }
//-------------------Headings-------------------
h1 { color: #CB99C9; }
h2 { color: #CB99C9; }
h3 { color: #CB99C9; }
//-------------------Tooltips-------------------
span.bbcode_tooltip {
border-bottom: 1px dashed #BF3EFF;
}
.tooltip_content {
background-color: #BF3EFF;
color: #2E0854;
border-color: #68228B;
}
//-------------------Tables-------------------
table {
margin: 0px auto;
border: 0px;
}
td {
border: 0.5px #331244 solid;
background-color: #8141C1;
color: black;
text-align: center;
}
th {
border: 0px;
background-color: #331244;
color: white;
text-align: center;
}
//-------------------Panels-------------------
.panel {
border: 2px solid #402060;
background-color: #402060;
box-shadow: none;
&>h3 {
border-bottom: 1.5px solid black;
color: #CB99C9;
background: url('https://i.imgur.com/KftGdhG.png');
border-radius: 2px;
padding: 3px;
a {
color: #CB99C9;
text-decoration: none;
}
a:hover {
color: #F1A7FE;
}
&>div {
color: white;
background-color: white;
border: 0.5px solid maroon;
border-radius: 2px;
padding: 3px;
}
}
}
//-------------------Progress Bars-------------------
.expbar {
color: white;
background-color: #331244;
border: 1px black solid;
&>div {
background-color: #8141C1;
border-right: 2.5px solid black;
}
}
[/style]
[/sc][/sc][/css][img]https://i.imgur.com/z1g0AFg.png[/img]
clai/mordecai/aether, fae/they || flight rising || credit
sprite and avatar by me.
✦ art shop ✦ trade shop ✦
Ah wait found the problem! Give me one sec. It was a problem with missing a } after the coding for the h3 portion of the hide box coding. As it was it was all lumped into the h3 section thus not pulling the coding properly from that string. Just had to add in the } and remove the extra one you had further down in that string of coding. And youd wanna remove the background-color portion from the div section or it makes your whole hide box white and unreadable with that white text
Though you're right the 'welcome' portion isn't editable with coding since it's part of your top image so there's really no way for it to show as white. Maybe see if this person can provide you with some screenshots of what they're seeing or try and clear their cache to see if that fixes their issue.
bloop fixed codes
[img]https://i.imgur.com/HQyvHHW.png[/img][css=background:url('https://i.imgur.com/DYIDJbW.png'); background-repeat:repeat-y; background-size:100%; padding: 5px 20px 5px 20px; color:white;][style]//-------------------Tabs-------------------
.tabbed_interface > ul > li.tab-active{
color: white;
background: #8141C1;
box-shadow: none;
padding: 10px 5px;
border: #8A2BE2;
border-radius: 5px;
}
.tabbed_interface > ul > li{
color: white;
background: #331244;
box-shadow: none;
padding: 10px 5px;
border: #8A2BE2;
border-radius: 5px;
}
.tabbed_interface > div.tab-active{
background: #522172;
color: white;
box-shadow: none;
padding: 10px 5px;
border: none;
border-radius: 5px;
}
//-------------------Lines [hr]-------------------
hr { border: 2px dashed #8A2BE2 }
//-------------------Links-------------------
a:link { color: #8A2BE2; }
a:visited { color: #8B008B; }
a:hover { color: #9F00C5; }
a:active { color: #DD00FF; }
//-------------------Headings-------------------
h1 { color: #CB99C9; }
h2 { color: #CB99C9; }
h3 { color: #CB99C9; }
//-------------------Tooltips-------------------
span.bbcode_tooltip {
border-bottom: 1px dashed #BF3EFF;
}
.tooltip_content {
background-color: #BF3EFF;
color: #2E0854;
border-color: #68228B;
}
//-------------------Tables-------------------
table {
margin: 0px auto;
border: 0px;
}
td {
border: 0.5px #331244 solid;
background-color: #8141C1;
color: black;
text-align: center;
}
th {
border: 0px;
background-color: #331244;
color: white;
text-align: center;
}
//-------------------Panels-------------------
.panel {
border: 2px solid #402060;
background-color: #402060;
box-shadow: none;
&>h3 {
border-bottom: 1.5px solid black;
color: #CB99C9;
background: url('https://i.imgur.com/KftGdhG.png');
border-radius: 2px;
padding: 3px;}
a {
color: #CB99C9;
text-decoration: none;
}
a:hover {
color: #F1A7FE;
}
&>div {
color: white;
border: 0.5px solid maroon;
border-radius: 2px;
padding: 3px;
}
}
//-------------------Progress Bars-------------------
.expbar {
color: white;
background-color: #331244;
border: 1px black solid;
&>div {
background-color: #8141C1;
border-right: 2.5px solid black;
}
}
[/style]
[Hide=test]testing[/hide][/css][img]https://i.imgur.com/z1g0AFg.png[/img]
"There's not a cup of tea big enough or a book long enough to suit me." - C.S. Lewis
| Avatar credits | ©
signature by emberlynn; official 1D fragrance commercial gifs
ah, thank you so much!! :D
I'm not sure if I can ask this here since it's not related to any of the bbc you've posted, but it's related to styleclass so I assume(?) yes.
What bbc would I use to align/center tooltip (for my about me)?
(I can't find it anywhere and this seems like the most related thread for this question.)
Also, just a suggestion but can you edit the third main post (in the tooltips part) to add this bbc in for anybody else who wants to know the code?
{ Translation: Hello! }
Hi everyone ~
I'm having problems with the code for tabs. My vertical tabs always work out, but the horizontal tabs just don't want to work with me ;_;
I copied the code directly over from one of my other Post Background, so the code looks quite messy at the moment. I still need to edit the rest of the code, just wanted to sort the tabs out first.
I'm trying to get the tabs to line up with the side of my Post Backgrounds, and then for the text to run straight down (if that makes sense). At the moment the text runs straight down and then continues right under the tabs. x_x
Thank you in advance for any help x_x
Code
[img]https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Top.png[/img][css=background:url('https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Background.png'); background-repeat:repeat-y; background-size:100%; padding: 0% 15% 0% -20%; color: black;][center][font=century gothic][size=12]
[style] a:link { color: #7d4f9d; }
a:visited { color: #41195d; }
a:hover { color: #3fb9c3; letter-spacing: 5px; transition: all 1s; }
a:active { color: black; } [/style]
[style].tippy {
span.bbcode_tooltip {
border-bottom: 0.5px dotted black;
}
.tooltip_content {
background-color: #d1a4f1;
color: #41195d;
border-color: #41195d;
}
}[/style]
[style].tabley {
table {
margin: 0px auto;
border: 0px;
}
td {
border: 1.5px #143a3e solid;
background-color: #d1a4f1;
color: #41195d;
text-align: center;
}
th {
border: 0.5px black solid;
background-color: #7d4f9d;
color: #41195d;
text-align: center;
}
}[/style]
[style]
.panelly {
color: #7d4f9d!important;
background: hidden!important;
text-align: center !important;
.panel {
border: 0.25px solid black!important;
background-color: hidden !important;
text-align: center;
&>h3 {
border-bottom: 1.5px solid black !important;
color: #41195d!important;
background-color: #7d4f9d!important;
border-radius: 2px !important;
padding: 3px;
text-align: center;
a {
color: #41195d!important;
text-decoration: none !important;
}
a:hover {
color: #d1a4f1!important;
}
}
&>div {
color: #41195d!important;
background-color: #d1a4f1!important;
border: 0.5px solid #41195d !important;
border-radius: 2px !important;
padding: 3px;
text-align: center;
}
}
}
[/style]
[style]ul { background: none; box-shadow: none; }
li.tab-active { box-shadow: none; background: #97f0f8 ; color: #000; border-left: 0 solid #000; border-right: 0; border-top: 0; border-bottom: 0 dashed #000; border-radius: 0; padding: 1%; margin: 1% auto; flex: none; animation: none; text-align: center; vertical-align: center; }
li {background: #d1a4f1;}
li.tab-active { transition: all 500ms; font-weight: bold; background: #5c6c6d; animation: none; }
.tab, .tab-active { color: #000; background: none; border: 0px; border-bottom: 0 solid #000; margin: 1% 5% 1% 1%; padding: 2%; animation: fade 500ms; box-shadow: none;
li { padding: 2px; margin: 10%; display: inline-block; }li:active { background: #5c6c6d ; }}[/style]
[styleclass=tippy][styleclass=tabley][styleclass=panelly][color=#41195d][sc=tabbed_interface vertical]
[ul]
[li]Title 1[/li]
[li]Title 2[/li]
[li]Title 3[/li]
[/ul][
][sc=tab-active]contents 1[/sc][
][sc=tab]contents 2[/sc][
][sc=tab]contents 3[/sc]
Post Template made by Nephable ~[/sc][/color]
[/styleclass][/styleclass][/styleclass][/size][/font][/center][/css][img]https://pokefarm.com/upload/Nephable/The_Wayfaring_Merchant/Post_Background/Bottom.png[/img]
Avatar Credit 
Ice retype of Spoink and Grumpig, made by me
*foraging* So I've been shy about modding my profile segment despite being ... extremely adept in making CSS do jumping jacks, such as single page profiles using radio tabs to make false-pages within divs, but my question may sound really stupid based on this -- but I'm not used to doing it through bbc as much as html/direct css, so I take it that it's basically
[ css=my inevitable giant blob of css ]? Interestink. I may make something shiny tomorrow.
Hi! I don't really know anything about coding, but I'm really excited to learn! (You can look at my current about to see my current progress! ^-^)
I clicked on the link to the W3Schools website, and have been trying my best, but I'm not entirely sure how to convert it to pokefarm code.
Any help is really appreciated! I'm trying to make a horizontal tab bar that explains a bunch of stuff!
Here's what I have so far. (It's still a wip)
Code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: rgb(99,90,82);
color: rgb(49,197,165);
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: rgb(66,58,49);
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: rgb(255,255,247);
display: none;
padding: 100px 20px;
height: 100%;
text-align: center;
}
h3 {
color: rgb(49,197,165)
}
p.bor {
color: rgb(255,255,247);
border-top-style: double;
border-right-style: double;
border-bottom-style: double;
border-left-style: double;
}
#Info {background-color: rgb(132,115,107);}
#About {background-color: rgb(132,115,107);}
#Goal {background-color: rgb(132,115,107);}
#Contact {background-color: rgb(132,115,107);}
</style>
</head>
<body>
<button class="tablink" onclick="openPage('Info', this, 'rgb(66,58,49')">Basic Info!</button>
<button class="tablink" onclick="openPage('About', this, 'rgb(66,58,49')" id="defaultOpen">About Me!</button>
<button class="tablink" onclick="openPage('Goal', this, 'rgb(66,58,49')">Current Goal!</button>
<button class="tablink" onclick="openPage('Contact', this, 'rgb(66,58,49')">Contact!</button>
<div id="Info" class="tabcontent">
<h3>Home</h3><p class=bor>
Home is where the heart is..</p>
</div>
<div id="About" class="tabcontent">
<h3>Hi! I'm Katt!</h3>
<p class=bor><br>My name is Katt, and I do art! My main hobbies are art, YouTube, and Games! I'm always looking to make new friends, so feel free to PM me!<br>
~</p>
</div>
<div id="Goal" class="tabcontent">
<h3>Current Goal!</h3>
<p class=bor><br>My current goals in PFQ are Getting all 18 gemwish badges to the Wishalloy tier, and getting Arceus rank!<br>
~<be></p>
<h3>Upcoming goal!</h3>
<p class="bor"><br>My next goal will be to begin hunting Albino/Shiny/Melans in order for a livingdex!<br>
~<br></p>
</div>
<div id="Contact" class="tabcontent">
<h3>Contact Me!</h3>
<p class=bor><br>You can contact me on here through PM's!
IG: https://www.instagram.com/katt_does_art/<br>
Discord: Katt Does Art#8492<br>
~<br></p>
<p class="big">
<h3>Friends!</h3></p><p class=bor><br>
b00<br>
Mewtoo<br>
BionicDrako<br>
Bønzãî420<br>
~</p>
</div>
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent{i}.style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks{i}.style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>
Hoard Count: 46/630 Pfp is a very VERY compressed version of an OC request I drew!
Cannot post: Please log in to post