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

Buttons with Icons

Hello!

I would like to have icons on the buttons in main menue and on the Button-Strips in the boards and topics.

Maybe it would be possible, if I add something like this in css for each button there?

Code: [Select]
.home_button:before 
{background-image: url(../images/theme/home.png);
background-repeat: no-repeat;
}

With icons the buttons should look like this...I also would like to get the avatars a bit larger, wich are on the profile-button.

Re: Buttons with Icons

Reply #1 –

I don't know how to change the width of the buttons. If I add a padding to  linklevel1 in index_light.css. all this button look like this.

Code: [Select]
padding: 0 8px 0 30px;

This will be be okay for this buttons, but the profile-button ist getting too large and also the more-button in the posts and the pm-button in the poster-information is changing and the things are not centerd in the poster-information, if I change the padding on linklevel1.

Re: Buttons with Icons

Reply #2 –

So maybe there is another way to add icons on the buttons?
I would be very glad, if someone can tell me how to make those changes.

Re: Buttons with Icons

Reply #3 –

When you want to address only the main menu, always use the main_menu id in front of your css selectors, for example:
Code: [Select]
#main_menu .linklevel1 {
padding: 0 8px 0 30px;
}
Bugs creator.
Features destroyer.
Template killer.

Re: Buttons with Icons

Reply #4 –

Thank you very much, emanuele. I will try this for the main menue.

Can I add something for the buttonstrips as well? I would like to have icons on this buttons, too. I mean the buttons in the boards and topics...for "reply", "new topic", "mark read", etc. and the moderator buttons, like "merge", "delate", "close", etc.

Re: Buttons with Icons

Reply #5 –

You should be able to use the class quickbuttons:
Code: [Select]
.quickbuttons .linklevel1 {
padding: 0 8px 0 30px;
}
or, if you want to be even more specific you can use both the postarea and quickbuttons:
Code: [Select]
.postarea .quickbuttons .linklevel1 {
padding: 0 8px 0 30px;
}
Bugs creator.
Features destroyer.
Template killer.

Re: Buttons with Icons

Reply #6 –

The quickbuttons have such a padding already:

Code: [Select]
.quickbuttons .linklevel1 {
	float: left;
	padding: 1px 6px 0 32px;
	line-height: 2em;
	cursor: pointer;
}

It doesn't change the button-strips in the boards and topics...

:D Can I add something like:

Code: [Select]
#button_strips. linklevel1 {
padding: 0 8px 0 30px;
}

Re: Buttons with Icons

Reply #7 –

I have tried the changing for the main menue... It looks like this now.
But the profile button and the collapse button have too much width.

Re: Buttons with Icons

Reply #8 –

If I add a max-width here it becomes better...but I don't know if this is correct and I don't know at all how to change the profile button.

Code: [Select]
}
#collapse_button .linklevel1 {
display: block;
overflow: hidden;
position: relative;
padding: 0;
margin-right: 1px;
max-width: 14px;

Re: Buttons with Icons

Reply #9 –

For the profile-button I  have tried to change this:

Code: [Select]
.listlevel1#button_profile .linklevel1 {
	min-width: 5em;
}

to this:

Code: [Select]
.listlevel1#button_profile .linklevel1 {
/* min-width: 5em; */
padding: 0 8px 0 10px;
}

Re: Buttons with Icons

Reply #10 –

This is not working...no icon is shown... :(

Code: [Select]
.button_home:before {background-image: url(../images/theme/home.gif);}

Re: Buttons with Icons

Reply #11 –

Maybe I should try to work with this code Spuds has wrote: http://www.elkarte.net/community/index.php?topic=1798.msg12028#msg12028

But I did not completly understand how to install it... O:-)  And it is an addon, isn't it?
It will disappear, if I migrate my SMF-Forum to ElkArte?

Re: Buttons with Icons

Reply #12 –

Quote from: Ruth – The quickbuttons have such a padding already:
I was looking at the wrong piece...
Code: [Select]
.buttonlist  .linklevel1 {

Quote from: Ruth – This is not working...no icon is shown... :(

Code: [Select]
.button_home:before {background-image: url(../images/theme/home.gif);}
First button_home is an ID and not a class, so #button_home and not .button_home.
Second the #button_home doesn't have a "before" by default, so you have to give it first some "space":
Code: [Select]
#button_home:before {
content: '';
padding: 10px;
float: left;
background-image: url(../images/theme/home.gif);
}
Of course this is just an example, then you have to adapt it the way you need to have it.

As a general suggestion, if you are using chrome for example, move the cursor over the element of interest and then right-click => inspect element (not sure how it translated to German, but it's usually the last menu entry). Then you will be able to inspect the HTML and the css and find out where and what should be changed. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Buttons with Icons

Reply #13 –

Quote from: emanuele –
As a general suggestion, if you are using chrome for example, move the cursor over the element of interest and then right-click => inspect element (not sure how it translated to German, but it's usually the last menu entry). Then you will be able to inspect the HTML and the css and find out where and what should be changed. ;)

I know and use this already, emanuele...  O:-) But I am too stupid to understand, what I can see there... ::)

Thank you very much for your help...I will try it again.

Re: Buttons with Icons

Reply #14 –

For the top menu you can try something like this ... its not as concise as it should be, for that you really need to restructure some of the css.  It also does not use sprites, which it really really should, especially for menus. This only does the home button, you will need to add for the others as needed.

Code: [Select]
#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/board_select_spot_child.png);
	width: 16px;
	height: 16px;
	content: '';
}