Single post in Styleclass and You: An Introduction
Forum Index > PokéFarm > Guides > Styleclass and You: An Introduction >
Hi again! Back with some legibility issues, and I've been trying to figure out work-arounds or fixes for the past day or two. I'm sure somethings flying over my head in the wiki, guides, or the w3schools website, but unfortunately I still haven't quite caught it yet. ;v;
I'll admit, I used my first template as a base for my newest one, so apologies if its a bit hard to read or its overly messy. I just wanted some simple templates for my different ventures on site.
Template 1 issues
For my Bisharp template, I can't seem to change the link colors. It looks fine on my end thanks to my site skin, but when checking it on incognito the links are blending into the background too much to be readable. I've tweaked it repeatedly with many different (and should be legible) colors, but it doesn't seem to change anything on incognito, even after repeatedly clearing cache and opening each link.
Here's the code for Bisharp, and here's a random post from my journal using the template with links as an example.
bisharp code
[style] .bisharp
//this template is for my personal use only, unless used with explicit permission from me. (MerpleSerple)
a:link { color: white; }
a:visited { color: #b483c9; }
a:hover { color: #82f7ff; }
a:active { color: #3673ff; }
.panel {
>h3 {
color: white;
}
}
span.bbcode_tooltip { border-bottom: 1px dashed white; }
.tooltip_content { background-color: #02091F;
color: white;
border-color: #4D5E90;}
table {
margin: 0px auto;
border: 0px;
}
td {
border: 1px #4D5E90 solid;
background-color: #8798c7;
color: Black;
text-align: center;
}
th {
border: 1px #4D5E90 solid;
background-color: #02091F;
color: white;
text-align: center;
}
.panel { border: 0.5px #37001F;
background-color: #02091F;
color: #02091F;
&>h3 {border-bottom: 1.5px #37001F;
background-color: #02091F;
border-radius: 2px;
padding: 3px;
a {
color: white;
text-decoration: none;
}
a:hover {
color: #7785AD;
}
}
&>div { color: white;
background-color: #8798c7;
border: 0.5px #580032;
border-radius: 2px;
padding: 3px;}
}
.expbar {
color: white;
background-color: #4D5E90;
border: 1px black dotted;
&>div {
background-color: #061238;
border-right: 2.5px solid black;
}
}
.tabbed_interface > ul > li.tab-active{
color: white;
background: #1d3585;
text-align: center;
border-radius: 2px;
border: 1px solid black;
box-shadow: none;
}
.tabbed_interface > ul > li{
color: #adbeed;
background-color: #02091F;
background: #02091F;
text-align: center;
padding: 4px 4px 4px 4px;
border: 1px solid black;
border-radius: 1px;
box-shadow: none;
}
.tabbed_interface > div.tab-active{
background: #8798c7;
color: black ;
border-radius: 2px;
border: 1px solid #31044A;
box-shadow: none;
text-align: center;
margin: 2px;
}
[/style][
][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/bisharp_template_top.png[/img][css=background:url('https://pokefarm.com/upload/merpleserple/Template_Stuff/bisharp_template_middle.png'); background-repeat:repeat-y; background-size:100%; padding: 0px 10px 0px 10px; color:white;][
]TEXT HERE[
][/css][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/bisharp_template_bottom.png[/img]
Template 2 issues
Finally, I made my Delphox template intending to mostly have text in the tabs and hide boxes, but I notice that text outside these boxes is really hard to read, at least to me. Is there any sort of CSS to have different text colors for basic text and "hidden" text like in boxes and such? And if not, should I just scrap it, instead of risking breaking legibility rules?
I've already posted the template in the thread before, but this journal post is a good recent example of the colors, after recent tinkering.
Delphox code
[style] .delphox
//This template is for my personal use only, unless used with explicit permission from me. (MerpleSerple)
a:link {color: white;}
a:visited {color: #ff54fa;}
a:hover {color: #0006b5;}
a:active {color: #8000ff;}
span.bbcode_tooltip { border-bottom: 0.5px #37001F; }
.tooltip_content { background-color: #AA427D;
color: #37001F;
border-color: #1E012E;}
table {
margin: 0px auto;
border: 0px;
}
td {
border: 1px #912361 solid;
background-color: #AA427D;
color: #f1afd4;
text-align: center;
}
th {
border: 0px;
background-color: #37001F;
color: #AA427D;
text-align: center;
}
.panel { border: 0px #37001F;
background-color: #AA427D;
color: #f1afd4;
&>h3 {border-bottom: 1.5px #37001F;
background-color: #770E49;
border-radius: 2px;
padding: 3px;
a {
color: #f1afd4;
text-decoration: none;
}
a:hover {
color: white;
}
}
&>div { color: #37001F;
background-color: #f1afd4;
border: 0.5px #580032;
border-radius: 2px;
padding: 3px;}
}
.expbar {
color: white;
background-color: #b18bc5;
border: 1px black solid;
&>div {
background-color: #713B8E;
border-right: 2.5px solid black;
}
}
.tabbed_interface > ul > li.tab-active{
color: #f1afd4;
background: #770E49;
text-align: center;
border-radius: 2px;
border: 1px solid #580032;
box-shadow: none;
}
.tabbed_interface > ul > li{
color: #9c69b8;
background-color: #1E012E;
background: #31044A;
text-align: center;
padding: 4px 4px 4px 4px;
border: 1px solid #2E2E45;
border-radius: 1px;
box-shadow: none;
}
.tabbed_interface > div.tab-active{
background: #9c69b8;
color: #1E012E;
border-radius: 2px;
border: 1px solid #31044A;
box-shadow: none;
text-align: center;
margin: 2px;
}
[/style][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/delphox_top_piece.png[/img][css=background:url('https://pokefarm.com/upload/merpleserple/Template_Stuff/deplox_middle_piece.png'); background-repeat:repeat-y; background-size:100%; padding: 0px 10px 0px 10px; color:#1E012E; margin-bottom:-4px; position:relative;][
]TEXT HERE[
][/css][img]https://pokefarm.com/upload/merpleserple/Template_Stuff/delphox_bottom_piece.png[/img]
- My Current Hunt
- Type Race+Plans!
2/226 hatched!
S: -k credits/- gp/- zc
A: -k credits/- gp/- zc
0 points this month!
Planned hunts: 
