As a customer I should be able to request TM with my specific customized look and feel, such as customized color scheme, logo and typeface. (FLARE ONLY)(WAS:Support for custom style sheets in articles)

[romichg]

• [ ] #769
• [ ] https://github.com/TeamMentor/WhatsCookin/issues/7
• [ ] AC1. Create a similar solution as "SiteData in 3.5" in TM 4.0
• [ ] AC2. Use SiteData to allow custom input fields at sign up page. (Such as EID for McKesson) Such that they are configurable to correspond to fields in TM 3.5 backend.

---

I think we need this one if we are to be importing policies from clients as libraries. Clients may want their own fonts and formatting on these documents.

http://d.pr/i/ztV2

[DinisCruz]

well, that is a tough one, because if the style sheet changes a global css variable like the one in the picture, then it will always screw up the main GUI

I'm making it By-design since there is not a lot we can do at the moment.

What is needed is for the Custom CSS to take into account the TeamMentor Div that it is place in

[romichg]

I am changing this to "Question Asked" since it seems like we should have a discussion on the necessity of this feature.

[tlaloc75]

We've gone down the path of custom CSS in the past and its been a mess. I think we should table this as by-design unless/until a customer requires it. At that point we can figure out how to solve the problem for that instance.

[DinisCruz]

We actually can support this now via the UserData capability to add files to TM

Those files could contain custom CSS :)

In fact the new version of the Docs site will shown this

Dinis Cruz

On 11 Apr 2013, at 23:54, tlaloc75 notifications@github.com wrote:

We've gone down the path of custom CSS in the past and its been a mess. I think we should table this as by-design unless/until a customer requires it. At that point we can figure out how to solve the problem for that instance.

— Reply to this email directly or view it on GitHub.

[tlaloc75]

Let's consider this re. customizing CSS that would impact all articles vs. allowing CSS per article. The former may have actually been the original intent of this issue. The latter is what we've tried without success.

[luchia]

Working on this today and I think to tackle this problem correctly, we're going to need to re-think the navigation bar as it currently is. Reasons:

• The icons are going to clash with customer colours;
• If client logos are longer or a different shape to the TM one, it's going to throw the balance of the screen out;
• Flare version should be special and I think the existing nav works well for the Jade version, but isn't really special for our best version of TM.

So, with that in mind I spent today looking at alternatives and have come up with two variations of one idea that I'd like to put out for feedback.

TM Version

As you can see, this is the main application view. Notice that icons have been removed and hidden under a hamburger navigation icon.

When the user clicks the icon, the menu drops down from the top (see example here for demo, although I think just a straight toggle with no effects will be best). I've done two options and I think both work well, but I have a preference for the second image.

Note, the icons/links are TM's green on hover.

---

Customer Version

This is what the same pages look like with a customer skin. Everything looks really polished still and we eliminate the chances of client company colours clashing with our green icons. Even though we have a totally different brand and colour coming into the app, it still looks really slick.

---

Let me know what you think.

[DinisCruz]

Yeah this is nice, and it keeps the top bar clean. Ideally the user will not need to use those icons/actions very often (so its OK to keep it hidden) On 24 Sep 2014 10:35, "Luchia Bloomfield" notifications@github.com wrote:

Working on this today and I think to tackle this problem correctly, we're going to need to re-think the navigation bar as it currently is. Reasons:

• The icons are going to clash with customer colours;
• If client logos are longer or a different shape to the TM one, it's going to throw the balance of the screen out;
• Flare version should be special and I think the existing nav works well for the Jade version, but isn't really special for our best version of TM.

So, with that in mind I spent today looking at alternatives and have come up with two variations of one idea that I'd like to put out for feedback. TM Version

As you can see, this is the main application view. Notice that icons have been removed and hidden under a hamburger navigation icon. [image: main-view] https://cloud.githubusercontent.com/assets/4547737/4385952/f08083c6-43ca-11e4-9ecc-852421c89676.jpg

When the user clicks the icon, the menu drops down from the top (see example here http://tympanus.net/Development/OffCanvasMenuEffects/topexpand.html for demo, although I think just a straight toggle with no effects will be best). I've done two options and I think both work well, but I have a preference for the second image. [image: menuexpanded] https://cloud.githubusercontent.com/assets/4547737/4385964/3239bada-43cb-11e4-905f-798e37d4935a.jpg [image: menuexpanded2] https://cloud.githubusercontent.com/assets/4547737/4385994/97acac2e-43cb-11e4-9ff5-a9eee73c4dab.jpg

Note, the icons/links are TM's green on hover.

Customer Version

This is what the same pages look like with a customer skin. Everything looks really polished still and we eliminate the chances of client company colours clashing with our green icons. Even though we have a totally different brand and colour coming into the app, it still looks really slick.

[image: customerversion] https://cloud.githubusercontent.com/assets/4547737/4386014/d6d6d546-43cb-11e4-9307-ed799eb76d81.jpg [image: customermenuexpanded] https://cloud.githubusercontent.com/assets/4547737/4386023/e6d8230a-43cb-11e4-910b-0edd28258396.jpg [image: customermenuexpanded2]

https://cloud.githubusercontent.com/assets/4547737/4386028/edf011b6-43cb-11e4-8a50-cd719554bff7.jpg

Let me know what you think.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-56646548.

[romichg]

I agree. This looks really good. one thing to consider is sites like https://mckesson.teammentor.net/teamMentor or https://sony-qa.teammentor.net/teammentor notice how there is text next to the logo and how in the other one we have two logos together.

[luchia]

I see what you're saying - do we need to put the TM logo in? We have the title and favicon on the application, so in tabs it's viewable as TEAM Mentor and the same for bookmarks view.

Given that the clients that are customising TM are already power users (or at least, that's what I've taken from previous conversations about McKesson) and we've sold them a high-tier package, do we need to remind them that we're TM?

[romichg]

This is more of a question for @tlaloc75 and for @SI-Lisa but in the past we have taken the position that we should remind customers that this is TM they are dealing with. And I would agree that whenever possible we should include TM logo.

[luchia]

This also comes back to offering colour customisation to the client and it seems like we're going to have some ugly apps if we let clients pick colours and our logo doesn't even stand out on it - do you know what I mean? So is it possible to invert or grayscale the TM logo so that it can be seen on different colours? Or, I think it would be even easier if the client couldn't change the colour of the navigation bar, then it's always white and the logo is always going to look good.

[SI-Lisa]

What we've done in the past with Safelight products (since we offered branded portals and players) is make sure that a white Safelight logo appeared somewhere prominent enough so the customer knew the product was owned by Safelight, as well as the simple text "Powered by Safelight" wherever a logo didn't make sense, so in the bottom right of the screen etc.

So, I think if it is efficient and affordable to allow for TM Portal customization (Campbell could help with this), we would help the customer create an experience for their users that feels seamless to their org, which is kind of what we want if we want them to use this for their security policies and customize content and integrate it into their daily workflow - but I would make sure we design it so the TM and SI logos are present, or at least a white TM logo with "Powered by Security Innovation" or some similar language, on every page.

Just my thoughts. It is tough right b/c we want them to know it is TM, but more than that I think we want them to encourage their teams to use it all the time, and often that means making it feel like it is a native environment to the customer.

As far as ugly logos and color schemes, I can tell you horror stories of customers who have wanted crazy combos in the past, and the way we combat that is to limit choices - allowing them to give us one primary and secondary color and a logo of a certain (often small-ish) size, tends to keep things looking respectable.

Let me know if I can help here. Like I said, I have experience with portal customization (the good and the bad!) and would love to be involved in writing requirements, or talking with the team over options, etc.

Adding Paul H here too, as he's done work on this as well.

Thanks!! Lisa

On Fri, Oct 3, 2014 at 2:25 AM, Luchia Bloomfield notifications@github.com wrote:

This also comes back to offering colour customisation to the client and it seems like we're going to have some ugly apps if we let clients pick colours and our logo doesn't even stand out on it - do you know what I mean? So is it possible to invert or grayscale the TM logo so that it can be seen on different colours? Or, I think it would be even easier if the client couldn't change the colour of the navigation bar, then it's always white and the logo is always going to look good.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-57760543.

[luchia]

Cool, makes sense. I'll keep working on this, there must be a way to get it looking good.

[luchia]

A few things I've been working on this weekend -

I think with clients that have logos with white backgrounds (and then choose white bgs, like McKesson) it'll look a lot nicer. It doesn't look too bad though. I like the second one the best, it's more balanced.

[michaelhidalgo]

Yes second one looks better, what happens with customizations like this one for Sony is that it would depend on where the client wants the logo to be located, position, however, it is good to know what options are available so one could recommend the best places.

The other customizations I've seen are more focused on text and logos.

2014-10-05 23:38 GMT-06:00 Luchia Bloomfield notifications@github.com:

A few things I've been working on this weekend -

[image: customerversion] https://cloud.githubusercontent.com/assets/4547737/4521743/c5ca383a-4d1a-11e4-9dc0-fbb3b24ea370.jpg [image: customerversion2] https://cloud.githubusercontent.com/assets/4547737/4521744/c5dd43b2-4d1a-11e4-8de0-5386f05421f7.jpg

I think with clients that have logos with white backgrounds it'll look a lot nicer. It doesn't look too bad though. I like the second one the best, it's more balanced.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-57976398.

Michael Hidalgo http://michaelhidalgocr.blogspot.com

The future has many names: For the weak, it means the unattainable. For the fearful, it means the unknown. For the courageous, it means opportunity. (1802-1885) French Poet, Dramatist, Writer

[SI-Lisa]

I would say we lock down the options - so we give them a layout that we prefer and they are allowed to give us a color and logo in the specified dimensions, so if everyone likes option #2 that Lucy shows above, that is how we could present it - the customer is allowed to give us a color for the top bar and the customer logo would always appear in the same spot.

On Mon, Oct 6, 2014 at 11:59 AM, Michael Hidalgo notifications@github.com wrote:

Yes second one looks better, what happens with customizations like this one for Sony is that it would depend on where the client wants the logo to be located, position, however, it is good to know what options are available so one could recommend the best places.

The other customizations I've seen are more focused on text and logos.

2014-10-05 23:38 GMT-06:00 Luchia Bloomfield notifications@github.com:

A few things I've been working on this weekend -

[image: customerversion] < https://cloud.githubusercontent.com/assets/4547737/4521743/c5ca383a-4d1a-11e4-9dc0-fbb3b24ea370.jpg>

[image: customerversion2] < https://cloud.githubusercontent.com/assets/4547737/4521744/c5dd43b2-4d1a-11e4-8de0-5386f05421f7.jpg>

I think with clients that have logos with white backgrounds it'll look a lot nicer. It doesn't look too bad though. I like the second one the best, it's more balanced.

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-57976398.

Michael Hidalgo http://michaelhidalgocr.blogspot.com

The future has many names: For the weak, it means the unattainable. For the fearful, it means the unknown. For the courageous, it means opportunity. (1802-1885) French Poet, Dramatist, Writer

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-58039822.

[luchia]

Yeah, I was hoping that we can lock down positioning so it's more unified and easier for us to get a design that doesn't look botched. I'm pretty happy with this, will wait to see what everyone else thinks.

[romichg]

I don't thin this option (locking down the position) works today with Sony. They are very picky about their logo. We have gone through numerous logo changes with them. So option 2 would not work. We need to be able to support what we have today.

1. Customer completely 'owns' the top bar. We can limit them on size of the bar at most. This is what sony does toda sony.teammentor.net/teammentor. Note the extra text they have there. We need to be able to support it.
2. Customer owns part of the bar. Like mckesson.teammentor.net this is where we have more flexibility in dictating the size and this is where the hamburer option in https://cloud.githubusercontent.com/assets/4547737/4385994/97acac2e-43cb-11e4-9ff5-a9eee73c4dab.jpg might work.

[luchia]

What if we switched it over like the below position? Seems to me like that would solve the problem of Sony wanting their logo in prime position and then we still get our logo on plus it's in a prominent area (right next to the hamburger icon).

[SI-Lisa]

I see that today we have been flexible with customer requests (as shown where McKesson and Sony have different look/feel), but I think that it is unreasonable for a customer to expect Lucy and the TEAM Mentor team to reconfigure a product for their specific demands. That is a lot of work and energy for a small return. Also, it creates portals that look different and sometimes sacrifice the TEAM Mentor logo, which isn't great.

I am guessing we want TEAM Mentor to be a recognizable product from a glance - so that someone working at Sony who got a job at McKesson could log on and say "Oh, we had this same product at my last company" and the easiest way to maintain brand integrity is to lock down the elements.

We could start with a clean slate with TEAM Mentor 4.0. Perhaps determine now how we would like the customization to work (top nav bar and logo in one place) and then just set the expectations with the customers that there are a lot of amazing improvements to capability and look and feel, but this means they have to respect and work within the new interface's customization guidelines, and part of that means leaving the TEAM Mentor logo in a prominent place and/or only having one option for placement of their logo/colors.

I really like Lucy's most recent design, with the customer logo on the left, a colored bar to reflect the customer's look/feel and the TEAM Mentor logo on the right - do we think this would work with other customers?

On Tue, Oct 7, 2014 at 10:30 AM, Luchia Bloomfield <notifications@github.com

wrote:

What if we switched it over like the below position? Seems to me like that would solve the problem of Sony wanting their logo in prime position and then we still get our logo on plus it's in a prominent area (right next to the hamburger icon).

[image: customerversion] https://cloud.githubusercontent.com/assets/4547737/4543787/62afcca0-4e2e-11e4-80b3-a51ec2ccbe79.jpg

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-58193274.

[luchia]

While we're talking about customisation, it's probably a good time to bring up what we want to show on mobile nav with the custom version.

I did some quick mockups of what the web application would look like below, but for the customer version it's going to be difficult to have TM's logo in there as well as the clients. In the case of mobile browsers, would it be best to display only the client logo?

I think that each separate link should have it's own row and the icon & text corresponding to the link should be large and easy to click, so people with big fingers don't have any issues.

[romichg]

@SI-Lisa I agree with you in principal. However, I think allowing customers to re-brand TM, if not an important selling point, is a prior commitment, we need to be able to maintain it. Also remember that one of the key selling points of TM is to allow customers to change content to suit their needs, include their policies, code, etc, so for a big enterprise like Sony its important that their users from all over the world come to this portal and see a branding of an intranet site, not an outside portal. At the same time I agree that we need to show branding and have a recognizable look and feel. I guess the question here is more for @tlaloc75 - how much are we committed to supporting a re-branded version of TM.
Another point, I think I brought this up before, what if visually, we allow a fully re-branded version to have the whole top banner, but move our logo and the navbar right below it. Change the TM Logo to say "powered by".

As far as mobile version goes, I think here we can do the customer logo on top, and "powered by" all the way on the bottom? Or we take the position that we don't do custom logos on mobile.

[SI-Lisa]

Roman, You make great points. I agree that if we are encouraging an org to use TM as their own and embrace that by putting in their own content, etc., then being more subtle in the way we keep TM on there is important.

I do think moving the TM logo to the second level or doing a “powered by” may be the perfect compromise.

On Oct 9, 2014, at 10:22 PM, RomichG notifications@github.com wrote:

@SI-Lisa I agree with you in principal. However, I think allowing customers to re-brand TM, if not an important selling point, is a prior commitment, we need to be able to maintain it. Also remember that one of the key selling points of TM is to allow customers to change content to suit their needs, include their policies, code, etc, so for a big enterprise like Sony its important that their users from all over the world come to this portal and see a branding of an intranet site, not an outside portal. At the same time I agree that we need to show branding and have a recognizable look and feel. I guess the question here is more for @tlaloc75 - how much are we committed to supporting a re-branded version of TM.

Another point, I think I brought this up before, what if visually, we allow a fully re-branded version to have the whole top banner, but move our logo and the navbar right below it. Change the TM Logo to say "powered by".

As far as mobile version goes, I think here we can do the customer logo on top, and "powered by" all the way on the bottom? Or we take the position that we don't do custom logos on mobile.

— Reply to this email directly or view it on GitHub.

[luchia]

I'm not unhappy with this decision :) It's going to look a lot neater for the client -

[romichg]

Hmm.. no the point was to have the full Sony logo and the bar above our navbar and logo. So we really don't change anything on our end. Can you also put the text we have next to the Sony logo in production?

[luchia]

So something like below where the TM navbar remains the same (no matter what client it is) and they add their own navigation bar above or below ours?

[romichg]

Exactly! it wouldn't be a navigation bar for them, it would just be a banner. I don't think it look extremely bad. What do you think?

[michaelhidalgo]

Yeah it looks very nice.

We will need to define/document the logo sizes, so eventually when a client wants a customization we can request a logo with those dimensions.

2014-10-15 21:06 GMT-06:00 RomichG notifications@github.com:

Exactly! it wouldn't be a navigation bar for them, it would just be a banner. I don't think it look extremely bad. What do you think?

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-59308220.

Michael Hidalgo http://michaelhidalgocr.blogspot.com

The future has many names: For the weak, it means the unattainable. For the fearful, it means the unknown. For the courageous, it means opportunity. (1802-1885) French Poet, Dramatist, Writer

[luchia]

I like this a lot better than some of the other versions. Ready to be deved?

[romichg]

Yep, I think this is. We need a Jade version for this as well @tlaloc75 @SI-Lisa any objections/improvements to the above One thing is I am not sure if for some customers we will be allowed to have our logo there. So we should make the display of the logo configurable option. But that should change anything from the UI perspective right? .

[SI-Lisa]

I think this is perfect. For those customers where we cannot show our logo, having "powered by TEAM Mentor" or something more subtle like that should take care of those instances, too.

On Thu, Oct 16, 2014 at 12:46 PM, RomichG notifications@github.com wrote:

Yep, I think this is. We need a Jade version for this as well @tlaloc75 https://github.com/tlaloc75 @SI-Lisa https://github.com/SI-Lisa any objections/improvements to the above One thing is I am not sure if for some customers we will be allowed to have our logo there. So we should make the display of the logo configurable option. But that should change anything from the UI perspective right? .

— Reply to this email directly or view it on GitHub https://github.com/TeamMentor/Master/issues/237#issuecomment-59392581.

[luchia]

Deved, currently using SI logo to show placement. Need to work on mobile solution.

[luchia]

I thought I'd take some screenshots of my version so you can see the little bits and pieces I've been working on the last couple of months. Also, this way I can get feedback and continue refining them.

Jade Version

Flare Version