Skip to main content ↑ ↓
Post and Board icons Started by meetdilip · · Read 13762 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Post and Board icons

Reply #15 –

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.
Bugs creator.
Features destroyer.
Template killer.

Re: Post and Board icons

Reply #16 –

Quote from: emanuele – 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:-)

You've done a great job ;) I was thinking more about changing the css file, but your solution seems to be much better.

Re: Post and Board icons

Reply #17 –

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?
Last Edit: August 30, 2014, 06:14:45 am by Ruth

Re: Post and Board icons

Reply #18 –

Which ones are the quick buttons icons? (Coming from a long night and I'm completely sleepy.)
Bugs creator.
Features destroyer.
Template killer.

Re: Post and Board icons

Reply #19 –

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.

Re: Post and Board icons

Reply #20 –

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[1] (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 [2] 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:
Code: [Select]
/* 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:
Code: [Select]
.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. ;)
1 Yup, a bit of selfishness. :P↵
2 well, at least that's the theory, if you don't know feel free to ask! ;)↵
Bugs creator.
Features destroyer.
Template killer.

Re: Post and Board icons

Reply #21 –

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?

Re: Post and Board icons

Reply #22 –

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
Bugs creator.
Features destroyer.
Template killer.
 

Re: Post and Board icons

Reply #23 –

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.

QuoteThese icons were "built" that way because this is better for speed and (usually) easier for styling

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!

Re: Post and Board icons

Reply #24 –

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. ;)
Bugs creator.
Features destroyer.
Template killer.

Re: Post and Board icons

Reply #25 –

Sorry, emanuele, I am not sure if I understand you properly... :-[

I had to do this - otherwise my own icons will not be displayed:

Code: [Select]
/*background-image: url(../images/theme/quickbuttons.png);*/

and this:
(Edit: Code was wrong here, as I noticed yesterday, so I changed it)

Code: [Select]
/* 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:

Code: [Select]
/*.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:

Code: [Select]
.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:
Last Edit: September 12, 2014, 05:54:05 am by Ruth

Re: Post and Board icons

Reply #26 –

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.

Installation
0) 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"

Example
0) 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

Sprites
This 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.
Last Edit: December 12, 2014, 05:46:20 pm by Spuds

Re: Post and Board icons

Reply #27 –

 emanuele thinks Spuds is awesome! :D
Bugs creator.
Features destroyer.
Template killer.

Re: Post and Board icons

Reply #28 –

So does meetdilip.

Re: Post and Board icons

Reply #29 –

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.