Creating CSS Buttons

[James Gryphon]

The SMF version is 2.0.12; I'm using an extensively modified Core variant.

I hate to always be here begging for somebody that knows better than me to do something, but I wouldn't do it if I wasn't desperate. I've spent days on this and haven't made much of any progress; in fact, I think I've actually broken things that I had working, earlier today. I'm starting to get disproportionately ticked over it and don't have anything to show for it, so I thought I'd drop in here on the off chance that it might be helpful.

I decided to try to change the buttons in my extensively changed Core variant to something that resembles the buttons from YaBB SE. I managed to get the basic look and functionality to work, but I've had constant trouble trying to get the icons to display properly, from the very beginning.

From what I can tell, there are two sets of smaller buttons, ul.quickbuttons and ul.postingbuttons. I've changed them from Core like so:

Code Select Expand

/* a smaller quick-button list */
ul.quickbuttons
{
   margin: 0.9em 11px 0 0;
   clear: right;
   float: right;
   text-align: right;
   font: 11px tahoma, sans-serif;
   text-transform: lowercase;
}
ul.quickbuttons li
{
   float: left;
   display: inline;
   margin: 0 0 0 11px;
}
ul.quickbuttons li a
{
background-color: #E8E8E8;
    border-radius: 5px;
    border: 1px solid #005A8C;
   display: block;
   height: 15px;
/*   left: -4px; */
   line-height: 15px;
   padding-left: 20px;
   padding-right: 4px;
position: relative;
}
ul.quickbuttons a
{
   color: #000;
}
ul.quickbuttons a:hover
{
   text-decoration: none;
}

Code Select Expand

ul.postingbuttons
{
   margin: 0.9em 11px 0 0;
   clear: right;
   float: right;
   text-align: right;
font: 11px tahoma, sans-serif;
   text-transform: lowercase;
}
ul.postingbuttons li
{
   float: left;
   display: inline;
   margin: 0 0 0 11px;
}
ul.postingbuttons li a
{
background-color: #E8E8E8;
    border-radius: 5px;
    border: 1px solid #005A8C;
   display: block;
   height: 15px;
/*   left: -4px; */
   line-height: 15px;
   padding-left: 5px;
   padding-right: 4px;
}
ul.postingbuttons a
{
   color: #000;
}
ul.postingbuttons a:hover
{
   text-decoration: none;
}
ul.postingbuttons li.inline_mod_check
{
   margin: 0 0 0 5px;
}


The buttons show up fine. The trouble is that the icons don't work properly. What's bizarre to me is that it works improperly differently. For the quickbuttons (which show up, for example, when you're replying to a post, or looking at your posts in "Profile"), the E8E8E8 background covers the icons. For the postingbuttons (which show up when you're reading a topic), the button borders cut off the bottoms of the icons, except when it's your post. It seems like I managed to get the latter working properly at some point, but as of tonight, it's broken, and I have no idea why. The former, however, have never worked.

I thought I'd analyze the code in the "Classic YaBB 2.0" theme (which does this) to figure out how it does it, but the code is very different and I wouldn't even know where to begin to do a proper job of ripping it off.

Pictures available on request.

[Antechinus]

For the quickbuttons (which show up, for example, when you're replying to a post, or looking at your posts in "Profile"), the E8E8E8 background covers the icons.

That makes sense. The icon is set on the li. You have the #e8e8e8 set on the anchor inside the li. That is higher up the z-index stack, so it covers the icon. One way around it would be to put the background colour (and any other styling) on the li instead, and just use the anchor to hold the actual link and text.

Another option would be to change the CSS so the background images for the icons are on the anchor. Either way should work.

For the postingbuttons (which show up when you're reading a topic), the button borders cut off the bottoms of the icons...

You have a fixed height of 15px. Get rid of that, then see how it looks.

[James Gryphon]

That makes sense. The icon is set on the li. You have the #e8e8e8 set on the anchor inside the li. That is higher up the z-index stack, so it covers the icon. One way around it would be to put the background colour (and any other styling) on the li instead, and just use the anchor to hold the actual link and text.

When I try that, the button background disappears altogether (I think it's being overridden by the icons, which in Core use "background-image"), leaving icons inside a transparent, bordered button.

Another option would be to change the CSS so the background images for the icons are on the anchor. Either way should work.

The code that reads the CSS looks for those graphics at specifically at li, though, and I'm not sure how to change the php files to place them at li a.

For the postingbuttons (which show up when you're reading a topic), the button borders cut off the bottoms of the icons...

You have a fixed height of 15px. Get rid of that, then see how it looks.

It stops cutting the icons off, but it makes the button significantly taller, to completely surround the icon.

Incidentally, for some reason, using the code I have above, it now works in every browser I have except Opera, where it still cuts it off (unless it's in my posts, where it displays as it ought to).

[Antechinus]

When I try that, the button background disappears altogether (I think it's being overridden by the icons, which in Core use "background-image"), leaving icons inside a transparent, bordered button.

Shouldn't do that if the CSS is done correctly. It won't be overridden by background-image. Background-color is compatible with any other background declaration.

The code that reads the CSS looks for those graphics at specifically at li, though, and I'm not sure how to change the php files to place them at li a.

You don't need to change the PHP, just the CSS.

It stops cutting the icons off, but it makes the button significantly taller, to completely surround the icon.

So your icon is too large for the button size you want. You need smaller icons or bigger buttons. Take your pick.

[James Gryphon]

Shouldn't do that if the CSS is done correctly.

The fact that ideally it shouldn't doesn't help the reality that it does.

Code Select Expand

ul.quickbuttons li.quote_button
{
   background: url(../images/buttons/quote.gif) no-repeat 0 0;
}
By inserting #fff before the url, we get a button with a white background; otherwise, it's transparent and shows the page's default background, not the background-color set at li.

You don't need to change the PHP, just the CSS.

Well, how would you change the buttons (as shown in the code above) to do this? When I added an 'a' after li, the icon simply disappeared.

[Illori]

the core theme does things differently from the curve theme especially with these buttons, that may be part of the issue. i dont know if Antechinus is looking at the code for the core theme or not, but i know it will require different code to change those buttons then the curve theme does.

[Antechinus]

Shouldn't do that if the CSS is done correctly.

The fact that ideally it shouldn't doesn't help the reality that it does.

Code Select Expand

ul.quickbuttons li.quote_button
{
   background: url(../images/buttons/quote.gif) no-repeat 0 0;
}
By inserting #fff before the url, we get a button with a white background; otherwise, it's transparent and shows the page's default background, not the background-color set at li.

Yes, it would. The shorthand background declaration there deals with all background attributes, and since it is after the general declaration for li it would override any background-color declaration set there (the order of declarations matters in CSS).

In effect, if no background colour is declared there the shorthand declaration applies a transparent background without telling you. You also have the fact that the latter declaration is more specific (li and class) giving it higher priority anyway. IOW, basic CSS cascade behaving as it should.

https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Have a quick read through those, then see if you can figure out how to fix your problem. If you're still stuck with the code, just ask again.

You don't need to change the PHP, just the CSS.

Well, how would you change the buttons (as shown in the code above) to do this? When I added an 'a' after li, the icon simply disappeared.

Not exactly sure where you are adding it. If you mean you just threw an a at the general declaration for li then sure, that wouldn't work. OTOH this should work:

Code Select Expand

ul.quickbuttons li.quote_button a
{
   background: url(../images/buttons/quote.gif) no-repeat 0 0;
}

the core theme does things differently from the curve theme especially with these buttons, that may be part of the issue. i dont know if Antechinus is looking at the code for the core theme or not, but i know it will require different code to change those buttons then the curve theme does.

The code for the quickbuttons is essentially the same in both themes.

[Illori]

The code for the quickbuttons is essentially the same in both themes.

you sure? last time someone asked about this in the core theme, i ended up finding the fix in Subs.php rather then display.template.php as it is different.

[Antechinus]

Well, the code in Display.template.php is basically the same in both themes. I haven't looked in Sources.

[James Gryphon]

I made some progress with this; I'm going to be going out of town today, so I won't be available to respond or ask questions until I'm back on Friday, but here's the current 'state of the Union', as it were.

I've managed to fix or identify both of the problems I identified earlier, the color difficulty with quickbuttons and the border error with the postingbuttons. In the latter case, it turned out that this only happens when the window isn't wide enough to compensate for the layout. I'll want to make some changes so that it adjusts more gracefully, but I don't think it's a showstopper.

In the case of the quickbuttons, I moved most of the stuff in li a to li, and changed the icons to background-images like so:

Code Select Expand

ul.quickbuttons li.notify_button
{
   background-image: url(../images/buttons/notify_sm.gif);
background-repeat: no-repeat;
}
The next big problem to fix is going to be setting up the icons so that they show up at the right positions relative to the rest of the button. I will probably have to end up begging for help on that as well, but I'd like to take some time to study the YaBB next gen theme and try to decipher it before I resort to that.

[Antechinus]

It's not that difficult. Basically you just use left padding (adjust to suit) to inset the text clear of the icon. The positioning of the icon itself can be changed by background-position.

The default is 0 0. This code:

Code Select Expand

ul.quickbuttons li.notify_button
{
   background-image: url(../images/buttons/notify_sm.gif);
   background-repeat: no-repeat;
}

is effectively the same as this:

Code Select Expand

ul.quickbuttons li.notify_button
{
   background-image: url(../images/buttons/notify_sm.gif);
   background-repeat: no-repeat;
   background-position: 0 0;
}

If you change it to this:

Code Select Expand

ul.quickbuttons li.notify_button
{
   background-image: url(../images/buttons/notify_sm.gif);
   background-repeat: no-repeat;
   background-position: 10px 10px;
}

the icon will be shunted 10px down and 10px to the right. If you change it to this:

Code Select Expand

ul.quickbuttons li.notify_button
{
   background-image: url(../images/buttons/notify_sm.gif);
   background-repeat: no-repeat;
   background-position: -10px -10px;
}

the icon will be moved 10px up and 10px to the left.

You can also set positioning in em if you like, which can be handy sometimes (If employed correctly, it can help to stabilise icon positioning when different users have a range of text sizes set in their browsers).