[{ALLOW view All}]
[{ALLOW edit Editors}]

%%hide
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. 
/%


%%text-success 
%%dropcaps
C %%lead __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. 
[{TableOfContents}]

!!!Owls' Colors
* #74b63d is owls' green

!!! Site Logo


[{Image src='owls.png'}]


{{{
%%add-css
/* hide the default jspwiki logo */
a.logo { background:transparent; border:none; text-indent:-99em; }
a.logo b:before { content:""; }
/%
}}}
%%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);
}
/%
}}}
%%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);
}
/%

[{SET page-styles='prettify'}]
This is an example page, using alternative fonts loaded from [Google's fonts repository|https://www.google.com/fonts].

----

%%add-css
/* 1. Force Browser Dark Mode */
:root, html, body {
    color-scheme: dark !important;
}

/* 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. 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); }

/* 5. THE MOBILE-READY TABLE FIX */
/* This forces every single table cell and row to be dark, overriding mobile defaults */
table, .table, tr, td, th {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #333 !important;
}

/* This targets the specific 'Zebra' stripes by targeting the cells directly */
.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: #222222 !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.

%%quote
%%handwritten  
This is just some %%text-primary %~%handwritten /% "Indie Flower" font sample. 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|https://jspwiki-wiki.apache.org/Wiki.jsp?page=Add%20CSS%20Style|target='_blank'] for more info.