View Issue Details

IDProjectCategoryView StatusLast Update
0002966Composrcorepublic2019-06-27 19:08
ReporterChris GrahamAssigned ToSalman 
Status assignedResolutionopen 
Product Version 
Fixed in Version 
Summary0002966: Re-design icons using flat design
DescriptionRe-design all the icons (and some of the CSS) for modern flat design.
Additional InformationWe are re-doing almost everything, except:
 - We could consider redoing emoticons as SVG, but won't do it due to need to embed in legacy HTML contexts and need for animation (plus the work involved). People can use emojis if they like though.
 - Default avatars (as these are often raster images users upload anyway)
 - Thumbnail placeholders (")
 - Default banners (")
 - Tutorial explainer images (it's embedded standalone artwork really)
 - Some non-bundled addons (Buildr, and 3rd-party contributed addons)
 - Some stuff based on 3rd party code (e.g. jQuery-UI)

The idea is to essentially move our entire platform to flat design, bar these few special cases.
TagsRoadmap: v11, Skills: Graphic design, Type: Cross-cutting feature
Attach Tags
Time estimation (hours)400
Sponsorship open


related to 0002095 closedChris Graham Bootstrap theme 
related to 0003206 closedSalman Next generation theme (on hold) 
child of 0003362 assignedChris Graham Themeing improvements in v11 (idea staging issue) 


Chris Graham

2017-10-10 12:12

administrator   ~0005202

Last edited: 2017-11-21 14:40

View 10 revisions

The icons are now done (attached in a zip).

The following work is needed:
 - The icons will need to be put in place, and properly referenced in addon_registry files; and old icons similarly removed. In various cases icons have been moved around or merged, so there will be some work here.
  - We have lots of good icons that are technically for tutorials or for our website, that I think we could bundle. People may well find them useful for their own custom menu items. So it would be good to have a file tree more based on what the icons are than what they are used by, and less under images_custom. No need to keep tutorial and website icons logically separated from Composr icons.
  - Move menu/_generic_* out of menu directory
  - Move some of the _generic_admin icons into a new content_types folder, and remove 'view_' from the filenames
  - A lot of things we didn't call icons before, are now exactly like other icons. For example the newscats and calendar type images. So these need moving. Basically most things that are square is now to be classified as an icon.
  - Also note cns_rank_images/* are now language-specific and hence need moving under EN somewhere.
 - Check to see we haven't missed any icons or that otherwise there aren't .png files that aren't flat-design.
 - The Theme Wizard will need to support re-colouring SVG files, probably for most of the icons anyway (needs further thought, once we see how it looks).
 - Credits in licence.txt will need to updating, as a lot of old images credit no longer are used.
 - The quote_gradient theme image will be changed into a CSS expression (see below).
 - Remove psds addon, as we've completely migrated away from this to SVG and don't even need to supply source files.
 - We'll probably up the font size on the Composr default theme, so we can get better legibility on our higher-detailed icons (people have bigger screens now, and lots of sites have larger font size).
 - Add coding standard for SVG icons.
 - We can put all the icons in an all_icons bundled addon AS WELL AS their normal addons. So that people can have them for their custom menu items even if they don't have particular addons installed. And set up a unit test to ensure that is done consistently.
 - When all this is implemented, along with some options from 0003359, we need to make sure the flat design actually looks *good*. Salman may be in charge of that.

.quote_gradient {
    background: #F79523; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #F79523 , #C8691C);
    background: -o-linear-gradient(right, #F79523 , #C8691C);
    background: -moz-linear-gradient(right, #F79523 , #C8691C);
    background: linear-gradient(to right, #F79523 , #C8691C);

Chris Graham

2017-11-22 13:38

administrator (2,628,837 bytes)

Chris Graham

2018-01-29 04:06

administrator   ~0005414

WIP notes...

Missing .svg versions?
Handle .txt notes
Add width/height in .tpl's
Add width/height in .css's
Move everything down, no 1x or 28x28 or 32x32 or 48x48
DB update on f_topics icons
Things on tracker issue
Run tests
Mark done

Chris Graham

2018-02-01 03:52

administrator   ~0005416

The icons are now integrated and running stably.

I'm keeping this open as there is still some work to do...

 - Some further icon changes are now pending, after testing things in practice.

For Salman:
 - Icon colours may be considered 'garish' at the moment, or otherwise contrasting poorly against default blue colour. I'm going to pass on to Salman to run with things, and he may choose to recolour many icons as part of his default theme flat-design overhaul.
 - We'll probably up the font size on the Composr default theme, so we can get better legibility on our higher-detailed icons (people have bigger screens now, and lots of sites have larger font size). This will be quite a lot of work too.
 - Salman may choose to comment out all shadows, gradients, etc, temporarily in the CSS, then we can add them back in as theme options later, testing them only then. That should avoid things getting too complex during redesigning

For Chris (me):
 - The Theme Wizard will need to support re-colouring SVG files, potentially - we'll leave this until a bit later.

Chris Graham

2018-02-05 16:33

administrator   ~0005437

"Some further icon changes are now pending, after testing things in practice." - this is now done.

Chris Graham

2018-02-28 17:43

administrator   ~0005538

We are still tweaking some icons based on how things look in-place.

Here are some general guidelines we will need to apply:
 - No light colours that may bleed into a light background surrounding the icon (so some light colours, but they have to be well isolated from the edges)
 - Ditto, for dark colours
 - Icons that may be shown small (sometimes as little as 14x14) need to be very simple
 - It is legitimate to sometimes have multiple versions of icons, e.g. we have delete, delete2, and delete3 - for slightly different conceptions of delete, or different sizes of icon. We should, however, keep them together and use numbering to distinguish. It's not realistic to always expect every icon to work in every size.

Colouring is a bit complex. Colours may be:
 - Standard colours we are using (typically light blue, dark blue, orange, and some tinting for shadow [no drop shadow as that's not flat])
 - Colours perceived to mean something, esp. red, orange, green.

Colouring is problematic when the Theme Wizard is used. Laying different shades of blue on top of each other sometimes works, but with say orange it would not. I'm not sure there's really any good solution to this if we wish to keep colour. It's mitigated by the Admin Zone running it's own theme at least. Maybe allow users to HSV-shift any individual icon from within the theme image editor. Salman's suggestion is to allow selecting 2 icon colours in the Theme Wizard and us enforcing only 2 core colours in the icons that may run on the main website; that is a possibility too, but wouldn't solve the red/orange/green problem.

The guidelines we go with will need to get written into the coding standards document.

Chris Graham

2018-03-25 17:16

administrator   ~0005623

We are now working on black versions of each icon, which will also be included in a font-based icon set.

This will solve the colour problem and give people more flexibility (choice of colourful or any single colour including black and white).

We'll need some kind of convention for how these icons are placed. Maybe an icons_black folder mirroring the icons folder.
We'll need automated testing to make sure that these folders mirror each other perfectly.

Chris Graham

2018-04-05 13:10

administrator   ~0005654

Suggestions for implementing single-coloured icons...

Have a symbol, {$IMAGE_COLORISED,url,color} that will provide a colourised version of the given image URL, saving it under uploads/auto_thumbs. This would work for any image.

For an icon, it would look to see if there was an equivalent URL under 'icons_black' rather than 'icons', and look at that. That gives a stronger starting point than our multi-coloured icons.

Then regardless it will change all pixels colours to the given colour (with scaled brightness), save, and provide the URL to that new image.

I like this due to:
 - flexibility
 - simplicity
 - ability to have single-coloured versions even if some addon-maker omits making a black icon
 - stops us having to have some complicated scheme for passing around multiple-versions of each theme image through the API or forcing ourselves to always pass theme-image-codes into the templates

Issue History

Date Modified Username Field Change
2016-12-02 21:04 Chris Graham New Issue
2016-12-02 21:04 Chris Graham Relationship added related to 0002095
2016-12-02 21:33 Chris Graham Tag Attached: Skills: Graphic design
2017-04-08 17:06 Chris Graham Relationship added related to 0003206
2017-05-01 16:07 Chris Graham Tag Attached: Type: Cross-cutting feature
2017-10-10 12:12 Chris Graham Note Added: 0005202
2017-10-10 12:13 Chris Graham File Added:
2017-10-10 12:35 Chris Graham Note Edited: 0005202 View Revisions
2017-10-10 12:36 Chris Graham Note Edited: 0005202 View Revisions
2017-10-10 12:42 Chris Graham Note Edited: 0005202 View Revisions
2017-10-10 12:43 Chris Graham Note Edited: 0005202 View Revisions
2017-10-10 12:45 Chris Graham Additional Information Updated View Revisions
2017-10-16 16:23 Chris Graham File Deleted:
2017-10-16 16:24 Chris Graham File Added:
2017-10-16 16:24 Chris Graham Note Edited: 0005202 View Revisions
2017-10-31 12:34 Chris Graham Note Edited: 0005202 View Revisions
2017-11-01 10:51 Chris Graham Note Edited: 0005202 View Revisions
2017-11-01 13:17 Chris Graham Note Edited: 0005202 View Revisions
2017-11-20 00:16 Chris Graham Relationship added child of 0003362
2017-11-21 14:40 Chris Graham Note Edited: 0005202 View Revisions
2017-11-22 13:38 Chris Graham File Deleted:
2017-11-22 13:38 Chris Graham File Added:
2018-01-29 04:06 Chris Graham Note Added: 0005414
2018-02-01 03:52 Chris Graham Note Added: 0005416
2018-02-05 16:33 Chris Graham Note Added: 0005437
2018-02-28 17:43 Chris Graham Note Added: 0005538
2018-03-25 17:16 Chris Graham Note Added: 0005623
2018-04-05 13:10 Chris Graham Note Added: 0005654
2019-06-27 19:08 Chris Graham Tag Attached: Roadmap: v11
2019-06-27 19:08 Chris Graham Assigned To => Salman
2019-06-27 19:08 Chris Graham Status non-assigned => assigned