TitleHover box buil in CSS
Date28-Nov-2005 23:18:52 EET
JSPWiki version2.2.33
Submitter84.172.229.9
Idea CategoryTemplateIdea
Reference
Idea StatusNewIdea
Test2

Uberschrift#

Tablellesashdf
Hi

for anyone doing an own template or just editing the style sheets, I created a hover box it's content is only visible when you point with your mouse on it. Unhovered you only see the title. It is totally build in CSS. I found that snipets on selfhtml.org.

Only add the following lines into your CSS file:


.hoverbox {
z-index:3;}

.hoverbox .hoverheader {
color:#fffffd;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
padding:5px;
border:1px solid black;}

.hoverbox .hoverheader:hover {
color:black;
background:#ddd8b7;
}

.hoverbox .hoverheader .hovertext {display:none;}

.hoverbox .hoverheader:hover .hovertext {
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
display:block;
padding:10px;}

You can use the styles in your page with the following lines

%%hoverbox
%%hoverheader
Box Title
%%hovertext
Box Content
%%%%%%

Hoverheader an hovertext can contain wiki syntax itself. So you can hide text you don't need that often.

Have fun with it.

JuergenK

Add new attachment

Only authorized users are allowed to upload new attachments.
« This page (revision-1) was last changed on 28-Nov-2005 23:18 by 84.172.229.9