Wouldn't it be nice to have them as separate than embedding into a single image ? Not so easy for all to figure out. Or perhaps a mod which will allow use post, board icons of our choice..
Oh yes! +1
I believe that this is very convenient way of doing things faster when you have a single file. It shouldn't be hard to separate this using the way I mentioned in the other post. In the CSS file you have a image-url and below this you have CSS that tells in what position the image needs to be read from.
Unfortunately as I said, there is no way I can show this before I come back from holidays.
I think you mean this part of the CSS file:
/* $BOARDICONS */
/* ------------------------------------------------------- */
.board_icon {
display: block;
float: left;
width: 48px;
height: 48px;
}
.board_key:before {
display: block;
float: left;
height: 24px;
width: 26px;
content: "";
}
.category_boards .board_icon, .board_key:before {
background-repeat: no-repeat;
background-image: url(../../images/_light/board_icons.png);
}
.on_board {
background-position: 0 0;
}
.on2_board {
background-position: -72px 0;
}
.off_board {
background-position: -144px 0;
}
.redirect_board {
background-position: -216px 0;
}
.new_some_board:before {
background-position: -300px -14px;
}
.new_none_board:before {
background-position: -372px -14px;
}
.new_redirect_board:before {
background-position: -444px -14px;
}
So the solution can be to tell the forum that it has to use single images for on, on2, off, and the new stuff. For example:
.on_board {
background-image: url(../../images/_light/board_icon_on.png);
}
Not tested.
But what needs to be done with:
.category_boards .board_icon, .board_key:before {
background-repeat: no-repeat;
background-image: url(../../images/_light/board_icons.png);
}
This is the exact thing that I meant.
I think that if you remove this part or use display none it should be okay.
So a mod won't be difficult. :D
A mod could be easily written ;)
Well, if it is - which one of you is going to write this mod? ;)
I would be very glad and grateful
to use it O:-) for ever and ever and ever...
I won't have time for it until Friday.
We can wait will next week ;)
A first very basic try:
https://github.com/emanuele45/BoardIcons
You should create (ooops I forgot to add it lol) a directory "boardicons" in the "images" directory of the default theme and of your "custom" theme (this last is optional).
Then you can start adding files with a certain name:
default_on.png
default_off.png
default_on2.png
default_redirect.png
If you add only these files then all the icons will be replaced by those ones (including keys and the end of the board).
If you want to add a different icon for each board, you can use this name scheme:
1_on.png
1_off.png
1_on2.png
1_redirect.png
where "1" is the id of the board.
All the boards with a "custom" icon will use that custom one, the others will use the default you set (default_*.png) or the default of the theme.
If you are using different icons for each boards the addons will hide the legend at the end of the board index.
I may have missed something, for the moment I'm too lazy to write an admin interface, in the future if anyone is interested he can poke (don't worry, I'm not going to code it unless I'm in a good mood :P) and/or code it. ;D
Arg... there was no post when I started coding!! :'(
Well, feel free to code your version! ;D
I guess something like this should end up into 1.1... O:-)
Great! I will use this one too! Thank you! :)
/me has not tested it. O:-)
So? Let your customer test it like all others do. ;)
I try not to be Microsoft! :P
I updated it a bit the code in order to use a slightly better algorithm and avoid useless scan of the file system, now it grabs all the png files in the directory with a single glob and then uses the data obtained to "build" the styles.
You've done a great job ;) I was thinking more about changing the css file, but your solution seems to be much better.
Thank you very much, emanuele! I will try this as soon as possible.
It is only for the Boardicons?
The icons for the quickbuttons have to stay the same as before?
Or can they also be changed in this way?
Which ones are the quick buttons icons? (Coming from a long night and I'm completely sleepy.)
I mean this icons/images...they were used on the quickbuttons and in other parts of the forum.
And the other one called "header" - for the profiles.
It would be great if they all could be changed.
hmm... no, not really, sorry.
Honestly, build an interface to change each and every icon in all the interface for any theme would be a pain. It could be done, of course, but it's not something I would maintain (of course if there is anyone willing to maintain it I wouldn't have any problem with it. ;)).
Yes, board icons require some more css and may be bothersome to change, also it's usually the owner of the forum that wants to have custom icons, so I see the "need" of an addon to facilitate that. But any other icon is more bound to the theme, and these icons can easily be changed just tweaking the css and pointing to whatever file you want for any of them.
These icons were "built" that way because this is better for speed and (usually) easier for styling, I myself from time to time (well, quite frequently) have problems with sprites, but it's not that difficult to change them to whatever you want. ;)
For example, with "quickbuttons.png", do a search in index.css, and you will find only one instance of it, and there is the only place you have to change to adjust anything the way you want:
/* The rest of them. */
.quickbuttons .linklevel1:before, .quickbuttons .linklevel2:before {
background-repeat: no-repeat;
/* A rare example of where longhand background declarations work well. */
background-image: url(../images/theme/quickbuttons.png);
}
/* The long list of sprite coordinates is much less verbose this way. */
.quote_button:before {background-position: 0 0;}
.remove_button:before {background-position: 0 -24px;}
.modify_button:before {background-position: 0 -48px;}
.approve_button:before {background-position: 0 -72px;}
.restore_button:before {background-position: 0 -96px;}
.split_button:before {background-position: 0 -120px;}
.reply_button:before {background-position: 0 -144px;}
.reply_all_button:before {background-position: 0 -144px;}
.notify_button:before {background-position: 0 -168px;}
.unapprove_button:before {background-position: 0 -192px;}
.close_button:before {background-position: 0 -216px;}
.im_reply_button:before {background-position: 0 -240px;}
.details_button:before {background-position: 0 -264px;}
.ignore_button:before {background-position: 0 -288px;}
.report_button:before {background-position: 0 -312px;}
.warn_button:before {background-position: 0 -336px;}
.quotetonew_button:before {background-position: 0 -360px;}
.like_button:before {background-position: 0 -384px;}
.unlike_button:before {background-position: 0 -408px;}
.star_button:before {background-position: 0 -432px;}
.quick_edit:before {background-position: 0 -456px;}
.likes_button:before {background-position: 0 -480px;}
If you want to use a different image for one or any of the buttons you can just change to something like this:
.likes_button:before {
background-image: url(../images/theme/my_image.png);
}That will override the likes button default icon with your own image "my_image.png". And the same for all the others.
And header.png is exactly the same. ;)
Additionally, the addon I built has already some overhead: it has to check if files exist, fetch their content and return the css almost at each page load. It may look "nothing", but multiply that for all the icons you see around and you can imagine it could easily become a huge overhead that would make the forum sluggish. ;)
Thank you very much for this explaination, emanuele. I am a real newbie on such things. :-[
And I am not sure if I have understood everything you wrote, I need some translation. Maybe Jorin can help me to understand?
Don't worry, I'm a newbie too when it comes to themes... O:-)
I'm not even entirely sure everything I wrote is actually meaningful. lol
Jorin explained your post to me, emanuele and I have tried it the way you said. It works! I am so glad!
I have to change every icon on the quickbuttons, i think , it is not possible to change only one.
I agree with this, but some of the icons have "the wrong color", for example green icons do not look nice with a blue theme. There are more reasons, why I often prefere to change some of them, but I cannot explain it in English. ;)
Thank you very much for your help!
If you plan to change all of them it would probably be easier to replace the icons in the "sprite" image (the one with all the icons).
If the icons you want to use have the same size as the one used by default, it's rather easy to change them there as well, you just have to pay a little attention to the "position" of the image and that's all (that is the thing I usually do wrong when I try to change one of them lol). You can "replace" the interested icon with the one you want.
Anyway, the one that works is the better way to fix it. ;)
Sorry, emanuele, I am not sure if I understand you properly... :-[
I had to do this - otherwise my own icons will not be displayed:
/*background-image: url(../images/theme/quickbuttons.png);*/
and this:
(Edit: Code was wrong here, as I noticed yesterday, so I changed it)
/* Show appropriate like/unlike action */
/*.like_button:before, .likes_button:before, .unlike_button:before {background-position: 0 -480px;}*/
.like_button:before, .likes_button:before, .unlike_button:before {background-image: url(../images/theme/liked.png);}
/*.unlike_button:hover:before {background-position: 0 -408px;}*/
.unlike_button:hover:before {background-image: url(../images/theme/unlike.png);}
/*.like_button:hover:before {background-position: 0 -384px;}*/
.like_button:hover:before {background-image: url(../images/theme/like.gif);}
My icons look like this:
/*.like_button:before {background-position: 0 -384px;}*/
.like_button:before {background-image: url(../images/theme/like.gif);}
/*.unlike_button:before {background-position: 0 -408px;}*/
.unlike_button:before {background-image: url(../images/theme/unlike.png);}
.star_button:before {background-position: 0 -432px;}
/*.quick_edit:before {background-position: 0 -456px;}*/
.quick_edit:before {background-image: url(../images/theme/quick_edit.gif);}
/*.likes_button:before {background-position: 0 -480px;}*/
.likes_button:before {background-image: url(../images/theme/liked.png);}It works with GIFS as well.
I had to split linklevel1 and linklevel2 in two parts, because the icons of linklevel2 under the "more-Button" are much smaller. The icons on linklevel1 are quite big an I had to change the position there:
.quickbuttons .linklevel1:before{
position: absolute;
z-index: 5;
display: block;
height: 55px;
width: 43px;
left: -2px;
top: 70%;
margin-top: -32px;
content: "";
}Maybe there would have been another (better) or a easier way?
I just have played around... O:-) I do not really know, if it is correct, what I have tried to do. But it works. ;)
The buttons look like this now:
Attached is an attempt to simplify the creation of ElkArte sprites for use in custom themes or just changing the ones in the default theme. This will allow you to use the existing CSS and just update the sprite images with new ones that match the default CSS rules.
Installation0) I have
not done a lot of testing on this, nor does it have much error checking
1) Unzip the attached archive to an directory where your web site can access it, the base of your forum is fine
2) You will find a directory called elk_sprite with several sub directories. Those sub directories are named after the sprite files and must be named like that
3) In each sub directory, you will find the icons used in the sprite. If you don't like one, copy yours over the existing image keeping the name the same. This is important, the name must be the same.
4) Keep doing step 3 until you are happy happy happy
5) Run sprite_gen.php, select from the drop down list the sprite you want to create
6) If all goes well, you will be presented with the new sprite image (that image is saved in the sub directory above)
7) Copy the new sprite file to your theme (overwrite the old) and enjoy. The existing CSS will "just work"
Example0) You unzip to you root directory (where SSI.php is located)
1) You don't like the board icons, so navigate to elk_sprite/board_icons
2) Overwrite the icons in that folder (on.png, on2,png, redirect.png, etc etc) to the images you want (
maintain the same names !)
3) In your browser go to www.myforum.com/elk_sprite/sprite_gen.php
4) Select "board icon sprites" in the drop down and press create
5) You should see and image of the new sprite AND board_icons.php will have been updated in elk_sprite/board_icons (the directory in step 1)
6) Copy that file to the correct directory in you theme and enjoy the new icons
SpritesThis can currently create the following sprites
- Header Sprite
- Board icons Sprite
- Quick buttons Sprite
- Expand Collapse Sprite
- Admin Sprite
- Topic Sprite
ETA: The attachment as it has been committed to the tools repo here: https://github.com/elkarte/tools/tree/master/spritecreator To use copy the php file and all the sub directories / files to your local and follow the above instructions.
/me thinks Spuds is awesome! :D
So does meetdilip.
Thanks :D
Figured that we could come up with a simple tool that would help to create the sprite images for custom themes. I did not think that what we had would be difficult to modify, but sometimes we forget how intimidating some tasks can be.
The script does not have much of a front end / UI, but will do whats needed to create the sprite images, in the right size, pitch and image order so things will work with the existing css.
I've made a PR to the tools repo as well.