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#
 |
%%add-css
/* hide the default jspwiki logo */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }
/%
%%add-css
/* put the clean-blue logo, attached to this page */
a.logo {
background: url([owls.png]);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 60px;
width: 120px;
/* add a fancy button like effect */
box-shadow:0 0 .25em white;
border-radius:2em;
background-color: rgba(255,255,255,0.15);
}
/%
);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 60px;
width: 120px;
/* add a fancy button like effect */ box-shadow:0 0 .25em white; border-radius:2em; background-color: rgba(255,255,255,0.15); }
This is an example page, using alternative fonts loaded from Google's fonts repository
.
/* 2. Load Custom 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);
/* 3. Global Styles & Backgrounds */ body, .page, #pagecontent { background-color: #1a1a1a !important; color: #f0f0f0 !important; }
/* 4. Issue 2: Left Menu - Blend into background */ .left-menu { background-color: #1a1a1a !important; border: none !important; }
/* 5. Font Assignments */ 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); }
/* 6. Issue 1: "J" Visibility */ /* Target the title specifically to make sure it is light blue */ h1.pagename, .h1.pagename { color: #87ceeb !important; }
/* Ensure the large dropcap "J" is readable on a dark background */ .dropcap, .h1.pagename span { color: #f0f0f0 !important; }
/* 7. Issue 4: Image Correction */ /* Target our custom image ID to make sure it displays correctly */
- owls-logo img { max-width: 100%; /* Ensures it scales on mobile */ height: auto; display: block; margin: 10px auto; /* Centers the image and adds some space */ border-radius: 8px; /* Optional: adds a nice soft corner */
/* 8. Table/Zebra Fix */ table, .table, tr, td, th { background-color: #1a1a1a !important; color: #f0f0f0 !important; border-color: #333 !important; }
/* LIGHTER GREY STRIPE: #333333 */ .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; }
/* 9. Link Visibility */ a, a:link, a:visited { color: #87ceeb !important; text-decoration: none; }
/* 10. Input box adjustment for Mobile */ input, .filter, #filter { background-color: #333 !important; color: #fff !important; border: 1px solid #555 !important; padding: 5px; }
/* LIGHTER GREY STRIPE: Changed from #222 to #333 */ .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. Link Visibility */ a, a:link, a:visited { color: #87ceeb !important; text-decoration: none; }
/* 7. Input box adjustment for Mobile */ input, .filter, #filter { background-color: #333 !important; color: #fff !important; border: 1px solid #555 !important; padding: 5px; } /%
Header in Orbitorn font#
Title#
Sub-Title#
This is just some sample in the default template font. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
[#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.
 |