Replace New Topic and New Poll with an image?

[samborabora]

I've been hunting around trying to find the actual code that takes care of presenting those css spans for 'New Topic' and 'New Poll' buttons on message index. I'd like to replace both of these text buttons with an image. What is the easiest way to do this?

[Antechinus]

Why? What happens if someone is browsing with images disabled? What if they want a bigger text? Image buttons are generally a bad idea.

However, if you want to do it you'd have to define your own CSS. Use the inspect element function of your browser to get the relevant class for each button. For example, the new topic button is class="button_strip_new_topic".

[samborabora]

Yes, but the New Topic class is assigned to an <a href> and everything seems to be hidden in arrays that I cannot find anywhere. If I knew where exactly the link was being generated from, I could wrap the link around a div and use a background image on that, or I could just use an <img>, but I don't know which file is controlling the actual creation of the New Topic/New Poll array.

[Antechinus]

Why would you need to pig around in arrays? Just style the anchor directly. You can do anything you like with it. No need for a div. Why do people think everything has to be wrapped in a div before you can use it?

You also have two pseudo elements you can play with on any anchor, if you really want to go to town. You can style that sucker up to the max if you want to.

ETA: Oh and of course with the default 2.0.x markup that anchor has a grotty old span inside it (2.0.x is infested with spans like a camel is infested with fleas) so that's another element you can style. So that's four already. Go for it.

ETA again: Oh yeah and you also have two pseudos on the grotty old span, so that gives you six elements you can style. How many do you need?

[samborabora]

Why would you need to pig around in arrays? Just style the anchor directly. You can do anything you like with it. No need for a div. Why do people think everything has to be wrapped in a div before you can use it?

You also have two pseudo elements you can play with on any anchor, if you really want to go to town. You can style that sucker up to the max if you want to.

ETA: Oh and of course with the default 2.0.x markup that anchor has a grotty old span inside it (2.0.x is infested with spans like a camel is infested with fleas) so that's another element you can style. So that's four already. Go for it.

ETA again: Oh yeah and you also have two pseudos on the grotty old span, so that gives you six elements you can style. How many do you need?

Okay, easy enough, there's plenty of definition for these buttons, and yes, removing background-image after background-image and background-color after background-color for .buttonlist ul li a.active span and  .buttonlist ul li a span and .buttonlist ul li a works, but then that screws up other buttons around the site that also rely on the buttonlist class. At the moment, I'm trying to see if I can wrap just the New Topic and New Poll buttons and create a pseudo-class that will have no background-images or colors, with an !important to override, but this could be a really fussy way of doing it? I really have no idea what otehr option I'd have at this stage, since all of the normal buttons seem to be generated automatically.

[Antechinus]

Leave .buttonlist alone so the rest of the buttons are taken care of. Don't worry about !important (most people think its some sort of magic wand but it should rarely, if ever, be required).

Just set up whatever styles you want for the two buttons in question, and put them after the standard buttonlist declarations. Example:

Code Select Expand

.button_strip_new_topic {padding: 0; background: none;}
.button_strip_new_topic>span {padding: 0; height: whatever; width: whatever; background: url(../images/mylittlebrony.png) no-repeat; text-indent: -999em;}

That should work. If it doesn't, make it a bit more specific by using a.button_strip_new_topic or even a.button_strip_new_topic:link, a.button_strip_new_topic:visited if it really needs that.

[samborabora]

Leave .buttonlist alone so the rest of the buttons are taken care of. Don't worry about !important (most people think its some sort of magic wand but it should rarely, if ever, be required).

Just set up whatever styles you want for the two buttons in question, and put them after the standard buttonlist declarations. Example:

Code Select Expand

.button_strip_new_topic {padding: 0; background: none;}
.button_strip_new_topic>span {padding: 0; height: whatever; width: whatever; background: url(../images/mylittlebrony.png) no-repeat; text-indent: -999em;}

That should work. If it doesn't, make it a bit more specific by using a.button_strip_new_topic or even a.button_strip_new_topic:link, a.button_strip_new_topic:visited if it really needs that.

I was trying with parent child selectors, but there's still some backgrounds that need stripping, namely:

Code Select Expand

.buttonlist ul li a.active

Code Select Expand

.buttonlist ul li a

Code Select Expand

.buttonlist ul li a.active span

Code Select Expand

.buttonlist ul li a span

I just can't seem to get rid of these backgrounds, other than actually removing the code, which I don't want to do otherwise it'll screw up other buttons.

[samborabora]

Well, after a ridiculous session of !importanting (I know, I know, lazy, but effective) almost everything, I got this to work. If you can spot something that's redundant or just plain useless, let me know, and I'll update this and consider it closed. Seemingly, it's quite a popular question given the immense amount of views it's accumulated!

Code Select Expand

a.button_strip_new_topic.active {background: url(../images/theme/button_new_topic.png) !important; padding: 0; margin: 0; width: 79px !important; height: 26px !important;}
.button_strip_new_topic {padding: 0; margin: 0; background: none;}
.button_strip_new_topic>span {padding: 0; background: none !important; text-indent: 100%; white-space: nowrap; overflow: hidden;}
.button_strip_new_topic>buttonlist {background: none !important;}
ul li>.button_strip_new_topic {background: none !important;}

[Antechinus]

Ok, I'll take a look at it on local and see what I can come up with. It shouldn't be difficult, but I admit I haven't actually tried it yet.

[Antechinus]

Meh. This sort of crud is why I went on a mission to clean up 2.0.x markup and CSS. If I'm going to do any custom theming for 2.0.x, I want a clean base to work from.

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:

Code (Find:) Select Expand

/* 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:

Code (Replace:) Select Expand

/* 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:

Code (Add after:) Select Expand

.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.

[samborabora]

Wow. All I can say is, wow. This was a 5 minute implementation my end and it works first time. You've outdone yourself here, absolutely perfect, thanks so much, Antechinus, I know ALOT of people are going to be pleased with this, thanks ever so much!!