Table of contents
If you want to expand the width of the navigation pane, you will first need to tell the API to stop truncating text. You can add a high value into LocalSettings.php which determines the text cut-off:
$wgNavPaneWidth = 50000; //experiment with this number
Having the text wrap
In Ace, make sure the CSS classes in _struct.css match this:
#siteNavTree a {
color: #777;
border-bottom: 1px solid #CECAC3;
display: block;
text-decoration: none;
padding-right: 5px;
padding-left: 7px;
width: 163px;
font-size: 11px;
height: auto;
}
/* This class does not exist in _struct.css by default */
#siteNavTree div.node a span {
padding: 0 16px;
display: block;
}
In Fiesta, CSS in _common.css must be over ridden with your skin's style.css. Several settings have explicit height values that need to be changed to auto. Also your skin's style.css will probably have some background images that are being used for each type of node (docked, selected, etc.). I recommend replacing the images with a simple background color. Open your style.css, find the /*Navigation/* section, modify your node backgrounds to your preference, and enter the following text:
/*Navigation: mod for height:auto*/
html body div.header div.siteNav #siteNavTree a,
html body div.header div.siteNav #siteNavTree div.selected,
html body div.header div.siteNav #siteNavTree div.selectedChild,
html body div.header div.siteNav #siteNavTree div.selectedChild a,
html body div.header div.siteNav #siteNavTree div.childNode,
html body div.header div.siteNav #siteNavTree div.sibling,
html body div.header div.siteNav #siteNavTree div.dockedNode,
html body div.header div.siteNav #siteNavTree div.homeNode,
html body div.header div.siteNav #siteNavTree div.homeNode a {
height:auto;
}
- Tag page
- What links here
Edit: made some changes to the technique to fit the "skinning" approach instead of stomping on the whole Fiesta skin. Also covered some info about the background images since I forgot to mention that. edited 01:42, 24 Jun 2008