ElkArte Community

Elk Development => Theme development => Topic started by: scripple on April 21, 2016, 09:46:20 pm

Title: Folder Icons
Post by: scripple on April 21, 2016, 09:46:20 pm
I personally preferred the folder icons used in 1.0 over the flat ones used in 1.1.  Was the change out of preference or just out of moving to svg?  I've tossed together a quick svg version of the old design.  Attached are two pngs showing it at the old board icon size and a larger size.  Would this be something you are interested in having?  It's just a quick conversion of the left most board icon using inkscape using a solid back and a gradient front.  Two colors define it.  Actually I think I left the stroke on and solid but that can be removed.

This is for light theme.  I've not looked at besocial in a long time.
Title: Re: Folder Icons
Post by: emanuele on April 22, 2016, 12:23:30 am
I think the reason for change was just because the icons were automatically generated from FontAwesome (https://github.com/elkarte/Elkarte/issues/2375), I guess revert back to the previous design wouldn't be an issue at all.
Title: Re: Folder Icons
Post by: scripple on April 22, 2016, 01:01:59 am
I figured as much but wanted to make sure it wasn't an explicit design decision.  If I'm the only one with the preference for the older style there's no reason for you guys to put it the effort though as I'll just change them locally on my forum.

Anyone else out their have a preference for the older style?  (Or against?)
Title: Re: Folder Icons
Post by: Ruth on April 22, 2016, 04:53:29 am
Anyone else out their have a preference for the older style?

Yes, me.  ;) I don't like font awesome very much.

I would prefer the "old fashioned style" and I would like to use my own icons.
Title: Re: Folder Icons
Post by: Spuds on April 22, 2016, 05:48:50 am
Thanks @scripple those look awesome ... Yup the current choice was simple expediency of using what was in FA.
Title: Re: Folder Icons
Post by: emanuele on April 22, 2016, 08:40:57 am
I would prefer the "old fashioned style" and I would like to use my own icons.
You can use your icons the same way you were using them before: changing the CSS pointing to your icon... okay, now there is a little trick to add:
Code: [Select]
content: "";
to remove the current one, and then use:
Code: [Select]
background: url("http://url.to.your/site/and/image.png");
or alike, I don't remember the exact syntax, but I'm pretty sure TE does. :P
Title: Re: Folder Icons
Post by: CrimeS on April 22, 2016, 09:15:31 am
I've no problem with the new icons. However I feel that if someone is coming to ElkArte and has no other skills than knowing how to install the forum will have trouble with it. Folders are the icons that most users change to customise their forum :D and they simply like to replace an image.

PS. I'm not sure if it's tracked anywhere, but guests see broken avatar images.
Title: Re: Folder Icons
Post by: Ruth on April 22, 2016, 10:59:44 am
Thank you , Emanuele, I will try this. (Will it work for the calendar-icons as well?)

FontAwesome is not really my taste, but it might look quite nice to a very modern and clear theme... and our theme is "childish and oldfashioned".  ;)

I was looking for "diamonds" in Font Awesome , wich I wanted to try as boardicons. But I did not see any. Simple dots or circles could be another possibility to create boardicons with FontAwesome, maybe they would look nice in different stylings.

Title: Re: Folder Icons
Post by: emanuele on April 22, 2016, 12:08:47 pm
I've no problem with the new icons. However I feel that if someone is coming to ElkArte and has no other skills than knowing how to install the forum will have trouble with it. Folders are the icons that most users change to customise their forum :D and they simply like to replace an image.
Actually, it has been like that since "forever":
http://www.elkarte.net/community/index.php?topic=966.0
Change the CSS is the endorsed way to change icons, not replace images.
I know replace an image is "easy", but it's even easier upload the image in a way that an upgrade will not disrupt the theme. ;)

PS. I'm not sure if it's tracked anywhere, but guests see broken avatar images.
Better always open a new topic, I know it's bothersome, but it's better for tracking. Anyway I had fixed that during the upgrade, but apparently it was reverted by mistake, so I re-added it and should work now.
Title: Re: Folder Icons
Post by: TE on April 22, 2016, 12:33:09 pm
Here's another example how you could replace the board icons (embedded images or the good old images..)
http://www.elkarte.net/community/index.php?topic=1124.msg7719#msg7719
Converting images to base64 is quite simple:
https://www.base64-image.de/
Title: Re: Folder Icons
Post by: Spuds on April 22, 2016, 02:33:46 pm
One other thing to note is that the class names changed for the on/off/on2/redirect board icons ... so the current .png way will still work but any custom css will need to have the css class names tweaked just a bit.

Likewise for all of the other icons, there are now class names so you can target each of them with various CSS techniques (just like the board icons)  vs the old replace the image in the images directory.
Title: Re: Folder Icons
Post by: CrimeS on April 22, 2016, 03:07:39 pm
Actually, it has been like that since >">forever>">:

Hmmm, in the Be Social! variant it was only neccessary to either change css with background-image, or edit the image accordingly. If I don't mention specifically, then I'm always talking about Be Social!. I cannot stand the Light! variant :D

Better always open a new topic, I know it's bothersome, but it's better for tracking. Anyway I had fixed that during the upgrade, but apparently it was reverted by mistake, so I re-added it and should work now.

I didn't want to duplicate any issues :)
Title: Re: Folder Icons
Post by: emanuele on April 22, 2016, 03:18:35 pm
Hmmm, in the Be Social! variant it was only neccessary to either change css with background-image, or edit the image accordingly. If I don't mention specifically, then I'm always talking about Be Social!. I cannot stand the Light! variant :D
The only difference between besocial and light is the name and few colors/borders/positions, things are done the exact same way.
And in this case too, the things are again (mostly) the same: there is no "physical" image to change, just change the css.
You add your background(-image) and the only additional thing to remember is add the content: ""; (or display:none; if you prefer) to nullify the default image.

http://www.ElkArte.it/elk1.1/index.php
Code: [Select]
.i-board-on:before {
content: "";
}
.i-board-on {
background: url("http://www.ElkArte.net/community/index.php?action=dlattach;topic=3549.0;attach=3590;image") no-repeat;
}

.i-board-off:before {
content: "";
}
.i-board-off {
background: url("http://www.ElkArte.net/community/index.php?action=dlattach;topic=3549.0;attach=3590;image") no-repeat;
}

I didn't want to duplicate any issues :)
Better have issues duplicated than lost in the middle of discussions that nobody is going to find once off the radar. ;)
Title: Re: Folder Icons
Post by: scripple on April 22, 2016, 03:42:25 pm
Here's the svg file (gzipped to meet the upload permissions).  Feel free to use / modify it as you wish.
Title: Re: Folder Icons
Post by: meetdilip on April 22, 2016, 03:52:30 pm
Here's another example how you could replace the board icons (embedded images or the good old images..)
http://www.ElkArte.net/community/index.php?topic=1124.msg7719#msg7719
Converting images to base64 is quite simple:
https://www.base64-image.de/

What are base64 images ?
Title: Re: Folder Icons
Post by: scripple on April 22, 2016, 04:00:38 pm
Images encoded to a text string that can be put directly into a URI.  In this context it's used to embed images inside css files as text instead of requiring a separate download of the original image file.  base64 is the name of the encoding method.
Title: Re: Folder Icons
Post by: meetdilip on April 22, 2016, 04:10:24 pm
@scripple , thanks for explaining
Title: Re: Folder Icons
Post by: Vekseid on April 22, 2016, 04:50:44 pm
If someone wants to submit svg versions of the original icons I'd be happy to swap those in.

It's just that, with some ~200 images to swap out, making each one from scratch would take a ridiculous amount of time. This is really just a framework to make it much easier to swap out images (even back to png if you prefer those).

Edit: Also, I can tell my default green goto is way too rich. Eugh.