Home Cireson Uploads
image


IT Monkey will place code here as examples of what Cireson's consulting team has to offer as well as examples for public consumption to benefit the Microsoft System Center community as a whole.

DISCLAIMER

All files and projects located here come as is and without any warranty or support. We will attempt to improve the projects as time goes on based on customer and community demand. Comments and improvements are welcome as well as customization requests. Your use of these Cireson Uploads is subject to our Terms of Use.


Cireson's support team has no information on these projects outside of what you have available and will not provide support for these enhancements, extensions, and scripts.

Dont forget to checkout solutions uploaded by our customers, partners and community members here.

Cireson Portal Dark and High Contrast Modes!!!

Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭
edited February 2021 in Cireson Uploads

Hi Community,

I noticed a few threads where there were a mention of Dark Mode in the portal, and or compliance with WACG so I have built a customisation for a couple of Modes in the portal:

  • Default (What you know and love 😉)
  • Dark Mode
  • High Contrast Mode

I will say this is not Cireson code and will not be supported by Cireson, but I am looking to gather feedback around this customisation so that I can gauge interest and adoption. This feature may become a future add-in to provide a more robust and manageable solution

The installation is simple, copy the folder named 'AccessibilitySettings' inside the attached .zip folder into your customspace and add this line into your custom.js file:

loadScript("/CustomSpace/AccessibilitySettings/AccessibilitySettings.js",['']);

NOTE: This requires you to have the Cireson Script loader found here:

https://cireson.com/blog/how-to-organize-your-customspace-with-a-script-loader/

Files Downloaded here:

https://github.com/shanewh1te/AccessibilitySettings

The colours are configurable if you would like to get into that, simply open up AccessibilitySettings.js and edit the colours at the top of the file.

Please leave a like on the thread if you download and test this solution so I can get a rough idea of how many people are interested in this!

Let me know what you guys think, really looking to collate as much feedback as possible! Happy to answer any additional questions

Thanks,

Shane

Comments

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    If further help/screenshots are need explaining how it works, please let me know!

  • Emma_JenkinsEmma_Jenkins Customer IT Monkey ✭

    Hi Shane, thanks for sending me this. I loaded the script into our dev portal. Looks good and I like how easy it is for a Analyst to change to and from an admin perspective to tweak the colours if we want certain aspects to keep some elements of our theme. However it seems quite inconsistent on what pages it loads, sometimes it loads on home, views, pages etc. click away and come back to it and not only is it back in default but the setting has gone too even if the console is showing as loading the .js and also sometimes it loads as default before changing to what mode it has been set to. I think this could make some of our Analysts very happy but I would need it more slick in loading to please others. Hope this feedback helps :)

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    Hi @Emma_Jenkins

    That is really good feedback so thank you very much, I think I might have noticed a little of what you are describing, and that is one of the quirks of using the browser storage to remember your preference.

    How often does it happen? Would you be able to record the behaviour and send a sample over to me please?

  • Emma_JenkinsEmma_Jenkins Customer IT Monkey ✭

    Hmmm my browser cache is disabled so I don't know if that will make it better or worse. I will try with/without and get something over to you. Thanks

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    With browser cache disabled that would definitely make it worse 😜 As it saves your preference to the cache! Thanks :-)

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    Thanks to the help of @Emma_Jenkins I was already able to iron out some bugs:

    1. Sometimes the customisation didn't load because custom.js was loaded after the sessionstorageready event was fired
    2. Work Item banners on the form were not being coloured
    3. I have also moved this from a .zip file download to a github repo which is in the original post!
  • Sean_TerrySean_Terry Customer Advanced IT Monkey ✭✭✭

    This would be great as an Add in if users can decide.

  • Sean_TerrySean_Terry Customer Advanced IT Monkey ✭✭✭

    @Shane_White This looks good to me. It makes the section of the banner bar larger to accommodate it. Is there a way to make the cog smaller or allow it to fit to the bar?


Sign In or Register to comment.