Custom CSS


You can extend the Bootstrap CSS just like any other Wikidot theme.

Here are the few styles that have been added to this site so far.

css:Main

@import url('http://css.wikidot.com/cssnippet:better-code-blocks/code_');
/* Autumn Theme */
/* @import url("/css:autumn/code/1"); */
 
/* PaintStrap - Adobe Kuler ID 3103343 (brown tones) */
@import url("/css:3103343/code/1");
 
/* http://bootswatch.com/ - Cyborg Theme */
/* @import url("/css:bootswatch-cyborg/code/1"); */
 
/* http://bootswatch.com/ - Amelia Theme */
/* @import url("/css:bootswatch-amelia/code/1"); */
 
@import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");
 
@import url('http://css.wikidot.com/cssnippet:minimized-login-status/code_');
 
/* community bootstrap base */
@import url('http://css.wikidot.com/theme:community-bootstrap-base/code_');
 
/* ---------------------------------------------------------------------------------
    Enable this to allow sites to go full width on desktops
    --------------------------------------------------------------------------------
.container {
    max-width: 100%;
}
----------------------------------------------------------------------------------- */
 
.description-block{color:black}  /* added this for better readability */
 
.my-fluid-container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}
.printuser img.small {
    max-width: 33px; /* fixes the display of the user avatar */
}
/* added this class to center the site logo and other images */
.img-center {
    margin: 0 auto;
}
/* LoginStatus dropdown menu on top */
.dropdown-menu {
    z-index: 1001 /* was 1000, same as .navbar */
}
.bs-callout-danger {
    background-color: #FCF2F2;
    border-color: #DFB5B4;
}
.bs-callout-info {
    background-color: #F0F7FD;
    border-color: #D0E3F0;
}
.bs-callout {
    border-left: 5px solid #EEEEEE;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
}
.post-container {
    border-left: 5px solid #EEEEEE;
    margin: 20px 0;
    padding: 15px 30px 15px 15px;
    background-color: #F0F7FD;
    border-color: #D0E3F0;
}
#odialog-container {
    z-index: 1100; /* move shaded dialogs on top of everything */
}
.modal {
    /* display: block; (fix for page lock conflict?) */
    /* Kenneth: removed temporarily as it breaks modals */
}
 
/*  Login Status (Timothy Foster)
===================================*/
header .login-status ul li a:hover,
header .login-status ul li a:focus,
header .login-status ul li a:hover i,
header .login-status ul li a:focus i{
    color: #FFF;
}
/*===================================
                 End Login Status  */
 
/* Missing from bootstrap base.css */
iframe.html-block-iframe {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 100%;
}
 
#page-content .image-box{  border-color: #C7A685; }
#page-content .image-box .image-box-heading{
    background: #571300;
    color: #FEFCFC;
}
#page-content .image-box .image-box-link:hover{
    border-color: #712A00;
}
#page-content .image-box .image-box-caption{  color: #7D6A66; }
 
/* Breadcrumbs styling */
.breadcrumbs, .forum-breadcrumbs {
    margin: -15px 0 10px 0;
    font:italic bold 12px/20px Arial, sans-serif;
}
 
/* Page Tags Styling */
.page-tags {
    clear: both;
    margin: 10px 0 0;
    padding: 0 2px;
    text-align: left;
}
.page-tags a {
    margin: 0 3px;
}
.page-tags span {
    border-top: 1px solid #BBBBBB;
    font-size: 85%;
    padding-top: 2px;
}
.panel-primary .panel-title a {
    color: #712a00;
}
.panel-primary .panel-title a:hover {
    color: #888888;
}
/*
     Modal Optional Sizing
*/
/*  Added 18 Aug 2014 - Missing from Wikidot Bootstrap 3 base
===================================*/
@media (min-width: 768px) {
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
/*  End Modal Optional Sizing
===================================*/
 
/*  Added 30 Aug 2014 - Fade transition for carousel
Usage:
Add 'fader' class to carousel div.
[[div id="yourcarousel" class="carousel fader slide" data-interval="3000" data-ride="carousel"]]
=================================== */
.carousel.fader {
    overflow: hidden;
}
.carousel.fader .item {
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.carousel.fader .active.left, .carousel.fader .active.right {
    left:0;
    opacity:0;
    z-index:2;
}
.carousel.fader .next, .carousel.fader .prev {
    left:0;
    opacity:1;
    z-index:1;
}

Bootstrap-Base CSS

The Bootstrap base CSS that Wikidot adds is pretty minimal (which is a good thing!) For your reference, here is a copy…


Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License