maverick/flex-template-web
1
0
Fork 0
mirror of https://github.com/kingomarnajjar/flex-template-web.git synced 2026-07-30 18:16:48 +10:00
Code Issues Projects Releases Packages Wiki Activity Actions
flex-template-web/docs/colors-and-icons.md
Kimmo Puputti e4310f6b8d Format text
2018-04-03 13:42:04 +03:00

2.5 KiB
Raw Blame History

Colors and icons

One of the first customisations is to change the marketplace colors and icons.

Colors

To change the marketplace colors, open the src/marketplace.css file and change the color variables:

--marketplaceColor: #c0392b;
--marketplaceColorLight: #ff4c38;
--marketplaceColorDark: #8c291e;

and

--marketplaceColorEncoded: %23c0392b;

N.B. search also from files for the color code c0392b. It's used directly in a few places like some icons, the 500 error page and map configurations.

Icons

The default icons are generated with RealFaviconGenerator. You can upload your original icon to the tool, customise the colors and themes, and download a generated set if icons and an HTML snippet to point to those images.

  1. Open https://realfavicongenerator.net/

  2. Upload your original icon image

  3. Configure platform specific icons

    Note: Remember to set the "Theme color" in the Android Chrome section

  4. Configure the paths to use /static/icons/ as the root path of the icons

  5. Generate the icons

  6. Unzip the favicons.zip archive and replace the default icons and files in public/static/icons/ with the new icons

  7. Replace the default HTML snippet in public/index.html with the snippet from the generator.

    Note: Remove the manifest link from the snippet as we have a default manifest with extra data compared to the generated one. You can edit the default file as you wish.

    Example HTML snippet:

     <!-- Start Favicons from https://realfavicongenerator.net/ -->
 <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
 <link rel="mask-icon" href="/static/icons/safari-pinned-tab.svg" color="#c0392b">
 <link rel="shortcut icon" href="/static/icons/favicon.ico">
 <meta name="msapplication-config" content="/static/icons/browserconfig.xml">
 <meta name="theme-color" content="#c0392b">
 <!-- End Favicons -->

Map marker icon

The map marker icon in the listing can be found in src/components/Map/images/marker-32x32.png. The dimensions should be 32x32 pixels, so the favicon-32x32.png file can be used to replace the map icon.