Skip to main content ↑ ↓
Buttons with Icons Started by Ruth · · Read 14180 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Buttons with Icons

Reply #30 –

If I don't use float:left, I do not need padding-right, but margin-top or margin-bottom is not working and I can't  move the image exactly to the place on the button, where it should be. It looks a bit different without float.

Code: [Select]
.pagesection .buttonlist .button_strip_reply:before {
background-image: url(../images/theme/reply.gif);
background-repeat: no-repeat;
padding: 25px;
margin-left: -13px;
margin-right: -6px;
content: '';
}

Re: Buttons with Icons

Reply #31 –

Quote from: Ruth – I am not sure, if I understood your post about the class. O:-)  Do you mean, that I should use
.linklevel_1.button_strip_move : before
instead of
.pagesection .buttonlist .button_strip_move : before?
Yes, that's what I mean, if you need to go that far. You may not need to.

I would start by trying .button_strip_move:before and .button_strip_reply:before etc and see if those work. I think they will.

If those do not work, then .linklevel_1.button_strip_move:before and .linklevel_1.button_strip_reply:before will work.


QuoteI have tried the reply-button without "float:left".

The images for the buttons are not all of one size and some of them look better, if they are on top of the button, some look better, if they are on the bottom.
Make them all the same size. It will save a lot of bother. :)

QuoteAt the moment (it is just a test with this images) it looks like this with "float":

Code: [Select]
.pagesection .buttonlist .button_strip_reply:before {
	background-image: url(../images/theme/reply.gif);
	background-repeat: no-repeat;
	padding: 25px;
	padding-right: 25px;
	margin-top: -25px;
	margin-left: -13px;
        margin-right: -6px;
	content: '';
	float: left;
}
.pagesection .buttonlist .button_strip_notify:before {
	background-image: url(../images/theme/notify_button.gif);
	background-repeat: no-repeat;
	padding: 25px;
	padding-right: 21px;
        margin-top: -2px;
        margin-left: -4px;
        margin-right: -10px;
	content: '';
	float: left;
}
.pagesection .buttonlist .button_strip_mark_unread:before {
	background-image: url(../images/theme/mark_unread.gif);
	background-repeat: no-repeat;
	padding: 25px;
	padding-right: 25px;
        margin-top: 2px;
        margin-left: -14px;
        margin-right: -6px;
	content: '';
	float: left;
}
/* The moderation buttons. */
#moderationbuttons .buttonlist .button_strip_delete:before {
    background-image: url(../images/theme/remove.png);
	background-repeat: no-repeat;
	padding: 25px;
	padding-right: 25px;
        margin-top: -20px;
        margin-left: -10px;
        margin-right: -16px;
	content: '';
	float: left;
}

It was necessary to add to .buttonlist: margin-bottom: -25px;
Ok, you don't need margins with background images. You can position the background image directly by using positioning on it. For instance, background-position: center center; will centre the image on the :before element. Using background-position: 0 100%, will put it at the bottom left. Using 100% 0 will put it at top right. Using 1px 4px will put it 1px from the left and 4px from the top. Etc, etc.

This means you can simply set one size for all the :before elements and get rid of all margins.

Code: [Select]
.button_strip_reply:before {
	background: url(../images/theme/reply.gif) no-repeat 6px 8px;
	padding: 0 25px;
	content: '\00a0';
}

Try that, and adjust the side padding (the 25px bit) and the background positioning (the 6px 8px) to suit. What I've done is:

1/ amalgamate all the background stuff into shorthand notation.

2/ add a non-breaking space to the content, which will not be visible. What this should do is automatically sort the height out, since it should inherit the font-size and line-height of the rest of the button.

3/ That means it should only need left and right padding. I set that at 25px just as a guess. Float should not be required.

All of them can be done like this.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Buttons with Icons

Reply #32 –

Thank you very much for your explainations, Antechinus. I will try this...

Quote from: Antechinus – Make them all the same size. It will save a lot of bother. :)

Yes...it would be much easier that way... ;)  but not with this images, we are using on the buttons in this forum. Some of the images are animated GIFs and do not look nice, if I resize them or transform them all to PNGs. But maybe it would be better to choose icons, wich can be all PNGs and all the same size. I will try this...

If the migration of this forum to ElkArte will be successful - and I really hope it will - there is a second SMF-Forum I would like to migrate to ElkArte, wich a complete different theme... and icons on the same size will be no problem there.
Last Edit: October 02, 2014, 06:43:09 pm by Ruth

Re: Buttons with Icons

Reply #33 –

I have tried with this, Antechinus...and it was almost working. :) 

Maybe I did something wrong, because the buttons get to much width on the left side, if the image is displayed.
 If I try to change the width of the button, then the image or parts of it will diappear.

So I am still using float: left and a lot of margins... O:-) it looks much better that way.

Code: [Select]
.button_strip_delete:before {
   background-image: url(../images/theme/remove.png);
   background-repeat: no-repeat;
   padding: 45px 20px 0px 25px;
   margin-top: -16px;
   margin-left: -15px;
   margin-right: -10px;
   content: '';
   float: left;
}

But:

I did change all those
.pagesection .buttonlist .button_strip_reply:before {
and those
#moderationbuttons .buttonlist .button_strip_delete:before {
to
.button_strip_reply:before{
and
.button_strip_delete:before {
etc.

It is much better that way. ;)  Now I do not need to add something like margin-bottom: -25px; to the buttonlist.  With it the layout in forum became a mess, :D  some other buttons disappeared (for example "delete conversation" in PM), other buttons were getting to big (for example the buttons beyond the editor),  etc.

It is also better without .pagesection .buttonlist, because - for example - the image for "mark read/mark unread" is used very often at several parts of the forum and with .button_strip_markread or .button_strip_mark_unread it will be shown everywhere - not only on one button.

Re: Buttons with Icons

Reply #34 –

I haven't tested this live yet. I'll play around with it when I get a chance. I'm sure a simpler code is possible. :)
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P