Loading...
 

ShowHideModulesAndColumns

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.

Note: the term shading specifically describes showing/hiding the contents of a pane, such as a swndow or module, while keeping the title bar visible, while the more generic term flip describes showing/hiding content in general, including help text and submenus.


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:

Image

-- colorado

Stylesheet

[-]

BELOW IS WHAT I HAVE IN MY STYLESHEETS FOR THE FLIPPING MODULES:

div.box {

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

[-]

Here's the <div id="tiki-mid"> section of my tiki.tpl template file.


Image

-- Colorado


Discussion/Participation

[-]

Show/Hide module contents


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 Willow'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

Show/Hide entire left/right columns


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 Willow'Connecting To IRC and mention it there.

TikiTeam
  • 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!


Page last modified on Friday 25 February 2005 22:27:55 GMT-0000

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.