Edit history for a post in Whit's CSS Reset: A Base BBCode for your Coding Needs.

Forum Index > PokéFarm > Guides > Whit's CSS Reset: A Base BBCode for your Coding Needs. >

[style]

.whitleymegagar {
background-color: #252525;
border: 10px solid #dadada;
padding: 15px;
font-size:12px;
color: #dadada;
border-image: url('https://64.media.tumblr.com/06c5cfa6175744990ef50fb51ce50f4a/2140f86138bdc13d-c0/s2048x3072/ca5798e42acd38597197036a16127eb63ba371e3.jpg') 30 round;
border-radius: 15px;

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-thumb {
    background: #1bc0cf; 
}
a:hover{color: #dadada;}

i, em { color: #1bc0cf;
}

h1 {
text-align: center;
color: #dadada;
font-size:14px;
text-transform:uppercase;
}
.codebox {
background-color: #dadada;
border: 3px solid #1bc0cf;
padding: 15px;
overflow-x: scroll;
font-size:12px;
word-wrap: normal;
color: #252525;
 word-break: keep-all;
border-radius:5px;
}

.codeinside {
width: 912px;
}

.panel.accordion {
  border: 2px solid #252525;
}
.panel.accordion>h3>a {
    display: block;
    margin: -4px;
    padding: 4px;
    background-color: #252525;
    text-decoration: none;
}
.accordion h3 a:after {
  content: '+'; /* Unicode character for "plus" sign (+) */
  float:right;
}
 h3.active a:after {
  content: "-"; /* Unicode character for "minus" sign (-) */
  
}

h3 { margin:8px; 
   outline:1px solid #1bc0cf; outline-offset: 3px;padding-top:5px; display:block; padding-bottom:5px; width:auto; font-size:9px; font-family:verdana;margin-top:10px; text-transform:uppercase; border-radius:0px; background-attachment:local;; text-align:center;}
   
 .panel>h3 {
   background-color: #252525; border: 1px solid #fea56e; 
 color: #dadada;
    text-align: left;
    padding: 8px;
    margin:7px; background: url('https://64.media.tumblr.com/06c5cfa6175744990ef50fb51ce50f4a/2140f86138bdc13d-c0/s2048x3072/ca5798e42acd38597197036a16127eb63ba371e3.jpg'); background-attachment:fixed;text-shadow:
1px 1px 0px #252525,
1px -1px 0px #252525,
-1px -1px 0px #252525,
-1px 1px 0px #252525,
0px 1px 0px #252525,
0px -1px 0px #252525,
1px 0px 0px #252525,
-1px 0px 0px #252525,
0px 0px 5px #252525;}

.panel {
    border: 1px solid #1bc0cf;
    background-color: #252525;
    border-radius: 0px;
    color: #dadada;
    box-shadow: 0 0 2px transparent;
   
}
.expbar>div {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-right: 0px solid transparent;
    background-color: #1bc0cf;
}
.expbar {
    margin: 10px auto 5px;
    border: 2px solid #dadada;
    border-radius: 6px;
    overflow: hidden;
    background: #252525;
    color: #dadada;
    position: relative;
    padding: 4px 4px;
}

.panel.accordion>h3>a {
    display: block;
    margin: -4px;
    padding: 4px;
    background-color: transparent; 
    text-decoration: none;}

b { 
color:#fea56e;}

.bbcode_table th {
    background-color:#b67549;
    font-weight: bold;
    color: #dadada; background: url('https://64.media.tumblr.com/06c5cfa6175744990ef50fb51ce50f4a/2140f86138bdc13d-c0/s2048x3072/ca5798e42acd38597197036a16127eb63ba371e3.jpg'); background-attachment:fixed;text-shadow:
1px 1px 0px #252525,
1px -1px 0px #252525,
-1px -1px 0px #252525,
-1px 1px 0px #252525,
0px 1px 0px #252525,
0px -1px 0px #252525,
1px 0px 0px #252525,
-1px 0px 0px #252525,
0px 0px 5px #252525;
}
a {
color:#fea56e;}

.bbcode_table td, .bbcode_table th {
    border: 1px solid #fea56e;
    vertical-align:  middle;
    padding: 4px;}

.panel>div {
    padding: 4px;
    color: #dadada;
    border: 1px solid #245364 ;
    margin: 0px 3px; padding: 10px; margin-top:-4px;}

.bbcode_table {
    border: 3px outset #fea56e; width:100%; }
.panel>h3 a svg.acctoggle {
    vertical-align: middle;
    transform-origin: 50% 50%;
    transition: transform 0.4s ease-in-out;
    display: none;

}

.tabbed_interface>div {
    border-radius: 0 8px 8px 0;
    margin-left: 159px;
    border-top: 2px solid #fea56e;
    border: 0px solid transparent;
    box-shadow: 0 0 2px transparent;
}

.tabbed_interface.horizontal>ul {
    background-color: #282828;
    }
    
    
.tabbed_interface.horizontal>ul>li {
    display: inline-block;
    width: auto;
    flex: 1 1 auto;
    white-space: nowrap;
    background-color: #282828;
    color: #dadada;
    border-top: 1px solid #fea56e;
    border-bottom: 2px;    
    padding: 8px;
    text-align:center;
    }

.tabbed_interface.horizontal>ul {
    float: none;
    width: auto;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #fea56e;
}

.tabbed_interface>ul>li {
    border: 1px solid #fea56e;
    color: #dadada;
    position: relative;}

.tabbed_interface.horizontal>ul>li.tab-active {
    border-right-color: #fea56e;
     border-left-color: #fea56e;
    background-color: #282828;
    color: #dadada;
    border-bottom-color: #fea56e; background: url('https://64.media.tumblr.com/06c5cfa6175744990ef50fb51ce50f4a/2140f86138bdc13d-c0/s2048x3072/ca5798e42acd38597197036a16127eb63ba371e3.jpg'); background-attachment:fixed;text-shadow:
1px 1px 0px #252525,
1px -1px 0px #252525,
-1px -1px 0px #252525,
-1px 1px 0px #252525,
0px 1px 0px #252525,
0px -1px 0px #252525,
1px 0px 0px #252525,
-1px 0px 0px #252525,
0px 0px 5px #252525;
}

.tabbed_interface.horizontal>div {
  margin: 0px;
    margin-top: -1px;
    border: 2px solid #fea56e;
    border-radius: 0;
    padding: 10px;
    color: #dadada; background: url('https://64.media.tumblr.com/06c5cfa6175744990ef50fb51ce50f4a/2140f86138bdc13d-c0/s2048x3072/ca5798e42acd38597197036a16127eb63ba371e3.jpg'); background-attachment:fixed;text-shadow:
1px 1px 0px #252525,
1px -1px 0px #252525,
-1px -1px 0px #252525,
-1px 1px 0px #252525,
0px 1px 0px #252525,
0px -1px 0px #252525,
1px 0px 0px #252525,
-1px 0px 0px #252525,
0px 0px 5px #252525;
}}

[/style]
[styleclass=whitleymegagar][img]https://i.ibb.co/DCL27wj/blankheader.gif[/img]

[h1]Whitley's CSS Reset for Pokefarm Forum Templates[/h1]

[b]What is a Css Reset?[/b]
"A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline." -CSSRESET.Com

[b]What does a CSS Reset do?[/b]
Basically, a CSS Reset easily overwrites initial CSS, making it more easy for you to make the changes you want. It gets rid of extra backgrounds and borders that you'd have to manually change, and allows you to set up what you need in it's place without extra junk in the background.

[b]How do I use a CSS Reset?[/b]
Put it at the very top of your [nobbcode][style][/nobbcode] set, then add your customization below!

[b]Can I reset an existing template?[/b]
You may need to modify the reset, as this was designed to reset any stylings inherited by the Pokefarm forums. Basically, this resets the default, and is a starting point which is easier to use and build upon.

[b]Is this reset free to use?[/b]
Yes, but I do accept and appreciate tips ^^

[b]May I modify it?[/b]
Yes, but you may not re-release it, and you must credit me. Do not sell templates made with my reset.

[/styleclass]
[accordion]
[a-section=Get the CSS Reset Style]
[nobbcode]
[style]
/* Whitley's Template CSS RESET by Whit on Pokefarm*/
.whitley{font-size: 12px;font-family: Arial, Helvetica, sans-serif;
.panel,.panel>h3,.panel.accordion>h3>a,.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface.horizontal>ul,.tabbed_interface.horizontal>ul>li, .tabbed_interface.horizontal>div,.bbcode_table td,.panel>div,.bbcode_table th,.bbcode_table,{color: black;padding: 5px;border-radius: 0px;box-sizing:border-box;background-color:transparent;border: 0px solid transparent;box-shadow: 0 0 0 transparent;font-weight:200;}.bbcode_table th,.bbcode_table td,.panel.accordion>h3,.panel>div,.tabbed_interface.horizontal>ul>li,.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface>div.tab-active{border: 1px solid black;}.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface>div.tab-active, .bbcode_table th,.panel.accordion>h3.active,.panel>div{background-color:lightgray;}.tabbed_interface.horizontal>ul>li:hover,.tabbed_interface.horizontal>ul>li.tab-active:hover,.panel.accordion>h3:hover{transition: 0.5s;background-color:white;}.tabbed_interface>div.tab-active{margin: 0px;margin-top:-1px;}b{color:gray;font-size: 13px;}i{color: gray;font-size: 13px;}h1, h2, h3 {color: black;}h1{font-size:2.4em}h2{font-size:1.8em}h3{font-size:1em}a{text-decoration:none;color: gray;transition: 0.5s;}a:hover{color:white;}.tabbed_interface.horizontal>ul{padding: 0px;}}
/* Whitley's Template CSS RESET by Whit on Pokefarm*/

/* ADD CSS BELOW */

[/style]
[styleclass=whitley]

ADD CONTENT HERE

[/styleclass]
[/nobbcode]

[/a-section]
[a-section=See What it does!][sc=tabbed_interface horizontal][ul]
[li]No Reset[/li][li]Reset[/li]
[/ul][sc=tab-active]

[h1]H1[/h1]
[h2]H2[/h2]
[h3]H3[/h3]
[b]Bold[/b] [i]Italics[/i] [url=https://pokefarm.com/user/Whit]Link[/url]

[accordion]
  [a-section=TITLE 1] CONTENTS 1 [/a-section]
  [a-section=TITLE 2] CONTENTS 2 [/a-section]
  [a-section=TITLE 3] CONTENTS 3 [/a-section]
  [a-section=TITLE 4] CONTENTS 4 [/a-section]
[/accordion]

[sc=tabbed_interface horizontal]
[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][/sc]

[quote]QUOTE HERE[/quote]
[quote=WHO SAID THE QUOTE]QUOTE HERE[/quote]

[table]
[tr]
 [th]Header 1[/th]
 [th]Header 2[/th]
 [th]Header 3[/th]
[/tr]
[tr]
 [td]cell 1[/td]
 [td]cell 2[/td]
 [td]cell 3[/td]
[/tr]
[tr]
 [td]cell 4[/td]
 [td]cell 5[/td]
 [td]cell 6[/td]
[/tr]
[/table]

[/sc][sc=tab][style]
/* Whitley's Template CSS RESET by Whit on Pokefarm*/
.whitley{font-size: 12px;font-family: Arial, Helvetica, sans-serif;
.panel,.panel>h3,.panel.accordion>h3>a,.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface.horizontal>ul,.tabbed_interface.horizontal>ul>li, .tabbed_interface.horizontal>div,.bbcode_table td,.panel>div,.bbcode_table th,.bbcode_table,{color: black;padding: 5px;border-radius: 0px;box-sizing:border-box;background-color:transparent;border: 0px solid transparent;box-shadow: 0 0 0 transparent;font-weight:200;}.bbcode_table th,.bbcode_table td,.panel.accordion>h3,.panel>div,.tabbed_interface.horizontal>ul>li,.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface>div.tab-active{border: 1px solid black;}.tabbed_interface.horizontal>ul>li.tab-active,.tabbed_interface>div.tab-active, .bbcode_table th,.panel.accordion>h3.active,.panel>div{background-color:lightgray;}.tabbed_interface.horizontal>ul>li:hover,.tabbed_interface.horizontal>ul>li.tab-active:hover,.panel.accordion>h3:hover{transition: 0.5s;background-color:white;}.tabbed_interface>div.tab-active{margin: 0px;margin-top:-1px;}b{color:gray;font-size: 13px;}i{color: gray;font-size: 13px;}h1, h2, h3 {color: black;}h1{font-size:2.4em}h2{font-size:1.8em}h3{font-size:1em}a{text-decoration:none;color: gray;transition: 0.5s;}a:hover{color:white;}.tabbed_interface.horizontal>ul{padding: 0px;}}
/* Whitley's Template CSS RESET by Whit on Pokefarm*/

/* ADD CSS BELOW */

[/style]
[styleclass=whitley]
[h1]H1[/h1]
[h2]H2[/h2]
[h3]H3[/h3]
[b]Bold[/b] [i]Italics[/i] [url=https://pokefarm.com/user/Whit]Link[/url]

[sc=tabbed_interface horizontal]
[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][/sc]

[quote]QUOTE HERE[/quote]
[quote=WHO SAID THE QUOTE]QUOTE HERE[/quote]

[/styleclass][/sc][/sc]
[/a-section]
[/accordion]

Loading...

Edit history for a post in Whit's CSS Reset: A Base BBCode for your Coding Needs.

Preparing...