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#
 |
a.logo {
background: url();
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. FORCE DARK MODE & BACKGROUNDS */ :root, html, body { color-scheme: dark !important; background-color: #1a1a1a !important; }
body, .page, #pagecontent, .left-menu { background-color: #1a1a1a !important; color: #f0f0f0 !important; border: none !important; }
/* 3. FONTS & TITLES */ @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); }
/* Make the rest of the title blue so we can see the contrast */ h1.pagename, .pagename { color: #87ceeb !important; }
/* 4. TABLES & ZEBRA STRIPES */ table, .table, tr, td, th { background-color: #1a1a1a !important; color: #f0f0f0 !important; border-color: #333 !important; }
/* Light Grey Stripe for Mobile/Web */ .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; }
/* 5. LINKS & INTERACTION */ a, a:link, a:visited { color: #87ceeb !important; text-decoration: none; }
/* 6. INPUTS & SEARCH BOX */ input, .filter, #filter { background-color: #333 !important; color: #fff !important; border: 1px solid #555 !important; padding: 5px; }
/* 7. IMAGE STYLING */
- owls-logo img { 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.
