Frederik Dohr a écrit :
Hello all,
We're having a little trouble with our (minor) CSS modifications of the
default Monobook skin.
The goal is to reduce the page's size to 90% and center it horizontally
(so there's a small margin or gap on each side).
for the 90% : in main.css change this :
/* scale back up to a sane default */
#globalWrapper {
font-size: 127%;
width: 90%;
margin: 0 auto;
padding: 0;
}
for the tabs : in monobook.php, add a wrapper <div
id="p-cactions-wrapper"> inside p-cactions (and its </div> at the end)
<div id="p-cactions" class="portlet">
<div id="p-cactions-wrapper">
<h5><?php $this->msg('views') ?></h5>
<div class="pBody">
<ul>
<?php foreach($this->data['content_actions'] as $key => $tab) { ?>
<li id="ca-<?php echo Sanitizer::escapeId($key) ?>"<?php
if($tab['class']) { ?> class="<?php echo
htmlspecialchars($tab['class']) ?>"<?php }
?>><a href="<?php echo htmlspecialchars($tab['href'])
?>"<?php echo $skin->tooltipAndAccesskey('ca-'.$key)
?>><?php
echo htmlspecialchars($tab['text']) ?></a></li>
<?php } ?>
</ul>
</div>
</div>
</div>
then in main.css
#p-cactions {
position: absolute;
top: 1.3em;
/*left: 11.5em;*/
margin: 0 auto;/*auto is for left-right centering*/
white-space: nowrap;
width: 90%;/*76%;*/
line-height: 1.1em;
overflow: visible;
background: none;
border-collapse: collapse;
padding-left: 0;/*1em;*/
list-style: none;
font-size: 95%;
}
and
#p-cactions-wrapper {
margin-left: 12.2em;
}
you'll have to do the same for the logo and the personnal tools blocks, moreover there
might be a cleaner way to do this (without changing php code)
While this works fine in Firefox, we just can't get it to work in IE6;
the sidebar is stuck at the window's left side, and the tabs at the top
are misaligned as well.
Speaking of tabs: There's a tiny (1px) gap between inactive tabs and the
content area in IE (in the default skin, not related to our
modifications), which becomes very visible when changing the page's
background color. Unfortunately, we have not been able to fix this either.
Does anyone have some experience with such issues?
Yes
I'd greatly appreciate some tips!
I think (it was months ago) I had to change the skins/monobook/IE##Fixes.css file for each
version ## of IE (at least for the 1px issue : it's because IE doesn't understand
margin and padding properties the same way as other browsers do)
using those dedicated css, you can correct all IE bugs
e.g. for IE60Fixes.css : change
#p-cactions li a {
display: inline-block !important;
vertical-align: top;
padding-bottom: 1px;//this is the pixel you were missing
border: solid #aaa;
border-width: 1px 1px 0;
}
#p-cactions li.selected a {
border-color: #fabd23;
padding-bottom: 0.17em !important;//!important is to ignore (for the selected tab) the
pixel you added above
}