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?
.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.
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.
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.
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.
When you want to address only the main menu, always use the main_menu id in front of your css selectors, for example:
#main_menu .linklevel1 {
padding: 0 8px 0 30px;
}
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.
You should be able to use the class quickbuttons:
.quickbuttons .linklevel1 {
padding: 0 8px 0 30px;
}or, if you want to be even more specific you can use both the postarea and quickbuttons:
.postarea .quickbuttons .linklevel1 {
padding: 0 8px 0 30px;
}
The quickbuttons have such a padding already:
.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:
#button_strips. linklevel1 {
padding: 0 8px 0 30px;
}
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.
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.
}
#collapse_button .linklevel1 {
display: block;
overflow: hidden;
position: relative;
padding: 0;
margin-right: 1px;
max-width: 14px;
For the profile-button I have tried to change this:
.listlevel1#button_profile .linklevel1 {
min-width: 5em;
}to this:
.listlevel1#button_profile .linklevel1 {
/* min-width: 5em; */
padding: 0 8px 0 10px;
}
This is not working...no icon is shown... :(
.button_home:before {background-image: url(../images/theme/home.gif);}
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?
I was looking at the wrong piece...
.buttonlist .linklevel1 {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":
#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. ;)
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.
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.
#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: '';
}
I didn't know, so worth mentioning. :P
I know the feeling, it just takes a while to get used to all the possibilities. ;)
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:
{
padding: 0 8px 0 30px;
}and also in Index.css, because I was not sure about the file...
.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:
#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...
#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:
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?
#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: '';
}
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:
Suddenly it was very easy to do... float: left; is the new magic word! ;)
I have changed this:
.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:
.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...
Glad you got something working, I know that was a lot of effort on your part, good job !
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...
In theory it should be mostly the same... except it may be trickier because of the structure.
The main menu has:
<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:
<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?
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).
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...
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.
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?
Something next to the reply button:
.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:
.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:
<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:
#moderationbuttons .buttonlist .button_strip_move:before {
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... O:-)
It is so kind of you, to help me this much...I am very grateful to you for that.
You are welcome! ;D
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.
:o I don't understand this, Antechinus ;D
(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. O:-) 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":
.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;
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.
.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: '';
}
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.
Make them all the same size. It will save a lot of bother. :)
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.
.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.
Thank you very much for your explainations, Antechinus. I will try this...
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.
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.
.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.
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. :)