We have placed our CSS additions on this page rather than in LeftMenu[1] and then have included it on the LeftMenu with:
%%add-css [CustomizedCSS] /%
This allows us to document what we have done.
Table of Contents
Owls' Colors#
- #74b63d is owls' green
Site Logo#
 |
);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 60px;
width: 120px;
box-shadow: 0 0 .25em white;
border-radius: 2em;
background-color: rgba(255,255,255,0.15);
}
/* 2. THE ULTIMATE BACKGROUND & SIDEBAR GAP FIX */ /* This targets the 'foundation' of the browser */ html, body { background-color: #1a1a1a !important; color-scheme: dark !important; }
/* Target all containers AND their hidden 'before' layers (the white gap culprit) */
- wrap, .main, .wikibody, #pagecontent, .page, .container, .row, .footer,
/* 3. THE "J" (DROPCAPS) AND TITLE FIX */ .dropcaps, .dropcap { color: #87ceeb !important; display: inline-block !important; opacity: 1 !important; } .lead { color: #f0f0f0 !important; }
/* 4. FONTS */ @import url(https://fonts.googleapis.com/css?family=Orbitron); @import url(https://fonts.googleapis.com/css?family=Indie+Flower); @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro); @import url(https://fonts.googleapis.com/css?family=Great+Vibes);
pre, tt { font-family: "Source Code Pro"; font-size: 66%; } .handwritten { font-family: "Indie Flower"; font-size: 110%; } .pagename, h2 { font-family: "Orbitron"; } h3, h4 { font-family: "Great Vibes"; color: rgb(232, 48, 79); }
/* 5. TABLES & ZEBRA STRIPES */ table, .table, tr, td, th { background-color: #1a1a1a !important; color: #f0f0f0 !important; border-color: #333 !important; } .table-striped > tbody > tr:nth-of-type(odd) > td, .table-striped > tbody > tr:nth-of-type(odd) > th, tr.odd td, td.odd { background-color: #333333 !important; }
/* 6. LINKS & BUTTONS */ a, a:link, a:visited { color: #87ceeb !important; text-decoration: none; }
/* 7. INPUTS & SEARCH */ input, .filter, #filter { background-color: #333 !important; color: #fff !important; border: 1px solid #555 !important; padding: 5px; }
/* 8. IMAGE STYLING */
- owls-logo img, imgsrc*='guitarBibleLgr' { max-width: 100%; height: auto; display: block; margin: 10px auto; border-radius: 8px;
This is an example page, using alternative fonts loaded from Google's fonts repository
.
Header in Orbitron font#
Title#
Sub-Title#
This is just some sample in the default template font.
[#1] CSS that is put in the LeftMenu page are propagated to all the pages of your site. See LeftPage on this JSPWiki Doc
for more info.
