Single post in Guide to CSS: Beginner to Expert
Forum Index > PokéFarm > Guides > Guide to CSS: Beginner to Expert >
hello, i was coding a template but it have some problem: template here
1, the panels (hide/display/accordion thingy) is having a little box shadow or something:
I think it is my site skin cause the problem, as sometimes the site skin overlap my codes. (btw I'm using Neonyan's discord site skin)
edit: it was really the site skin causing that little black thing :00
2, tooltip background is not working for some reason? the tooltip was like this and it doesn't work:
3, the h3 in the panels, while in the [display] code, the text color works, but in the hide, it doesn't:
thank you for considering this, and here is the code: (plz, do not use!)
thank you very much (again)!!!
the thing in question
2, tooltip background is not working for some reason? the tooltip was like this and it doesn't work:
code
div.tooltip_content {
background: white;
color: @text;
border: solid 2px #99c5c4;
}
.bbcode_tooltip {
border-bottom: 1px dotted #99c5c4;
}
3, the h3 in the panels, while in the [display] code, the text color works, but in the hide, it doesn't:
image for sure
thank you for considering this, and here is the code: (plz, do not use!)
code (long)
[sc=bg][sc=box1][center]🐟 watershed 🐟[/center][/sc][sc=box2][center][/center][img]https://f2.toyhou.se/file/f2-toyhou-se/images/65454249_r4KfWwPFWbPNuHe.png[/img][/sc][sc=box1] woaa was playin' w/ float </3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[/sc][sc=box1][display=code?]display[/display]
[sc=tabbed_interface horizontal][ul]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[li]Tab[/li]
[/ul][
][sc=tab-active]content[/sc][
][sc=tab]to be continue
[b]bold[/b] [i]italic[/i] tooltip is not working for a reason
[hide=hide]hide[/hide]
[table]
[tr]
[th=6x1]Boxes[/th]
[/tr]
[tr]
[td][tip=Cute Box][item=Cute Box][/tip] x[inventory=Cute Box][/td]
[td][tip=Dainty Box][item=Dainty Box][/tip] x[inventory=Dainty Box][/td]
[td][tip=Deluxe Box][item=Deluxe Box][/tip] x[inventory=Deluxe Box][/td]
[td][tip=Glittery Box][item=Glittery Box][/tip] x[inventory=Glittery Box][/td]
[td][tip=Gorgeous Box][item=Gorgeous Box][/tip] x[inventory=Gorgeous Box][/td]
[td][tip=Hard Box][item=Hard Box][/tip] x[inventory=Hard Box][/td]
[/tr]
[tr]
[td][tip=Heavy Box][item=Heavy Box][/tip] x[inventory=Heavy Box][/td]
[td][tip=Light Box][item=Light Box][/tip] x[inventory=Light Box][/td]
[td][tip=Nifty Box][item=Nifty Box][/tip] x[inventory=Nifty Box][/td]
[td][tip=Pretty Box][item=Pretty Box][/tip] x[inventory=Pretty Box][/td]
[td][tip=Shiny Box][item=Shiny Box][/tip] x[inventory=Shiny Box][/td]
[td][tip=Sinister Box][item=Sinister Box][/tip] x[inventory=Sinister Box][/td]
[/tr]
[tr]
[td][tip=Box Box][item=Box Box][/tip] x[inventory=Box Box][/td]
[td][tip=Box Box Box][item=Box Box Box][/tip] x[inventory=Box Box Box][/td]
[td][tip=Gragon's Stash][item=Gragon's Stash][/tip] x[inventory=Gragon's Stash][/td]
[td=3x1][/td]
[/tr]
[tr]
[th]Total: [math][inventory=Cute Box]+[inventory=Dainty Box]+[inventory=Deluxe Box]+[inventory=Glittery Box]+[inventory=Gorgeous Box]+[inventory=Hard Box]+[inventory=Heavy Box]+[inventory=Light Box]+[inventory=Nifty Box]+[inventory=Pretty Box]+[inventory=Shiny Box]+[inventory=Sinister Box]+[inventory=Box Box]*21+[inventory=Box Box Box]*126+[inventory=Ledah's Bawkz]*630[/math]
[/th]
[td=5x1][/td]
[/tr]
[/table][/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][sc=tab]content[/sc][
][/sc][/sc][sc=credit]mine, pixel and oc mine[/sc][/sc]
[style]
//colors//
@accent1: #99c5c4;
@accent2: #63807f;
@text: black;
@accent3: white;
// bg //
.bg {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(189,189,226,1)), color-stop(100%, rgba(134,175,177,1)));;
padding: 4px;
font: 10px calibri light;
color: @text;
border-radius: 5px;}
.box1 {
background: rgba(255,255,255,0.8);
border-radius: 5px;
color: @text;
padding: 8px;
margin: 2px 2px 4px 2px;
font-size: 15px;
text-align: center;
}
.box2 {
background: rgba(134,175,177,0);
border-radius: 5px;
color: @text;
padding: 8px;
margin: 2px 2px 4px 2px;
font-size: 15px;
text-align: center;
width:20%;
float: right;
}
.credit { color:white;}
a {color: @accent1;}
a:hover {letter-spacing: 2px; transition: all 1s; }
a:not(:hover){letter-spacing: 0px; transition: all 1s; }
.tooltip_content {
border: 0.5px solid @text;
background: @bkg;
min-width:1%;
width: fit-content;
color: @text;
font-size: 10pt;
padding: 5px; }
.panel {
background-color: @accent3;
border: 2px solid @accent1;
border-radius:5px;
box-shadow: none;
width: 75%;
margin: 0 auto;
color: @text;
>h3 {
background: @accent3;
border-bottom: 2px solid @accent1;
font-size:10pt;
color: @accent2;
font-weight:bold;
text-align: center;
padding:5px;}
>div {
color: @text;
padding: 10px;
}
}
.expbar {
padding: 5px;
background: @accent3;
color: @text;
border-radius: 5px;
width: 65%;
text-shadow: none;
border: 5px solid @accent1;
}
.expbar div {
background: @accent1;
border-right: 2px solid @accent1;
}
.expbar span {
color: @text;
}
.bbcode_table {
background: transparent;
border: 1px solid hidden;
}
table {
border: 0px solid @accent1;
padding: 4px;
border-collapse: separate;
th, td {
text-align: center;
padding: 5px;
border-radius: 5px;
border: 2px solid @accent1;
color: @text;
}
th {
background-color: @accent3;
color: @text;
}
td {
background-color: @accent3;
}
}
table {
margin: 0 auto;
}
.tabbed_interface {
border-collapse: separate;
>ul {
background: none;
>li {
background: @accent3;
color: black;
border: 2px solid @accent1;
border-radius: 5px;
margin: 10px;
height: 15px;
font-size: 10pt;
min-width: 15%;
padding: 5px 0px;
text-align: center;
color: @text;
&.tab-active {
background: @accent1;
border: 2px glow @accent1;
color: @accent3;
}
}
}
.tab, .tab-active {
background: rgba(255,255,255,0);
color: @text;
border: 0px solid @accent1;
box-shadow: none;
}
}
hr {
width: 80%;
height: 0.5px;
border-radius: 5px;
background: @accent1;
}
b,i{color: @accent2;}
h1,h2{color: @accent2;}
.party > div {
background: black;
color: white;
border: 1px solid white;
box-shadow: 3px 3px 3px pink;
a:link, a:visited {
color: pink;
}
.action > .berrybuttons[data-up='sour'] > [data-berry='aspear'],
.action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'],
.action > .berrybuttons[data-up='dry'] > [data-berry='chesto'],
.action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'],
.action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] {
background: white;
}
.action > .berrybuttons[data-down='sour'] > [data-berry='aspear'],
.action > .berrybuttons[data-down='spicy'] > [data-berry='cheri'],
.action > .berrybuttons[data-down='dry'] > [data-berry='chesto'],
.action > .berrybuttons[data-down='sweet'] > [data-berry='pecha'],
.action > .berrybuttons[data-down='bitter'] > [data-berry='rawst'] {
background: grey;
}
.action a[data-berry]:after {
border: 2px solid @accent1;
border-radius: 5px;
}
.pkmn:before {
border: solid @accent1;
background-color: @accent3;
}
.expbar {
border: solid 1px @accent1;
color: @text;
background: @accent3;
border-radius: 5px;
>div {
background: @accent3;
border-right: solid 2px @accent3;
}
}
div.tooltip_content {
background: white;
color: @text;
border: solid 2px #99c5c4;
}
.bbcode_tooltip {
border-bottom: 1px dotted #99c5c4;
}
}[/style]
”A knight’s duty goes beyond a sword."
-Kaeya Alberich
0 / 500, 15zc/ea
Snow Jewel
Forme-Change Item
(
: 0)
A delicate jewel that seems to be frozen.
Sells for 
325
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sour food
MAXBold nature
credits
credits
- Code @RAINB0W
- Pkmnpanel by @Mirzam & modified slightly by @RAINB0W
- Background by @peakpx.com
- Sprite of Silkï made by Indeedee