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#
- #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
/* 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 NOT USED
box-shadow:0 0 .25em white;
border-radius:2em;
background-color: rgba(255,255,255,0.15); */
}
/%
/* put the logo, attached to this page */
a.logo {
background: url();
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 60px;
width: 120px;
);
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); */ }
Roll Box Left - %%rollboxleft#
Rock N Roll
%%add-css
/* add a new %~%rollboxleft style */
.rollboxleft { display:block; background: #5c95e0aa; width:50%; padding:1em; transition: all .2s ease-in-out; }
.rollboxleft:hover { transform: scale(1.5) rotate(-30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%
/* add a new %%rollboxleft style */
.rollboxleft { display:block; background: #5c95e0aa; width:50%; padding:1em; transition: all .2s ease-in-out; }
.rollboxleft:hover { transform: scale(1.5) rotate(-30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url(Textures/dotted-dark-pink-canvas-1200x1093.jpg
); }
); }
Roll Box Right - %%rollboxright#
Error: This rollboxright does not work on other pages. We need to look into this so we can learn the CSS better.
Roll Right
%%add-css
/* add a new %~%rollboxright style */
.rollboxright { display:block; background: lightgreen; width:50%; padding:1em; transition: all .2s ease-in-out; }
.rollboxright:hover { transform: scale(2) rotate(30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url([Textures/dotted-dark-pink-canvas-1200x1093.jpg]); }
/%
/* add a new %%rollboxright style */
.rollboxright { display:block; background: lightgreen; width:50%; padding:1em; transition: all .2s ease-in-out; }
.rollboxright:hover { transform: scale(2) rotate(30deg); }
/* change existing style of header & footer */
.header, .footer { background-image:url(Textures/dotted-dark-pink-canvas-1200x1093.jpg); }
); }
[#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.