History: ShowHideModulesAndColumns
Preview of version: 19
See the menus over on http://TikiMODS.com for an example. There you can also see an implementation of using the same icons to "flip" entire modules, as well as the entire left and right columns, all with saved states. I used only what is already in tiki-js.js.
Thanks to mdavey for finishing and committing this enhancement for v1.9!
To enable flip for an individual module, goto Admin->Modules and put "flip=y" (without the quotes) into the parameters for that module, and save your changes.
To display the module without the title bar and border for an individual module, goto Admin->Modules and put "decorations=n" (without the quotes) into the parameters for that module, and save your changes.
The following styles override one or more modules and don't currently have module shading (flip show/hide content):
- geo
- moreneat
- mose
- neat
- simple
- tiki
- damian
Please let mdavey know if you think one or more of these themes should be updated and he'll gladly make the changes. Alternatively you could pop into ConnectingToIrc and mention it there.
NOTE: Currently the method above does not collapse the menus completely - a certain amount of space is left between the module title bars that you can't remove by adjustments to the style sheets (at least I could not make it work). The method below DOES collapse the menus all the way, with no space between the menu titles when collapsed. Maybe mdavey or someone else can fix this? — Colorado -- Fixed
mdavey u rock! Now how about instead of just the little icon, make click anywhere in the title bar (or at least also clicking on the title text) flip the menu? (P.S. Love the "decorations" option!) — Colorado
making the text clickable would be problematic. Various modules use a link on the title already. Examples include last_modif_pages and user_bookmarks. Double-click the module's titlebar to show/hide module contents (I chose double-click to keep things consistent with Gnome/KDE) - mdavey
OK here is an example of a module. I used the Last Changes module because most of us use it on our sites. I also included some default input text and the Hot Key for quick focus using ALT-C:
BELOW IS WHAT I HAVE IN MY STYLESHEETS FOR THE FLIPPING MODULES:
overflow : hidden;
font-size : 10px;
text-align: left;
}
div.box-title {
background-image: url(blackdesk/menucap.png);
border: 0px;
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
width: 100%;
margin : 0px;
padding:5px 2px 6px 6px;
}
div.box-title table {
width: 100%;
}
div.box-data {
overflow: hidden;
color: white;
margin-left: 5px;
margin-right: 5px;
font-family: Verdana, Helvetica;
font-size: 10px;
width: 170px;
border-left : 1px solid #330099;
border-right : 1px solid #330099;
border-bottom : 1px solid #330099;
background-color: #000000;
}
.flipmodtitle {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.flipmodtitle a, .flipmodtitle:link, .flipmodtitle:active, .flipmodtitle:visited {
color: #FFFFFF;
font-size: 10px;
font-weight: bold;
text-decoration: none;
}
.flipmodtitle:hover {
color: #FFFFFF;
text-decoration: underline;
}
.flipmodimage {
border:0px;
float:right;
padding-right:10px;
margin-left:0px;
}
.flip-data {
overflow : hidden;
padding: 5px;
margin : 0px;
border-left : 1px solid #330099;
border-right : 1px solid #330099;
border-bottom : 1px solid #330099;
background-color: #000000;
-- colorado
Here's the <div id="tiki-mid"> section of my tiki.tpl template file.
— Colorado