Salsify/front-ui-tweaker
1
0
Fork 0
Code Issues 4 Pull Requests 3 Packages Projects Releases Wiki Activity

update readme with some illustrations

Browse Source
This commit is contained in:
scar 2022-02-03 15:50:42 +01:00
parent d9cad70184
commit e94a88cc16
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -10,10 +10,10 @@ This content aims to change a little the Alkemics interface to help you recognis
### Change banners ### Change banners
If you are on Preprod, the teal navbar will be enhanced with a light strip. If you are on Preprod, the teal navbar will be enhanced with a light strip. On Load testing, the stip is purple. On your Pillar, the stip is cyan. On Prod, the navbar change colors using Salsify colors. The logon footer also work that way.
On Load testing, the stip is purple.
On your Pillar, the stip is cyan. ![example of PPR banner](public/PPR_banner_ex.png)
On Prod, the navbar change colors using Salsify colors. The logon footer also work that way. ![example of Pillar banner](public/PLR_banner_ex.png)
If you have multiple windows or tabs on theses opened, you will quickly see on which one you are. If you have multiple windows or tabs on theses opened, you will quickly see on which one you are.
@ -22,9 +22,11 @@ If you have multiple windows or tabs on theses opened, you will quickly see on w
If you use a Chrome profil for Retailers accounts, you can change the top right user icon to a shop one. If you use a Chrome profil for Retailers accounts, you can change the top right user icon to a shop one.
If you use a Chrome profil for Manufacturers, it can change it to a factory. If you use a Chrome profil for Manufacturers, it can change it to a factory.
![example of orange shop icon](public/user-orange-shop.png)
## How does it works? ## How does it works?
Nothing is changed on the software itself: It's your broswer that applies more CSS rules to make it happens. It relies on the Chrome extension xStyle, that make it easy to turn them on or off, just in case it conflict with the website. Nothing is changed on the software itself: It's your broswer that applies more CSS rules to make it happens. It relies on the Chrome extension xStyle, and that make it easy to turn them on or off, just in case it conflict with the website.
1. Install xStyle from the [Chrome Web Store ⎋](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj) 1. Install xStyle from the [Chrome Web Store ⎋](https://chrome.google.com/webstore/detail/xstyle/hncgkmhphmncjohllpoleelnibpmccpj)
2. In the extension, create a new Style 2. In the extension, create a new Style
@ -42,5 +44,5 @@ Repeate for each styles you want to enables.
* `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files. * `Whiter banner.css`: Look & feel, mainly changing text to pure white and the hover and active elements. A _must have_. Works with the others files.
* `Retailers Sigils.css`: Change the top-right user icon to a Shop one, and make it orange. This can't tell if you'r actually logged as a Retailer or not. * `Retailers Sigils.css`: Change the top-right user icon to a Shop one, and make it orange. It actually don't know if you'r logged as a Retailer or not.
* `Suppliers Sigils.css`: change the top-right user icon to a Factory one, and make it turquoise. This cn't tell if you're actually logged as a Manufacturer or not. * `Suppliers Sigils.css`: change the top-right user icon to a Factory one, and make it turquoise. It actually don't know if you're logged as a Manufacturer or not.