<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>CSS Themes - DND 5th Edition</title>
    
    
    
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/init.combined.js"></script>
    <script  type="text/javascript">
        var URL_HOST = 'www.wikidot.com';
        var URL_DOMAIN = 'wikidot.com';
        var USE_SSL =  true ;
        var URL_STATIC = 'https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327';
        // global request information
        
        var WIKIREQUEST = {};
        WIKIREQUEST.info = {};
        
        WIKIREQUEST.info.domain = "dnd5e.wikidot.com";
        WIKIREQUEST.info.siteId = 1475899;
        WIKIREQUEST.info.siteUnixName = "dnd5e";
        WIKIREQUEST.info.categoryId = 11887291;
        WIKIREQUEST.info.themeId = 2386862;
        WIKIREQUEST.info.requestPageName = "help:css-themes";
        OZONE.request.timestamp = 1755515708;
        OZONE.request.date = new Date();
        WIKIREQUEST.info.lang = 'en';
                WIKIREQUEST.info.pageUnixName = "help:css-themes";
        WIKIREQUEST.info.pageId = 48865959;
                        WIKIREQUEST.info.lang = "en";
        OZONE.lang = "en";
        var isUAMobile = !!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    </script>
    
    


    
        <script  type="text/javascript">
    
        require.config({
            baseUrl: URL_STATIC + '/common--javascript',
            paths: {
                'jquery.ui': 'jquery-ui.min',
                'jquery.form': 'jquery.form'
            }
        });
    
    </script>
    
    <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
            
    
    
    
    
    <meta http-equiv="content-language" content="en"/>
    <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/WIKIDOT.combined.js"></script>
            <script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
             <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        
        <link href="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
    
    <style type="text/css" id="internal-style">
        
        /* modules */
        
                /* bootstrap */
            @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.2.0/bootstrap.min.css);
                
        /* theme */
                    @import url(https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--theme/bootstrap-base/css/style.css);
                    @import url(https://dnd5e.wdfiles.com/local--theme/standard-yellow/style.css);
            </style>
    
            <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        
        
        
    <link rel="shortcut icon" href="/local--favicon/favicon.gif"/>
    <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/>
    
            <link rel="apple-touch-icon" href="/common--images/apple-touch-icon-57x57.png" />
        <link rel="apple-touch-icon" sizes="72x72" href="/common--images/apple-touch-icon-72x72.png" />
        <link rel="apple-touch-icon" sizes="114x114" href="/common--images/apple-touch-icon-114x114.png" />
        
        
            <link rel="alternate" type="application/wiki" title="Edit this page" href="javascript:WIKIDOT.page.listeners.editClick()"/>
    
        <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-18234656-1']);
        _gaq.push(['_setDomainName', 'none']);
        _gaq.push(['_setAllowLinker', true]);
        _gaq.push(['_trackPageview']);

        _gaq.push(['old._setAccount', 'UA-68540-5']);
        _gaq.push(['old._setDomainName', 'none']);
        _gaq.push(['old._setAllowLinker', true]);
        _gaq.push(['old._trackPageview']);

            </script>
    
    <script type="text/javascript">
        window.google_analytics_uacct = 'UA-18234656-1';
        window.google_analytics_domain_name = 'none';
    </script>
    
        <link rel="manifest" href="/onesignal/manifest.json" />
    <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" acync=""></script>
    <script>
        var OneSignal = window.OneSignal || [];
        OneSignal.push(function() {
          OneSignal.init({
            appId: null,
          });
        });
    </script>
        
<style>
.admins-only, li.admins-only{  display: none; }
</style>
<script data-cfasync="false">window.nitroAds=window.nitroAds||{createAd:function(){return new Promise(e=>{window.nitroAds.queue.push(["createAd",arguments,e])})},addUserToken:function(){window.nitroAds.queue.push(["addUserToken",arguments])},queue:[]};</script>
<script data-cfasync="false" async src="https://s.nitropay.com/ads-143.js"></script>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<style>
.image-box .col-md-12 {
    padding: 0;
    float: none;
}
.image-box {
    border-radius: 6px;
    padding: 6px;
    border: 1px solid #E7E7E7;
    background: #FFF;
    margin: 1.25em;
}
.image-box * {  overflow: hidden; }
.image-box.image-box-middle,
.image-box.image-box-left,
.image-box.image-box-right {  margin: 4px auto; }
.image-box.image-box-left.force-float-true {
    margin: 4px 10px 4px 0;
    float: left;
}
.image-box.image-box-right.force-float-true {
    margin: 4px 0 4px 10px;
    float: right;
}
.image-box .image-box-heading {
    color: #777;
    background-color: #F2F2F2;
    text-align: center;
    letter-spacing: .5px;
    font-size: 110%;
    padding: .25em 1em;
    border-radius: 6px 6px 2px 2px;
    margin: 0 0 4px 0;
}
.image-box-modal .modal-header p {  margin: 0; }
.image-box-modal .image-box-heading {
    font-size: 125%;
    font-weight: 500;
}

.image-box .image-box-heading p {  margin: 0; }
.image-box .image-box-image {  margin: 0; }
.image-box .image-box-image p {  margin: 0; }
.image-box .image-box-image img,
.image-box-modal .image-box-image img {  margin: 0 auto; }
.image-box .image-box-link {
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 6px;
    display: block;
    width: 100%;
    transition: border-color 256ms linear;
    -moz-transition: border-color 256ms linear;
    -webkit-transition: border-color 256ms linear;
    -o-transition: border-color 256ms linear;
}
.image-box .image-box-link:hover {
    border-color: rgba(66, 139, 202, 1);
    text-decoration: none;
}
.image-box-modal .image-box-link[href=none] {  pointer-events: none; }
.image-box .image-box-caption {
    font-size: 80%;
    color: #999;
    text-align: center;
    margin: 4px 0 0 0;
}
.image-box-modal .image-box-caption {  text-align: center; }
.image-box .image-box-caption p:last-child,
.image-box-modal .image-box-caption p:last-child {  margin: 0; }
.image-box.image-box-primary {  border-color: #D9E8F4; }
.image-box.image-box-primary .image-box-heading {
    background-color: #428BCA;
    color: #FFF;
}
.image-box.image-box-primary .image-box-caption {  color: #428BCA; }
.image-box.image-box-info {  border-color: #DEF2F8; }
.image-box.image-box-info .image-box-heading {
    background-color: #5BC0DE;
    color: #FFF;
}
.image-box.image-box-info .image-box-link:hover {  border-color: #46B8DA; }
.image-box.image-box-info .image-box-caption {  color: #5BC0DE; }
.image-box.image-box-success {  border-color: #DEF1DE; }
.image-box.image-box-success .image-box-heading {
    background-color: #5CB85C;
    color: #FFF;
}
.image-box.image-box-success .image-box-link:hover {  border-color: #4CAE4C; }
.image-box.image-box-success .image-box-caption {  color: #5CB85C; }
.image-box.image-box-danger {  border-color: #F7DDDC; }
.image-box.image-box-danger .image-box-heading {
    background-color: #D9534F;
    color: #FFF;
}
.image-box.image-box-danger .image-box-link:hover {  border-color: #D43F3A; }
.image-box.image-box-danger .image-box-caption {  color: #D9534F; }
.image-box.image-box-warning {  border-color: #FCEFDC; }
.image-box.image-box-warning .image-box-heading {
    background-color: #F0AD4E;
    color: #FFF;
}
.image-box.image-box-warning .image-box-link:hover {  border-color: #EEA236; }
.image-box.image-box-warning .image-box-caption {  color: #F0AD4E; }

@media(min-width: 992px) {
    .image-box {  width: auto; }
    .image-box.image-box-left {
        margin: 4px 10px 4px 0;
        float: left;
        clear: left;
    }
    .image-box.image-box-right {
        margin: 4px 0 4px 10px;
        float: right;
        clear: right;
    }
}
</style>
<script type="text/javascript" src="https://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--modules/js/misc/NewPageHelperModule.js"></script>
</head>
<body id="html-body">
<div id="skrollr-body">
<!---------------------------------------------------------
  Standard Template Layout
  Developed by the Wikidot Community
  Version: 1.01.141118
---------------------------------------------------------->
<a name="page-top"></a>

<div class="container-wrap-wrap">
<div class="container-wrap">
 
<header class="header-wrap" role="banner">
  <div class="container header">
    <div class="site-title">
      <h1><a href="/"><span>DND 5th Edition</span></a></h1>
      <h2><span>community wiki</span></h2>
    </div>
    <div class="login-status">
      <a href="javascript:;" onclick="WIKIDOT.page.listeners.createAccount(event)" class="login-status-create-account btn">Create account</a> <span>or</span> <a href="javascript:;" onclick="WIKIDOT.page.listeners.loginClick(event)" class="login-status-sign-in btn btn-primary">Sign in</a> 
    </div>
    <div id="search-top-box" class="form-search">
    <form id="search-top-box-form" action="dummy" class="input-append">
        <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="Search this site" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="Search"/>
    </form>
</div>
  </div>
 
  
  <nav class="top-bar-wrap navbar navbar-default" role="navigation">
    <div class="container top-bar">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-top-target">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Home</a>
      </div>
      <div class="collapse navbar-collapse navbar-top-target">
        

<ul class="nav navbar-nav">
<li><a href="/main:about">About <span class="fa fa-info-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li><a href="/system:join">Membership <span class="fa fa-user"><span style="white-space: pre-wrap;">&nbsp;</span></span></a></li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Help Docs <span class="fa fa-question-circle"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
<li><a href="/help:quick-reference">Quick Reference</a></li>
<li><a href="/help:creating-pages">Creating Pages</a></li>
<li><a href="/help:editing-pages">Editing Pages</a></li>
<li><a href="/help:navigation-bars">Navigation Bars</a></li>
<li><a href="/help:using-modules">Using Modules</a></li>
<li><a href="/help:templates">Templates</a></li>
<li><a href="/help:css-themes">CSS Themes</a></li>
</ul>
</li>
<li class="dropdown admins-only"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-cog"><span style="white-space: pre-wrap;">&nbsp;</span></span></a>
<ul class="dropdown-menu">
<li><a href="/_admin">Site Manager</a></li>
<li><a href="/nav:top">Edit Top Bar</a></li>
<li><a href="/nav:side">Edit Side Bar</a></li>
<li><a href="/css:_home">CSS Manager</a></li>
<li><a href="/system:recent-changes">Recent Changes</a></li>
<li><a href="/system:list-all-pages">List All Pages</a></li>
</ul>
</li>
</ul>



<div style="display : none;">
</div>

      </div>
    </div>
  </nav>
  
 
  <div class="header-extra-div-1"><span></span></div>
  <div class="header-extra-div-2"><span></span></div>
  <div class="header-extra-div-3"><span></span></div>
</header>
 
<main class="content-wrap" role="main">
  <div class="container content">
    <div class="row">
    
      <nav class="side-bar-wrap col-md-3">
        <div class="side-bar">
          <div class="side-bar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-side-target">
              <span>Menu</span>
            </button>
          </div>
          <div class="collapse navbar-collapse navbar-side-target">
            

<div class="text-center" style="margin-bottom: 12px;"><div class="error-block">You should be logged in to clone a site.</div></div>
<h1 ><span>Site Navigation</span></h1>
<ul>
<li><a href="/help:_home">User Guide</a></li>
<li><a href="/help:first-time-user">First Time User</a></li>
</ul>
<ul>
<li><a href="/main:about">About</a></li>
<li><a href="/main:contact">Contact</a></li>
<li><a href="/legal:_home">Legal</a></li>
<li><a href="/forum:start">Discussion Forums</a></li>
<li><a href="/system:members">Members</a></li>
</ul>
<h1 ><span>Create a Page</span></h1>

<div class="new-page-box" style="text-align: center; margin: 1em 0;">
	<form action="dummy.html" method="get" onsubmit="WIKIDOT.modules.NewPageHelperModule.listeners.create(event);">
		<input class="text" name="pageName" type="text" size="20" maxlength="128" style="margin: 1px"/>
				<input type="submit" class="button" value="New page" style="margin: 1px;"/>
																
	</form>
</div>

                    
            <!-- wikidot_below_sidebar_160x600 -->
<div id="wad-dnd5e-below-sidebar" class="wd-adunit wd-ad-np wd-adunit-below_sidebar"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-sidebar', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 160, 600 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 1000px)"
  });
</script>
        
    

            <div style="display: none"></div>
          </div>
        </div>
      </nav>
      
      <div class="main-content-wrap col-md-9">
      
        <div class="main-content">
          <div class="page-title page-header"><span>CSS Themes</span></div>
          
          
        
            <!-- wikidot_top_728x90 -->
<div id="wad-dnd5e-above-content" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 728, 90 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  },
  "mediaQuery": "(min-width: 768px)"
  });
</script>
<div id="wad-dnd5e-above-content-mobile" class="wd-adunit wd-ad-np wd-adunit-above_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-above-content-mobile', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 320, 50 ], [320, 100] ],
  "report": {
    "enabled": true,
    "icon": true,
    "wording": "Report Ad",
    "position": "top-right"
  },
  "mediaQuery": "(min-width: 320px) and (max-width: 767px)"
  });
</script>
        
    

<div id="page-content">

<p>The appearance of your site is determined by its CSS Theme. CSS stands for <a href="http://www.w3schools.com/css/" target="_blank">Cascading Style Sheets</a>, and it essentially defines rules and properties of various elements on a page. You as a site administrator have the option to change the site's theme or modify it to fit your purposes.</p>
<table style="margin:0; padding:0">
<tr>
<td style="margin:0; padding:0">
<div id="toc">
<div id="toc-action-bar"><a href="javascript:;" onclick="WIKIDOT.page.listeners.foldToc(event)">Fold</a><a style="display: none" href="javascript:;" onclick="WIKIDOT.page.listeners.unfoldToc(event)">Unfold</a></div>
<div class="title">Table of Contents</div>
<div id="toc-list">
<div style="margin-left: 1em;"><a href="#toc0">Selecting a Color</a></div>
<div style="margin-left: 2em;"><a href="#toc1">Custom Colors</a></div>
<div style="margin-left: 1em;"><a href="#toc2">Editing Your Theme</a></div>
<div style="margin-left: 1em;"><a href="#toc3">A Theme from Scratch</a></div>
<div style="margin-left: 1em;"><a href="#toc4">Private Sites</a></div>
</div>
</div>
</td>
</tr>
</table>
<h1 id="toc0"><span>Selecting a Color</span></h1>
<p>The default theme of the Standard Template is called, rather creatively, the <a href="http://css.wikidot.com/theme:standard-theme" target="_blank">Standard Theme</a>. Utilizing a combination of sharp corners and round edges, the theme is fierce, yet elegant. Given its generic nature, it could be used with basically any site.</p>
<p>You may, however, find that the default color does not fit your personality. Thankfully, the Standard Theme comes in eight different colorful flavors: <strong><span style="color: #ad2020">Red</span></strong>, <strong><span style="color: #b07834">Orange</span></strong>, <strong><span style="color: #908149">Yellow</span></strong>, <strong><span style="color: #367a00">Green</span></strong>, <strong><span style="color: #005cad">Blue</span></strong>, <strong><span style="color: #a65e93">Purple</span></strong>, <strong><span style="color: #000">Black</span></strong>, and <strong><span style="color: #aaa">White</span></strong>. Best of all, we've made it pretty simple for you to select the color you desire.</p>
<p>To change the color of your site, simply follow the below steps:</p>
<div class="row">
<div class="col-md-7">
<ol>
<li>Go to the <a href="/_admin">Site Manager</a>.</li>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the first option, called &quot;Themes&quot;.</li>
<li>After it completely loads, click on the tab titled &quot;You&quot;.</li>
<li>Find the color you wish to use and click &quot;Install&quot;.</li>
<li>After that, you're done!</li>
</ol>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diSelect Colorne;">
<p>Select Color</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-selectcolor" href=""><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_chooseColor.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diSelect one of the eight colorsne;">
<p>Select one of the eight colors</p>
</div>
</div>
<div id="u-selectcolor" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="diSelect Colorne;">
<p><span class="modal-title image-box-heading">Select Color<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help:css-themes/css_chooseColor.png"><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_chooseColor.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diSelect one of the eight colorsne;">
<div class="image-box-caption">
<p>Select one of the eight colors</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
<h2 id="toc1"><span>Custom Colors</span></h2>
<p>What if you don't like any of those eight colors? Luckily, you can define your own color scheme using the <strong><a href="http://css.wdfiles.com/local--files/program%3Astandard-theme-colorification/stc_html.html" target="_blank">Standard Theme Colorification</a></strong> tool! This tool allows you to define specific colors, and afterwards will give you the code that makes your new scheme. In order to apply it, follow the below steps:</p>
<div class="row">
<div class="col-md-7">
<ol>
<li>Go to the <a href="/_admin">Site Manager</a>.</li>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the first option, called &quot;Themes&quot;.</li>
<li>After it completely loads, click on the tab titled &quot;Custom&quot;.</li>
<li>Find the Theme named &quot;My Colors&quot;.</li>
<li>Paste the code given to you by the tool into the text box that appears on the bottom
<ul>
<li><span class="text-warning"><strong>Note:</strong> Do not change the theme's name!</span></li>
</ul>
</li>
<li>Click &quot;Save Theme&quot;.</li>
<li>Go to the top and click the tab titled &quot;You&quot;.</li>
<li>Find the option called &quot;Custom Standard Theme&quot; and click &quot;Install&quot;.</li>
<li>After that, you're done!</li>
</ol>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diColorification Toolne;">
<p>Colorification Tool</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-colorificationtool" href=""><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_colorification.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diPerhaps you want a hot pink theme. No problem!ne;">
<p>Perhaps you want a hot pink theme. No problem!</p>
</div>
</div>
<div id="u-colorificationtool" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="diColorification Toolne;">
<p><span class="modal-title image-box-heading">Colorification Tool<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help:css-themes/css_colorification.png"><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_colorification.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diPerhaps you want a hot pink theme. No problem!ne;">
<div class="image-box-caption">
<p>Perhaps you want a hot pink theme. No problem!</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
<h1 id="toc2"><span>Editing Your Theme</span></h1>
<p>Sometimes, you may wish to tweak your theme here and there. For instance, what if you wanted all links to be underlined? The Standard Template is set up to make this process very simple and painless. For this to be useful, though, you need to have an understanding of what CSS is and how it works. To learn more, <a href="http://www.w3schools.com/css/" target="_blank">W3Schools</a> has some good tutorials.</p>
<div class="alert alert-warning">
<p>This process is slightly different for <strong>private sites</strong>. If you have a private site, please read the <a href="#private-sites">Private Sites</a> section.</p>
</div>
<p>Themes work using a partnership between the Site Manager and what are called CSS pages. If all you want to do is modify your current theme, you only need to edit one special CSS page called Global CSS. This page is exactly like a wiki page, except only admins (by default) are allowed to modify it.</p>
<p>To access your CSS pages, go to the <a href="/css:_home">Themes Administration</a> page. This page will list all the CSS Pages that you have created or are available. One of them should be titled Global CSS. If you click on it, it will take you to the Global CSS stylesheet. You can then edit the page and edit your CSS there.</p>
<h1 id="toc3"><span>A Theme from Scratch</span></h1>
<p>It may be that the Standard Theme does not fit the need of your site. Perfectly understandable! We in fact encourage that you customize your site in whatever way you wish! After all, Wikidot excels at site customization.</p>
<p>Therefore, you may wish to create an entirely new theme. To do this, we encourage the use of the <a href="/css:_home">Themes Administration</a> page, as this will allow you to keep a history of your site's CSS changes.</p>
<p>The first thing you should do is create a new stylesheet page using the form provided on the Themes Administration page. This will create a new page with a little bit of code on it. Place your CSS between the provided <tt>[[cod<span style="white-space: pre-wrap;">e</span>]]</tt> tags. This page will now appear on the Themes Administration page, and you may edit it at any time. By default, only admins are allowed to edit CSS pages.</p>
<p>Once you have a CSS page, you must now apply it to the site using the <a href="/_admin">Site Manager</a>. To do this, follow the below steps:</p>
<div class="row">
<div class="col-md-7">
<ol>
<li>Go to the <a href="/_admin">Site Manager</a>.</li>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the first option, called &quot;Themes&quot;.</li>
<li>After it completely loads, click on the tab titled &quot;Custom&quot;.</li>
<li>Find where it says &quot;Create a New Theme&quot;, and click it.</li>
<li>You should see a variety of options.
<ul>
<li>On &quot;Which theme to extend&quot;, change it to &quot;Bootstrap Base&quot;.</li>
<li>On &quot;Choose layout&quot;, change it to &quot;Standard Layout&quot;.</li>
</ul>
</li>
<li>In the large text field, paste the following code:</li>
</ol>
<div class="code">
<div class="hl-main">
<pre>
<span class="hl-var">@import</span><span class="hl-code"> </span><span class="hl-identifier">url</span><span class="hl-code">('/</span><span class="hl-identifier">css</span><span class="hl-special">:THEME-NAME</span><span class="hl-code">/</span><span class="hl-identifier">code</span><span class="hl-code">/1');
</span><span class="hl-var">@import</span><span class="hl-code"> </span><span class="hl-identifier">url</span><span class="hl-code">('/</span><span class="hl-identifier">local--theme</span><span class="hl-code">/</span><span class="hl-identifier">global-css</span><span class="hl-code">/</span><span class="hl-identifier">style.css</span><span class="hl-code">');</span>
</pre></div>
</div>
<p>Note that <tt>THEME-NAME</tt> is the name you gave the theme on the Themes Administration page, <em>all lower case and spaces replaced with hypens</em>.</p>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diCreating a Themene;">
<p>Creating a Theme</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-creatingatheme" href=""><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_makeTheme.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diTake note of how to make a theme in the Site Managerne;">
<p>Take note of how to make a theme in the Site Manager</p>
</div>
</div>
<div id="u-creatingatheme" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="diCreating a Themene;">
<p><span class="modal-title image-box-heading">Creating a Theme<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help:css-themes/css_makeTheme.png"><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_makeTheme.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diTake note of how to make a theme in the Site Managerne;">
<div class="image-box-caption">
<p>Take note of how to make a theme in the Site Manager</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
<p>Once you press &quot;Save Theme&quot;, this will create a theme in the site manager. Now you only need to apply it.</p>
<ol>
<li>At the very top, click on the tab titled &quot;You&quot;.</li>
<li>Find your theme and click &quot;Install&quot;.</li>
<li>After that, you're done!</li>
</ol>
<div class="alert alert-info">
<p>If you are making your theme from scratch, it might be useful to know the page's HTML structure. This structure follows the <a href="http://standard-template.wikidot.com/main:layout">Standard Layout</a>, provided on that page for your edification. Note also that this layout is based on <a href="http://getbootstrap.com" target="_blank">Bootstrap</a>, and hence you have access to Bootstrap utilities and classes.</p>
</div>
<p><a name="private-sites"></a></p>
<h1 id="toc4"><span>Private Sites</span></h1>
<p>If you are making a Private site, then the CSS pages on the <a href="/css:_home">Themes Administration</a> page will not function. Instead, you should manage all of your CSS via the <a href="/_admin">Site Manager</a>. To tweak your site's CSS or make a new theme, follow the below steps:</p>
<div class="row">
<div class="col-md-7">
<ol>
<li>Go to the <a href="/_admin">Site Manager</a>.</li>
<li>From the Dashboard, click on &quot;Appearance &amp; Behavior&quot;.</li>
<li>Look for the first option, called &quot;Themes&quot;.</li>
<li>After it completely loads, click on the tab titled &quot;Custom&quot;.</li>
<li>Find the Theme called Private Site CSS</li>
<li>Insert whatever CSS you wish in the text box at the bottom</li>
<li>Click &quot;Save Theme&quot;</li>
<li>Whenever you need to apply more tweaks, perform these steps again.</li>
</ol>
</div>
<div class="col-md-5">
<div class="image-box image-box-middle force-float-false image-box-default" style="width: {$width}; max-width: {$max-width};">
<div class="col-md-12 image-box-heading" style="diFor Private Sitesne;">
<p>For Private Sites</p>
</div>
<div class="col-md-12 image-box-image" style="text-align: center;"><a class="image-box-link" data-toggle="modal" data-target="#u-forprivatesites" href=""><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_privatesites.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
<div class="col-md-12 image-box-caption" style="diFind the Private Site CSS under Themes in the Site Managerne;">
<p>Find the Private Site CSS under Themes in the Site Manager</p>
</div>
</div>
<div id="u-forprivatesites" class="image-box-modal modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header" style="diFor Private Sitesne;">
<p><span class="modal-title image-box-heading">For Private Sites<a class="close" data-dismiss="modal" href=""><span style="white-space: pre-wrap;">×</span></a></span></p>
</div>
<div class="modal-body">
<div class="image-box-image"><a class="image-box-link" href="http://css.wikidot.com/local--files/csi:help:css-themes/css_privatesites.png"><img src="http://css.wikidot.com/local--files/csi:help:css-themes/css_privatesites.png" title="" class="img-responsive img-rounded" alt="Image Unavailable" width="{$width}" /></a></div>
</div>
<div class="modal-footer" style="diFind the Private Site CSS under Themes in the Site Managerne;">
<div class="image-box-caption">
<p>Find the Private Site CSS under Themes in the Site Manager</p>
</div>
</div>
</div>
</div>
</div>


</div>
</div>
</div>




        
            <!-- floating video element -->
<div id="wad-dnd5e-floating-video" style="position: fixed; right: 0; bottom: 0;"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-floating-video', {
  "refreshTime": 30,
  "format": "floating",
  "mediaQuery": "(min-width: 1025px)"
  });
</script>
        
    


        
                        <!-- wikidot_bottom_300x250 -->
<div id="wad-dnd5e-below-content" class="wd-adunit wd-ad-np wd-adunit-below_content"></div>
<script>
window['nitroAds'].createAd('wad-dnd5e-below-content', {
  "refreshTime": 30,
  "renderVisibleOnly": false,
  "refreshVisibleOnly": true,
  "sizes": [ [ 300, 250 ] ],
  "report": {
    "enabled": true,
    "wording": "Report Ad",
    "position": "bottom-right"
  }
  });
</script>
                    
    


          
          <div class="page-info-break"></div>
          <div class="page-options-container"></div>
          <div id="action-area" style="display: none;"></div>
        </div>
      </div>
    </div>
  </div>
</main>
 
<footer class="footer-wrap" role="contentinfo">
  <div class="container footer">
    <div class="options" style="display: block; visibility: visible;">
    <a href="http://www.wikidot.com/doc" id="wikidot-help-button">Help</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:terms-of-service" id="wikidot-tos-button">Terms of Service</a>
    &nbsp;|
    <a href="http://www.wikidot.com/legal:privacy-policy" id="wikidot-privacy-button">Privacy</a>
    &nbsp;|
    <a href="javascript:;" id="bug-report-button" onclick="WIKIDOT.page.listeners.pageBugReport(event)">Report a bug</a>
    &nbsp;|
    <a href="javascript:;" id="abuse-report-button" onclick="WIKIDOT.page.listeners.flagPageObjectionable(event)">Flag as objectionable</a>
    <span id="consent-box" style="display:none">
        &nbsp;|
        <a href="javascript:;"  onclick="window.__cmp('showModal');">Update cookie settings</a>
    </span>

    <script>
    if (window["nitroAds"] && window["nitroAds"].loaded) {
        document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none";
        } else {
        document.addEventListener(
                "nitroAds.loaded",
                () =>
                (document.getElementById("consent-box").style.display = window["__tcfapi"] ? "" : "none")
                );
    }
    </script>
</div>
Powered by <a href="http://www.wikidot.com">Wikidot.com</a>
    <div class="license-area">Unless otherwise stated, the content of this page is licensed under <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a></div>
  </div>
  <div class="extrac-div-1"><span></span></div>
  <div class="extrac-div-2"><span></span></div>
  <div class="extrac-div-3"><span></span></div>
</footer>
 

</div> <!-- container-wrap -->
 
<div class="extra-div-1"><span></span></div>
<div class="extra-div-2"><span></span></div>
<div class="extra-div-3"><span></span></div>
<div class="extra-div-4"><span></span></div>
<div class="extra-div-5"><span></span></div>
<div class="extra-div-6"><span></span></div>
</div> <!-- container-wrap-wrap -->
</div>
<div id="dummy-ondomready-block" style="display: none;" ></div>
    <!-- Google Analytics load -->
    <script type="text/javascript">
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>




<div id="page-options-bottom-tips" style="display: none;">
    <div id="edit-button-hovertip">
        Click here to edit contents of this page.    </div>
</div>
<div id="page-options-bottom-2-tips"  style="display: none;">
    <div id="edit-sections-button-hovertip">
        Click here to toggle editing of individual sections of the page (if possible).         Watch headings for an &quot;edit&quot; link when available.    </div>
    <div id="edit-append-button-hovertip">
        Append content without editing the whole page source.    </div>
    <div id="history-button-hovertip">
        Check out how this page has evolved in the past.    </div>
    <div id="discuss-button-hovertip">
        If you want to discuss contents of this page - this is the easiest way to do it.    </div>
    <div id="files-button-hovertip">
        View and manage file attachments for this page.    </div>
    <div id="site-tools-button-hovertip">
        A few useful tools to manage this Site.    </div>
    <div id="backlinks-button-hovertip">
        See pages that link to and include this page.    </div>
    <div id="rename-move-button-hovertip">
        Change the name (also URL address, possibly the category) of the page.    </div>
    <div id="view-source-button-hovertip">
        View wiki source for this page without editing.    </div>
    <div id="parent-page-button-hovertip">  
        View/set parent page (used for creating breadcrumbs and structured layout).    </div>
            <div id="abuse-report-button-hovertip">
            Notify administrators if there is objectionable content in this page.        </div>
        <div id="bug-report-button-hovertip">
            Something does not work as expected? Find out what you can do.        </div>
        <div id="wikidot-help-button-hovertip">
            General Wikidot.com documentation and help section.        </div>
        <div id="wikidot-tos-button-hovertip">
            Wikidot.com Terms of Service - what you can, what you should not etc.        </div>
        <div id="wikidot-privacy-button-hovertip">
            Wikidot.com Privacy Policy.          
        </div>
    </div>
</body>
</html>