Buttons with Icons

Buttons with Icons Started by Ruth · September 29, 2014, 04:18:32 am · Read 14071 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Buttons with Icons

Reply #15 – September 29, 2014, 09:09:16 am

Quote from: Ruth – September 29, 2014, 07:58:25 amI know and use this already, emanuele...

I didn't know, so worth mentioning.

Quote from: Ruth – September 29, 2014, 07:58:25 am But I am too stupid to understand, what I can see there...

I know the feeling, it just takes a while to get used to all the possibilities.

Re: Buttons with Icons

Reply #16 – September 29, 2014, 10:53:54 am

Thank you so much, both of you...you are so nice and patient with me...
I think, I need some choclade to eat, I am competly down now...

This is very difficult for me...

I have tried them all, but I have forgotten to make screenshots from all of them.

Emanuele, that one for the buttonlist is working. I added this in index_light.css:

Code: [Select]

{
padding: 0 8px 0 30px;
}

and also in Index.css, because I was not sure about the file...

Code: [Select]

.buttonlist  .linklevel1 {
padding: 0 8px 0 30px;
}
.buttonlist  .linklevel1:before {
background-repeat: no-repeat;
}
.button_delete:before {background-image: url(../images/theme/remove.png);}

Should there be a # insted of a point before?

I don't know how to write, that the icons are shown.
In which file must they be uploaded? The same file as the icons for the quickbuttons? Or another file?

I have tried emanueles code for the main menue. It worked that way and was looking nice for the home button:

Code: [Select]

#main_menu {
	position: relative;
}
#main_menu .linklevel1 {
padding: 0 8px 0 32px;
}
#button_home:before {
content: '';
padding: 20px 16px 20px 20px;
float: left;
background-image: url(../images/theme/home.gif);
background-repeat: no-repeat;
}

But there are the problems with the the width of the profile button and the upshrink-button, wich I can't change in a way that this buttons will look nice.

Then I added Spuds code...

Code: [Select]

#main_menu {
	position: relative;
}
/*#main_menu .linklevel1 {
padding: 0 8px 0 32px;*/
}
#button_home:before {
content: '';
padding: 20px 16px 20px 20px;
float: left;
/*background-image: url(../images/theme/home.gif);
background-repeat: no-repeat;*/
}
#main_menu .listlevel1>a:before {
	margin: 0;
	margin-right: 0.5em;
	position: relative;
	top: 4px;
	display: inline-block;
	z-index: 5;
}
/* home button, repeat this for #button_forum, #button_pm, #button_admin, #button_unread, #button_unreadreplies */
#button_home a:before {
	background-repeat: no-repeat;
	background-image: url(../images/theme/home.gif);
	width: 16px;
	height: 16px;
	content: '';
}

First it looks like this:

Re: Buttons with Icons

Reply #17 – September 29, 2014, 10:54:23 am

I made some changes there and now it looks like this. (I will use some smaller icons, the icon for home is to big.)

I would prefer to chance the menue-buttons this way, because this code will not touch the width of the profile-button and the upshrink-button. But I am not sure if it is correct this way?

Code: [Select]

#main_menu {
	position: relative;
}

#button_home:before {
content: '';
float: left;

}
#main_menu .listlevel1>a:before {
margin: 0;
/* margin-right: 0.5em; */
position: relative;
/* top: 4px; */
bottom: 8px;
display: inline-block;
z-index: 5;
right: 6px;
float: left;
}
/* home button, repeat this for #button_forum, #button_pm, #button_admin, #button_unread, #button_unreadreplies */
#button_home a:before {

background-repeat: no-repeat;
background-image: url(../images/theme/home.gif);
width: 30px;
height: 30px;
content: '';
}

Re: Buttons with Icons

Reply #18 – September 30, 2014, 04:53:30 am

It works very well for the buttons in main menue;

I have nearly finished them all.
My friends want to have the buttons with such icons, because they are used to it and they like them very much.

I have tried to change the size of the avatar, but this button always went like this, if the avatar is larger:

Re: Buttons with Icons

Reply #19 – September 30, 2014, 04:53:54 am

Suddenly it was very easy to do... float: left; is the new magic word!

I have changed this:

Code: [Select]

.listlevel1#button_profile img {
	max-width: 1.5em;
	max-height: 1.4em;
	margin: 0;
	margin-right: 0.6em;
	position: relative;
	top: 4px;
}

.listlevel1#button_profile .linklevel1 {
	min-width: 5em;
}

to this:

Code: [Select]

.listlevel1#button_profile img {
	max-width: 2em;
	max-height: 2em;
	margin: 0;
	margin-right: 0.3em;
	position: relative;
	/*top: 4px;*/
	bottom: 6px;
	float: left;
}

.listlevel1#button_profile .linklevel1 {
	/*min-width: 5em;*/
}

And now it looks nice, as I believe...

Re: Buttons with Icons

Reply #20 – September 30, 2014, 11:06:40 am

Glad you got something working, I know that was a lot of effort on your part, good job !

Re: Buttons with Icons

Reply #21 – September 30, 2014, 04:30:07 pm

Thank you, Spuds...

without the help from you and emanuele I could have done nothing with this buttons...

Today I have tried it again for hours

to get icons on the other buttons in forum...I think, I have tried everything, but it don't works for the moderation-buttons and for the button-strips in the topics and the boards. I can't figure it out.

It is disappointing for me, because I think, there must be a possibility, to get icons also on this buttons...

Re: Buttons with Icons

Reply #22 – September 30, 2014, 05:38:46 pm

In theory it should be mostly the same... except it may be trickier because of the structure.
The main menu has:

Code: [Select]

<ul id="main_menu">
<li id="name_of_menu"><span>menu</span></li>
</ul>

but the button strips are 1) more difficult to target because there is no id or unique class in order to identify the strip, and 2) the structure is:

Code: [Select]

<ul class="buttonlist">
<li><a class="buttom_strip_name_of_buttom">text</a></li>
</ul>

so you can "attach" style only on the link itself...

Exactly what you were thinking to do with the strips?

Re: Buttons with Icons

Reply #23 – September 30, 2014, 06:46:01 pm

You shouldn't need a pseudo element or inline images for this, although obviously you can use those if you want to (I wouldn't). However, the simplest way would be to just put the icon straight on the anchor as a background image. There's no reason why this wouldn't work.

The only reason I would use a pseudo element would be if I was spriting all the icons and was concerned about stability with non-standard font sizes (in which case I would sprite the icons horizontally, not vertically).

Re: Buttons with Icons

Reply #24 – October 01, 2014, 05:32:33 am

I am so sorry...I understand the words of your posts...but not the context of meaning $:-\$ It is also very difficult to reply for me. I must apologize for my poor english again...

QuoteIn theory it should be mostly the same...

Emanuele, I have tried it that way (well, I think so), but I cannot show the codes I have tried. Yesterday I have deleted everything, because what I have tried, was wrong and not working at all.

I know nothing about all this, so I have no idea, what was completely wrong or maybe what was almost correct and had just a tiny mistake somewhere.

QuoteExactly what you were thinking to do with the strips?

I don't understand this question.

Do you ask me, what I have exactly done with the strips in index.css
or do you want me to show how I should have wrote the code for the icons on the strips
or do you want me to tell you exactly what the strips shall look after the changes?

I don't want to change every button, wich belongs to the strips. For example, we need no icons on this buttons in PMs or the polls or the memberlist. But of course I would change them all and add an icon on each button, if it is necessary to do.

I just want to get an icon on the three buttons in the boards ("new topic", "notify" and "mark read") and on the five buttons in the topics ("reply", "notify", "mark read", "sendtopic" and "print").

It would be very nice to have icons on the moderation-buttons in the topics ( "movetopic", "removetopic", "locktopic", "stickytopic", "mergetopics" and "postcalendar") but those buttons are less important, because members don't see them.

Some of this icons or very similar ones ("reply", "notify" "split" and "delete" are already there, because I have used them for the quickbuttons and for the dropdown under the button "more..." in the posts and pms. Maybe I could use the same icons for some of the stripbuttons or use icons, which are a little different. But they need to be in the same image file? In "quickbuttons"? Or in "theme"? I have tried both for the new images.

I don't know how to write the code for the icons on the buttonstrips. Yesterday I thought, that maybe it could not only be done in css? Maybe there must be a changing in another file?

Re: Buttons with Icons

Reply #25 – October 01, 2014, 07:30:38 am

Something next to the reply button:

Code: [Select]

.pagesection .buttonlist .button_strip_reply:before {
	background-image: url(theimage.jpg);
	background-repeat: no-repeat;
	padding: 10px;
	padding-right: 15px;
	margin-top: 1px;
	content: '';
	float: left;
}

You are always using images bigger than the buttons, if you want to adjust their position use the margin-top with negative values.

For the notify button you can use:

Code: [Select]

.pagesection .buttonlist .button_strip_notify:before {

See the difference with the previous one? (button_strip_notify instead of button_strip_reply?)
etc.
Use "inspect element" to find the classes, just click on the button and you will see something like:

Code: [Select]

<a class="linklevel1 button_strip_print" href="http://url/forum/index.php?action=topic;sa=printpage;topic=428.0" rel="nofollow">Print</a>
_____________________^^^^^^^^^^^^^^^^^^___this is the class name you have to use

This is the same for both buttons reply/notify/share/print and for the new topic/notify/mark read. Just change the last class to point to each different button.

For moderation buttons (move/lock/pin/etc) it's the same, just use something like:

Code: [Select]

#moderationbuttons .buttonlist .button_strip_move:before {

Re: Buttons with Icons

Reply #26 – October 01, 2014, 03:59:30 pm

Thank you so much, emanuele!

I have tried it with a few buttons and it works great!

And now I know, what I have done wrong before...

It is so kind of you, to help me this much...I am very grateful to you for that.

Re: Buttons with Icons

Reply #27 – October 01, 2014, 05:39:40 pm

You are welcome!

Re: Buttons with Icons

Reply #28 – October 01, 2014, 06:50:37 pm

You should be able to make that CSS leaner. Since .button_strip_move, for example, is only ever called inside .buttonlist, which is always going to be inside #moderationbuttons, there shouldn't be any need to use an inefficient descendant selector chain. The whole plan with the .linklevel_1 stuffz was to avoid descendants as much as humanly possible, since apart from being inefficient in terms of processing they also make customisation more difficult (coz they fry n00b brainz and coz you haz to write more shiz to override them).

Just using the class for the actual button in question should work, since IIRC there is no pseudo specified by default, so nothing to override there:

.button_strip_move:before { etc....

If that is not sufficient, chaining the actual button's class to the generic class should do the trick:

.linklevel_1.button_strip_move:before { etc....

ETA: Oh and you shouldn't need the float either. Pseudos are inline by default.

Re: Buttons with Icons

Reply #29 – October 02, 2014, 06:26:08 am

Quote from: Antechinus – October 01, 2014, 06:50:37 pm (coz they fry n00b brainz and coz you haz to write more shiz to override them).

I don't understand this, Antechinus

(but I really would like to understand) and Mister Babelfish cannot translate it...

I have not tried yet, what you wrote about the moderation-button-strip, but I will try it...

I am not sure, if I understood your post about the class.

Do you mean, that I should use
.linklevel_1.button_strip_move : before
instead of
.pagesection .buttonlist .button_strip_move : before?

I 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. At 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;