The problem here, as in other places, is partially that the default CSS is overly specific, and also that it contains confusing crud that is unnecessary and/or leftovers from early beta (when the current theme didn't even exist).
Being overly specific makes custom changes more difficult, and in this case does nothing to make the selectors more efficient. The best solution is to clean up the default CSS to just have what it needs, then add the extra bits you want. This is only a ten second job anyway, so might as well do it. 
So, start with the standard pile of wombat droppings:
/* Styles for the standard button lists.
------------------------------------------------------- */.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
display: block;
font-size: 0.8em;
color: #000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
.buttonlist ul li a:hover
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
.buttonlist ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
.buttonlist ul li a:hover span
{
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
.buttonlist ul li a.active
{
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
.buttonlist ul li a.active span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
.buttonlist ul li a.active
{
font-weight: bold;
}
.buttonlist ul li a.active:hover
{
color: #ddf;
}
.align_top ul li a, .align_bottom ul li a
{
margin: 0 12px 0 0;
}
Change that to something that wont make Baby Jesus cry, but will do exactly the same job:
/* Styles for the standard button lists.
------------------------------------------------------- */.buttonlist ul {
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist li {
list-style: none;
float: left;
}
.buttonlist a {
display: block;
font-size: 0.8em;
color: #000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
.buttonlist a:hover {
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
.buttonlist span {
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
.buttonlist a:hover span {
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
.buttonlist a.active {
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
.buttonlist a.active span {
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
.buttonlist a.active:hover {
color: #ddf;
}
Now all you need to do is add the stuff for your custom button:
.buttonlist .button_strip_new_topic.active {
background: none;
padding: 0;
}
.buttonlist .button_strip_new_topic.active span {
background: url(../images/theme/button_new_topic.png);
padding: 0;
width: 79px;
height: 26px;
text-indent: 100%;
overflow: hidden;
}Setting the dimensions on the span makes more sense (I had forgotten about the spans when I posted the first lot of code, because I removed them from my stuff). All the anchor needs is no background or padding.
0 commentaires:
Enregistrer un commentaire