CustomizedCSS
Back to current versionRestore this version
Sections of this page are used on other pages. We have commented the sections so you know which pages to fix if you change the sectioning on this page.
C ustomized CSS
CSS we've added.
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#

Jesus Bible Songs

/* 1. LOGO STYLING */ a.logo { background:transparent; border:none; text-indent:-99em; } a.logo b:before { content:""; } a.logo { background: url(owls.png); 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 (Fixes Issue 2 & 3) */ :root, html, body { color-scheme: dark !important; background-color: #1a1a1a !important; } body, .page, #pagecontent, .left-menu, #leftmenu { background-color: #1a1a1a !important; color: #f0f0f0 !important; border: none !important; }

/* 3. THE "J" (DROPCAPS) AND TITLE FIX (Fixes Issue 1) */ .dropcaps { color: #87ceeb !important; /* Sky Blue */ display: inline-block !important; opacity: 1 !important; } .lead { color: #f0f0f0 !important; /* The rest of the title */ }

/* 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 (Fixes Issue 4) */

  1. 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.

This is just some %%handwritten "Indie Flower" font sample.
[#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.