asked on

How to Fix Appearance around Published apps in list on StoreFront 3.15

Appearance Issues - Have a Netscaler v 11.1 sitting in front of StoreFront 3.15. I am trying to do a couple of things and would like some guidance. I have provided my current configuration as well.

Things to Solve -
#1 - I have some apps that will Word Wrap properly, but others get cut off as shown in attachment - how to force a wrap?
#2 - How to reduce the amount of white Space between Application Name and Folder
#3 - Has anything evolved to provide a detailed view of the applications like in the previous WebInterface display.

Thanks in Advance.

Current config located in \Inetpub\ctxfolder\Citrix\CitrixStore_web\custom\style.css

USE
.storeapp-icon {
height: 30px;
width: 30px;
}
.storeapp .storeapp-name {
position: absolute;
top: -64px;
left: 39px;
}
.folder-count {
left: 2px !important;
top: 12px !important;
}
.storeapp-action-link {
display: none;
}
.customAuthFooter {
font-size:12px;
color:white;
text-align:center;
}
StoreFrontAppearanceApps.png

Sam Jacobs

#1 and #2 are happening because your CSS is moving the application name to the right of the application icon instead of defaulting to below it. In some cases, that is making the application name exceed the width of the tile, and leaving extra space where the application name was.
Did you intend to move the name? If not, you can move it back by removing the following part from your CSS:

.storeapp  .storeapp-name {
    position: absolute;
    top: -64px;
    left: 39px;
}

Open in new window

Since your icons are smaller than the default, you would probably want to move up the name and folder by adding the following:

.storeapp-details-container {
   top: 40px !important;
}

Open in new window

If you intentionally moved the application name, you would need to increase the width of of the application tiles, and you may not fit as many across on each line.

jnordeng

ASKER

Thanks, I was experimenting to make better use of the space and not so much white space. Our users are used to the detailed list available via Secure Gateway / Web Interface. So I could extend the width of the application panels. Or, is there perhaps a way to force word wrap, then the names wouldn't get cut off? Then I could leave the panel sizing alone. Just a thought.

Thanks in advance.

Sam Jacobs

You force word wrap by changing the size of the tile within its container.
You wouldn't be able to keep the same panel sizing with the names to the side.
When you say a detailed list, do you mean that you want to include the description field from the published app?

jnordeng

ASKER

They should be ok with the Application Name, Icon and the folder as shown in my current example. The only thing I really need to fix is that some of our application names are long, so wrapping would be preferred rather than cutting off the app name.

I was just trying to make it a bit more user friendly for those that used the detailed view in WebInterface, i.e. shown in new attachment.
StoreFrontAppearanceApps2.png

Sam Jacobs

In the WI detailed view, there is one application per line.
Is that what you are looking to replicate (which would mean users would need to scroll if there are a lot of apps).
Or would you like 2 or 3 per line?
And are you looking to add the app's description (as in the WI detailed view)?

jnordeng

ASKER

How difficult is it to mimic the WI view? If we did this view would users be able to change back to the current layout? Just trying to think of all users
If complex, I think 2 or 3 applications per line would be fine.
Initially was thinking to hide the app's description due to real estate and focus on a descriptive application name. However, if there is a way to display in a detailed list, that works as well.

Thanks

Sam Jacobs

Let me first try to do the 2 or 3 per line.
What is the approximate length of your longest application name?

jnordeng

ASKER

Umm, looking.... looks like 45 characters including spaces.

Sam Jacobs

OK ... thanks. The rest of my day is a bit tight, so there may be a bit of a delay in getting this to you.

jnordeng

ASKER

Not a problem, really appreciate your input.

Have a good night :)

Sam Jacobs

You too.

ASKER CERTIFIED SOLUTION

Sam Jacobs

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jnordeng

ASKER

Thanks, looks much better - sending to the team for feedback, hopefully this will work for them :)

Thanks

Sam Jacobs

Just checking to see if you needed any adjustments ...

jnordeng

ASKER

Thank you, your help in adjusting the appearance allowed the team to determine their preference and give me more options to change the appearance.

Your help is appreciated.

Thanks

Sam Jacobs

You are most welcome.