OwlsSite: CustomizedCSS

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.

Owls' Colors
Site Logo
Other

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:""; }
/%

/* hide the default jspwiki logo */ a.logo { background:transparent; border:none; text-indent:-99em; } a.logo b:before { content:""; }

%%add-css
/* set the logo, be sure to attach the logo 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);
}
/%

/* put the clean-blue logo, attached to this page */ a.logo { background: url(

); 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); }

Other#

Testing to see if we can get the full page background set. It doesn't work. Looks like the add-css works on the <body> and not the <html> which is what we need to change for the entire background. Leaving this as notes for now. ajp 8/2020

%%add-css
/* add a new %%greypage style */
.greypage {
  background-color: lightblue;
}
/%

/* add a new style */ .greypage { background-color: grey; min-height: 100vh; min-width: 100vw; width: 100%; }

[#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.

Table of Contents

Owls' Colors#

Site Logo#

Other#