Site Css

Grassroots

Below is the CSS code that is used for the style of the website. This theme is called "Grassroots". It is modified version of the Flower Blossom theme provided by Wikidot (from http://www.openwebdesign.org/viewdesign.phtml?id=3185&referer=%2Fbrowse.php).

How To Change The CSS For This Site

Note that if you change the code on this page, it will not automatically update the CSS for this wiki. You must go to the Site Manager (Tools > Site Manager). Then go to Appearance > Custom Theme and select "Grassroots" as the theme and then click "edit". Here you just scroll down and click on upload CSS from this page (site-css). The CSS code below will then be uploaded and saved to the theme. Then to apply the settings, you just go to Appearance > Themes, select "Grassroots" for the "_default" theme, and then press import. Note: sometimes the CSS code will not apply to the Site Manager, to fix this, just select "admin" on the Themes page, select "Grassroots", then press apply to apply the code manually.

Before changing the CSS code for the site, you should check and see if it renders everything properly by opening the page, Test CSS.

CSS Code

To jump to the bottom and edit this page, click here.

body {
    background: white;
    font: 0.8em Verdana, arial, helvetica, sans-serif;
}
 
a {
    background: transparent;
    text-decoration: none;
    color: #3c52be;
}
 
a:hover {
    background: transparent;
    color: #9e3dff;
    text-decoration: underline overline;
}
 
a.newpage:hover {
    color: red;
}
 
.new-page-box {
    display: inline;
    margin: 0;
}
 
.hide {
    display: none;
}
 
.gbutton {
    background-image: url('http://vipc.wikidot.com/local--files/pictures/grey-paisley.png');
    background-repeat: repeat;
    margin: 0;
    padding: 12px;
    position: relative;
    top: -1px;
    float: right;
    display: block;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}
 
.gbutton p, .gbutton a {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    font-size: 16pt;
    margin: 0;
    padding: 0;
}
 
.gbutton p {
    color: black;
}
 
.gbutton a {
    color: white;
}
 
.gbutton a:hover {
    background: transparent;
    text-decoration: underline overline;
    color: #70d95b;
}
 
.gbutton:hover {
    background: #a10000;
    background-image: url('http://vipc.wikidot.com/local--files/pictures/red-paisley.png');
}
 
.gbutton a.newpage {
    text-decoration: line-through;
}
 
h1 {
    margin-top: 4px 0 2px 0;
    color: #8f2936;
    font: normal 250%  "Century Gothic", georgia, Verdana, Arial, Helvetica, sans-serif;
}
 
h2 {
    margin: 4px 0 4px 24px;
    color: #8f2936;
    font: normal 150% "Century Gothic", georgia, Verdana, Arial, Helvetica, sans-serif;
}
 
h3 {
    margin: 20px 0 4px 32px;
    padding: 0;
    color: #4e6241;
    font: normal 130% "Century Gothic", georgia, Verdana, Arial, Helvetica, sans-serif;
}
 
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    text-decoration: underline;
}
 
#container {
    margin: 0 auto 0 auto;
    width: 100%;
}
 
#header {
    width: 100%;
    height: 184px;
    background-image: url('http://vipc.wikidot.com/local--files/pictures/green-paisley-gradient.png');
    background-repeat: repeat-x;
    padding: 0;
    margin: 0;
    border-bottom: solid 1px black;
}
 
#header-extra-div-1 {
    height: 150px;
    width: 225px;
    float: left;
    background-image: url('http://vipc.wikidot.com/local--files/pictures/vipc-logo-(small).png');
    background-repeat: no-repeat;
    padding: 0;
    position: absolute;
    top: 24px;
    left: 0;
}
 
#header-extra-div-3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    filter:alpha(opacity=40);
    -moz-opacity: 0.4;
    -khtml-opacity: 0.4;
    opacity: 0.4;
    width: 100%;
    height: 24px;
    background-color: black;
    border-bottom: 1px solid #3f3c1e;
}
 
#header h1 {
    padding: 24px 0 0 0;
    font-size: 200%;
}
 
#header h1 a {
    background: transparent;
}
 
#header h1 a {
    position: relative;
    padding: 0;
    margin: 0 0 0 250px;
    top: 24px;
    color: #70d95b;
    text-decoration: none;
    font-family: calibri;
    font-size: 300%;
    font-weight: bold;
    text-align: center;
}
 
#header h1 a:hover {
    color: #ff8205;
}
 
#header h2 {
    font-size: 220%;
}
 
#login-status, #login-status a {
    background: transparent;
    color: #eee;
    font-weight: bold;
}
 
#account-options a, #account-options, a#account-topbutton {
    background: #eee;
    color: #333;
    font-weight: normal;
}
 
#login-status {
    top: 3px;
}
 
#login-status img {
    display: none;
}
 
#account-topbutton:hover {
    background: #ccc;
}
 
#login-status {
    right: 22em;
}
 
#search-top-box {
    top: 1px;
    z-index: 50;
    background-color: transparent;
}
 
/* ===== Not used ===== */
#top-bar {
    text-align: center;
    padding: 0;
    color: #383838;
    border-top: 1px solid #3f3c1e;
    border-bottom: 1px solid #3f3c1e;
    left: 0;
    right: 0;
    /*padding-left: 20%;*/
    width: 100%;
}
 
#top-bar ul {
    padding-left: 20%;
    white-space: nowrap;
}
 
#top-bar ul li {
    margin: 0;
}
 
#top-bar ul li a {
    margin: 0;
    text-align: center;
    text-decoration: none;
    padding: 8px 1em;
    color: #edeeca;
    border-left: 1px solid #3f3c1e;
    background: #687d4a url('http://www.wikidot.com/common--theme/flower-blossom/images/navbck.png');
    line-height: 30px;
    font: normal 100% verdana, "Century Gothic",  Arial, Helvetica, sans-serif;
}
 
#top-bar a:hover {
    color: #333;
    background: #486127 url('http://www.wikidot.com/common--theme/flower-blossom/images/navbck3.png');
    border-bottom: 0;
}
/* =================== */
 
#content-wrap {
    overflow: hidden;
}
 
#main-content {
    margin: 0;
    padding: 0;
    background: white;
    color: #333;
}
 
#main-content p {
    line-height: 1.3em;
}
 
#page-title {
    color: #383838;
    width: 100%;
    height: 40px;
    padding: 6px 0 0 0;
    margin: 0;
    text-align: center;
    font-weight: bold;
    border-bottom: solid black 1px;
    background: #ffb56b;
    background-image: url('http://vipc.wikidot.com/local--files/pictures/orange-title-gradient.png');
}
 
#page-content {
    display: inline;
    top: 0;
    background: white;
    padding: 0;
    margin: 0;
}
 
#side-bar {
    display: none;
    width: 250px;
    height: 750px;
}
 
.side-bar {
    position: relative;
    display: block;
    float: left;
    top: -1px;
    left: 0px;
    width: 250px;
    padding: 0;
    margin: 0 24px 0 0;
    background: #ffb56b;
    border-right: 1px solid #3f3c1e;
    border-bottom: 1px solid #3f3c1e;
}
 
.side-bar p {
    margin: 8px 8px 0 0;
    line-height: 1.5em;
}
 
.side-bar ul {
    list-style-position: outside;
    margin: 2px 8px 2px 4px;
    padding: 0;
}
 
.side-bar li {
    margin-left: 20px;
}
 
.side-bar li a {
    position: relative;
    display: block;
    margin: 0;
    left: -24px;
    padding: 2px 1px 2px 18px;
    width: 231px;
}
 
.side-bar li a:hover {
    z-index: 60;
    background: #ffd58b;
    text-decoration: none;
    padding: 0 1px 0 18px;
    border-top: solid 1px #cf853b;
    border-right: solid 1px #cf853b;
    border-left: solid 3px #cf853b;
    border-bottom: solid 3px #cf853b;
}
 
.side-bar a {
    background: #ffb56b;
    font-size: 100%;
}
 
.side-bar a:hover {
    background: #ffb56b;
}
 
.side-bar hr {
    color: #333;
    background: #333;
    margin: 1em 0;
    width: 100%;
}
 
.side-bar h1 {
    background: #687d4a url('http://www.wikidot.com/common--theme/flower-blossom/images/navbck.png');
    color: #e0eac8;
    margin: 24px 0 0 0;
    padding: 10px 10px 10px 10px;
    border-top: 1px solid #3f3c1e;
    border-bottom: 1px solid #3f3c1e;
    font-size: 130%;
}
 
#footer {
    margin: 0;
    clear: both;
    text-align: left;
    background: #486127;
    color: #e0eac8;
    padding: 8px 1em;
    border-top: 1px solid #3f3c1e;
}
 
#footer a {
    color: #edeeca;
}
 
#footer a:hover {
    color: #333;
}
 
#footer p {
    margin: 0;
    padding: 0;
    font: normal 100%  Verdana, Arial, Helvetica, serif;
}
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License