Show / Hide Modules and Right / Left Columns with Saved State
See the menus over on http://TikiMODS.com for an example. There you can also see an implementation of using the same icons to "shade" entire modules, as well as "flip" the entire left and right columns, all with saved states. Colorado used only what is already in tiki-js.js for 1.8.x, while mdavey made some minor enhancements to tiki-js.js for v1.9 to enable Theme creators to override the default shade icon.
Table of contents
In Tiki 1.9
[-]
To enable shading for all modules, goto Admin->Features and select "Users can Shade Modules: always", and save your changes. See UsersShadeModules for more details.
To enable shading for an individual module, goto Admin->Features and select "Users can Shade Modules: module decides", and save your changes. Goto Admin->Modules and put "flip=y" (without the quotes) into the parameters for that module, and save your changes. See Modules Admin for more details.
To enable flipping of left and right columns, goto Admin->Features and select "Left column: user decides" and "Right column: user decides", and save your changes. See UsersFlipColumns for more details.
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. See Modules Admin for more details.
Theme designers please see ReleaseProcess19 and CssStylesDev for details of the new CSS entries that need to be added to your themes. You'll find default implementations in styles/transitions/1.8to1.9.css.
--
mdavey
In Tiki 1.8.x
[-]
Modules
[-]
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:
-- colorado
Stylesheet
[-]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
How to Show/Hide entire right and left columns
[-]
Discussion/Participation
[-]
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 Connecting To IRC 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
The following styles override tiki.tpl and won't have flip left/right modules (flip entire left/right columns) when mdavey commits:
- blank
- codex
- damian
- moreneat
- mose
- neat
- notheme
- simple
- smartiki
- tiki
- tikigod
- kuro
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 Connecting To IRC and mention it there.
- Colorado - did all the hard work of figuring out how to do it, and using http://TikiMODS.com as a prooving ground.
- mdavey added some bugs and committed an enhancement for shaded modules based on colorado's work, for v1.9!