Cireson Portal Themer BETA Release!

james_kleinschnitz

I am excited to announce that the BETA version of the Cireson Portal Themer is now available to the community & ready for your feedback. The Cireson Portal Themer is a web based application that will allow you to recompile your Cireson Portal look & feel from a global level rather then individual CSS definitions. 

Until we officially launch the Cireson Portal Themer please use this thread as a means of support and place to provide feedback. 

You can access* the Cireson Portal Themer at:

http://portalthemer.cireson.com/

*Currently works best on Chrome and is not compatible with IE 11

THANKS

Steve_Wright

Very cool!  Thanks James!

Adrian_Mataisz

A preview/demo portal would be nice to give you an idea on what  are you changing.

seth_coussens

Adrian_Mataisz said:

A preview/demo portal would be nice to give you an idea on what  are you changing.

Maybe just an image of the controls/links/headers that are affected by that particular color would be something more attainable in the near term.

PIERRE-LOUIS_DURRIS

Thanks for this beta version. I can go-live with a corporate theme generated by your beta version of the themer. Great job !
Just two remarks :
- I often have an error when I let some colors as automatically generated
- For status colors, is-it linked to IR or SR status ? Indeed, the work item status field always stay blue. Never change to red if cancelled or error.

Clayton_Farr

@Adrian_Mataisz / @seth_coussens Completely agree. A number of the editable options cascade throughout the application, such as color and base type sizes, but adding key examples for each is definitely in our sights once we can make sure everything works as expected. Also expect theme examples that help illustrate how the settings work as a whole.

@PIERRE-LOUIS_DURRIS Thanks for the feedback. Could you provide a bit more detail on the error you're receiving from the colors? We'll double-check on the status colors; we could have missed something there.

james_kleinschnitz

@PIERRE-LOUIS_DURRIS  the status label here maybe a little misleading. It is not directly related to any work item statuses but global styles related to showing "status".   For example these colors are used for the alerts you receive when you save a form.  I will review with @Clayton_Farr and see if we can make this a little clearer. 

Jonathan_Boles

Thanks @james_kleinschnitz and Cireson Dev team for this Beta! I know during one of the webinars where this tool was discussed, there was mention that the tool would support other versions of the portal as well. Is the "Portal Version" selection feature only planned for releases 6+ or will older versions be added for support as well?

james_kleinschnitz

@Jonathan_Boles The functionality to accomplish this is only available in v6+ so older versions will not work.  We talked about adding an option to preset values that would allow the look and feel to match older versions, is this something people are interested in?

PIERRE-LOUIS_DURRIS

@james_kleinschnitz : It would be perfect if we could save the parameter we choose because if in next future I need to create my CSS again for V7, I wont be able to choose the same parameters. 
@Clayton_Farr : I haven't been able to reproduce the error but when I was downloading the CSS, there was only one line talking about wrong colors code. I might come from a bad use of the apps.

Jonathan_Boles

@james_kleinschnitz, yes it would be helpful if there were themes to match the look at feel of older versions (specifically v4) It's also helpful for environments that are running multiple iterations of the Cireson portal to help distinguish between them and not just changing colors as we are to date.

james_kleinschnitz

@PIERRE-LOUIS_DURRIS I had a feeling this was going to come up, so we actually store your settings inside the exported css file.  We are going to add a feature that will allow you to upload your existing file and restore your settings. 

Leigh_Kilday

The Portal Themer page doesn't display properly for me in IE11 but it works in Firefox 42.

Mark_Wahlert

I'd like to request:

1. a preview mode or at minimum a graphic to show what each attribute changes. We have a 2-3 day transfer delay of the .css due to our environment, so without a preview each change takes 2-3 days to view. 
   
2. Can we alter the colour of the side pane? It seems to only allow a sliding scale hue adjustment. We want the top bar and side panel to be different colours.
   
3. Can I load my previous settings? I tested using some random settings, I can see these in the TEST portal now but it'd be great to load my .css to make the necessary changes.
   

james_kleinschnitz

@Mark_Wahlert
1. Seems like some kind of preview is a popular request, for the intern you could inject the contents of the output into the the custom.css via the chrome developer tools -> Sources to get an instant preview.
2. This is currently not explicitly available in the themer, but will take note.  You can always still accomplish this via custom.css overwrite rules
3. This is coming see my note to PIERRE-LOUIS.

Tom_Hendricks

Regarding the Brand Color / Dark Variation-- what if your brand color is already fairly dark?  Could a "Light Variation" be swapped in, in that case?

Clayton_Farr

Hey @Tom_Hendricks,

In general that should work. Here are the normal and 'dark' colors inverted, via the Themer, on the Cireson Portal –



I suspect there may be places where certain color combinations could cause usability issues (illegible text, etc.) The primary thing I'd shoot for is to have reasonable contrast between the the two colors (whether lightness or hue). If you find specific places that are an issue when implementing this, let us know and we can see if we have the right levers in place in the Themer to reconcile this.

To invert the normal / dark brand colors in the Themer, I'd recommend doing this –

1. Place your darker brand color's hex value in the 'Brand Color' input
2. This should automatically add a darker version in the 'Brand Color – Dark Variation' input (if the 'Create automatically' checkbox is selected).
3. Next, deselect the 'Create automatically' checkbox
4. Manually update this 'Dark Variation' color to be either a lighter version of your brand color (this will look best), or opt to put in a different, contrasting color / hue.

Hope this helps.

Eds

Hi I've tried creating a theme today where the only things I have changed have been the brand colour the link colour, and the Drawer Icon size (from 23 up to 64 pixels)  Ive left everything else default or "Create automatically" for the colour variations.  The resultant custom.them.min.css file contains no css but instead has this error:

error evaluating function `lighten` The first argument to lighten must be a color (did you forgot commas?) index: 22252

Am I doing something wrong?

james_kleinschnitz

@Eds can you let me know what Color(s) you changed the Brand Color to and the Link Color to.

Adrian_Paech

Just a Little feedback.
i have tried using the themer, and the output seems to be a bit bloated (1mb etc). Could be quite lslow to download this when connecting to the site for the first time.
Because of this I have decided not to use it.
i would hope this can be reduced to 150kb max in the future.

To help with this, could we select the sections of the themer we want to include or exclude from the css, rather than assuming we want to configure all of the settings?

Cheers,
Adrian

Clayton_Farr

Hey @Adrian_Paech,

You're right. Currently the custom CSS is definitely heavier than we'd like. Our first approach, to get the Themer usable has been to recompile all of the Portal's CSS with any customizations you've added.

This both creates a big file and requires users to download redundant CSS - which makes it workable but does put a load burden on first time and in-frequent portal visitors. Ideally, we'll ultimately be able to allow you to customize the original, compiled CSS which would solve both problems.

As we work toward the ideal, I like the idea of only compiling things related to what you've updated. The trick will be targeting all of the bits, and only the bits, related to the tweaked variables. We'll keep an eye out to how we could possibly do this along the way. Thanks!

Adrian_Paech

Sounds perfect. Thanks for responding so quickly. Looks like you have a workable idea / solution.
Cheers,
Adrian

Eds

#005A96 for the brand colour and #4472C4 for the link colour, as i mentioned I've allowed all the variation colours to be created automatically.  I've confirmed again this morning that changing just those two parameters gives the result i described before but that changing no parameters at all gives me a correct CSS file.

Eds

As a suggestion, the CSS file produced has no end of line characters and being only 2 very long lines is difficult to read,  could the generated CSS be formatted to be more readable?

james_kleinschnitz

@Eds  I can confirm the same issue you are getting, very strange I will look into it.
You can simply use a tool to unminify the css if you wish, just google unminify css.

David_Allen

I used the themer today to re-apply corporate colours after upgrading the portal, and it worked very well indeed.  Certainly beats working out all the changes I would have needed to make in the custom.css file manually :-)

I do agree with some of the comments made as well, particularly the preview of what gets changed, and the ability to upload and alter existing CSS.

Thank you very much for providing this tool!

Eds

Does the portal determine the size of textboxes for string prompts based on the character limit (if any) configured for the prompt?

Joe_Burrows

Eds said:

Does the portal determine the size of textboxes for string prompts based on the character limit (if any) configured for the prompt?

It does indeed, see below for more details:

https://community.cireson.com/discussion/141

Clayton_Farr

@David_Allen Warms my heart to hear

David_Allen

After a really good first experience, now I just get a CSS file generated with only this in it?.... 'error evaluating function `lighten` The first argument to lighten must be a color (did you forgot commas?) index: 22252'

The only properties I was changing were 3 colours!

I have also noticed an issue when trying to use the site in Firefox.  All the Text properties show as invalid values, yet they are the default values, that show without issue in other browsers.

james_kleinschnitz

@David_Allen can you share the color changes you made with us?  Also I will note the FF issues.

Thanks