Solved

Citrix Web Interface Customization

Posted on 2014-04-07
7
605 Views
Last Modified: 2014-04-08
Hello all,

Need some help with customization of my Citrix Web interface, not sure what version of WI it is but its connecting to my XA 6.5 Farm.

My issue is trying to change the colour of the background colour of my settings page as it is currently black and would like to change it to the grey that is on the initial web interface log in screen.

I've found a few articles that point to changing the background colour of the initial login page of the WI but not the settings page.
Web-Interface-Settings-Backgroun.png
0
Comment
Question by:damejen
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 

Author Comment

by:damejen
ID: 39983096
Ok, I've found something that's gotten me a step closer but no cigar.

C:\Inetpub\wwwroot\\Citrix\SiteName\app_data\include\SettingsStyle

This is what I see but not sure what settings to amend to change the background colour



<%
// settingsStyle.inc
// Copyright (c) 2000 - 2010 Citrix Systems, Inc. All Rights Reserved.
// Web Interface 5.4.0.0
//
// Styles for the Preferences screens
%>

div.AdvancedMode {
    margin-left: 0;
}

.WizardBox .settingsHeader {
    border-top: none;
    padding-left: 0;
}

#preferences h3 {
      font-family: Arial, Helvetica, Sans-Serif;
      color: #888;
      font-size: 170%;
      font-weight: normal;
      margin: 0;
      padding: 5px 0 0;
}

h6.settingsHeader
{
      color: #2C639A;
      font-family: Arial, Helvetica, Sans-Serif;
    margin: 8px 0 0 0;
    padding: 10px 0 2px 25px;
    font-size: 150%;
    font-weight: normal;
    clear: left;
    border-top: 1px solid silver;
    background: white no-repeat 1px 12px;
}

h6.generalSettings
{
      background-image: url('<%=ClientInfoUtilities.getImageName(wiContext.getClientInfo(), "../media/User.png")%>');
}

h6.passwordSettings
{
      background-image: url('<%=ClientInfoUtilities.getImageName(wiContext.getClientInfo(), "../media/Password.png")%>');
}

h6.userExperienceSettings
{
      background-image: url('<%=ClientInfoUtilities.getImageName(wiContext.getClientInfo(), "../media/Desktop.png")%>');
}

h6.devicesSettings
{
      background-image: url('<%=ClientInfoUtilities.getImageName(wiContext.getClientInfo(), "../media/Plug.png")%>');
}

dl
{
      width: 100%;
      margin: 0;
}

dd, dt
{
    float: left;
    margin: 0;
    padding: 0;
}

dt
{
    clear: left;
    width: <%=wiContext.getString("SettingsLeftColumnWidth")%>;
    padding: 3px 5px 0 0;
}

dt p
{
      padding-left: 25px;
}

dd
{
    width: <%=wiContext.getString("SettingsRightColumnWidth")%>;
    margin: 0;
    padding: 1px 0 0 20px;
    margin-bottom: <%=wiContext.getString("SettingsGap")%>;
}

dd dt
{
    width: <%=wiContext.getString("SettingsMiddleColumnWidth")%>;
    padding-top: 0;
}

dd dt.nonLabel
{
    width: <%=wiContext.getString("SettingsRightColumnWidth")%>;
}

dd dt p
{
      padding-bottom: 0.5em;
      padding-left: 0;
}

dd dd
{
      width: auto;
      margin-bottom: <%=wiContext.getString("SettingsGap")%>;
}

dt ul, dd ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

dt li, dd li
{
    margin: 0;
    padding: 0;
}

.settingsButtons
{
    margin: -38px auto 0;
    padding: 0;
    text-align: right;
    width: 50%;
    float: right;
}

.settingsButtons.topBorder
{
      border-top: 1px solid silver;
      margin-top: 0;
      padding-top: 10px;
      width: 100%;
}

.settingsButtons .customButton
{
      float: right;
      margin: 0 2px;
}

dt .customButton {
      padding-bottom: 35px;
}

.preLoginPane
{
    background: #FFF;
    color: #000;
    width: 104ex;
    margin-top: <%=wiContext.getString("SettingsGap")%>;
    margin-left: 15px;
    padding: 4px 6px;
}

<%
// Bottom margin sets the gap between the options
%>
#<%=Constants.ID_OPTION_WINDOW_SIZE%>,
#Help_WindowSize img
{
    margin-bottom: <%=wiContext.getString("SettingsGap")%>;
}

<%
// Make inline help icons vertically centered with the select
// they are next too
%>
dd dd select,
dd dd input,
dd dd a img,
dd dt input,
dd dt a img,
dt a img,
label {
      vertical-align: middle;
}

<%
// Remove any margin when the inline help icon is next to a label
%>
a.checkboxHelp img
{
    margin: 0;
}

dd dt ul li,
dd dd ul li
{
  margin: 0 0 <%=wiContext.getString("SettingsGap")%> 0;
}

<%
// Ensure all select have the same width
%>
dd select
{
    width: <%=wiContext.getString("SettingsOptionWidth")%>;
}


label#lblWindowSizeCustom,
label#lblWindowSizePercent
{
    float: left;
    width: <%=wiContext.getString("SettingsLabelWidth")%>;
}

#preLoginButtonPane
{
    width: 104ex;
    padding: 6px;
    margin: 15px;
}

#preLoginButtonPane div input
{
    overflow:visible;
    padding-left: 1.25em;
    padding-right: 1.25em;
}

#bandwidthWarning
{
    margin: 8px 0;
}

<%
// We can't use "display: none" because some browsers eg. FF won't
// get the contents of the frame.
%>
iframe.HiddenIframe, div.HiddenDiv
{
    width: 0px;
    height: 0px;
    position: fixed;
    left:-100px;
    top: -100px;
    visibility: hidden;
}

<%
// IE-specific fixes
if (wiContext.getClientInfo().isIE()) {
%>

dd {
    /* IE ignores margin-bottom. */
    padding-bottom: <%=wiContext.getString("SettingsGap")%>;
}

.topBorder
{
      /* IE ignores margin-top. */
    position: relative;
    top: 10px;
}


.settingsButtons
{
    margin-top: -30px;
}

dl
{
      margin-bottom: <%=wiContext.getString("SettingsGap")%>;
}

dl dl
{
      margin-bottom: 0;
}

dd dt label,
dd dt p
{
      display: inline-block;
    padding: 2px 3px 3px 0;
}

dd dt label.noPush
{
      display: inline;
      padding-top: 0;
}

dd dt input
{
      padding-left: 5px;
}

<%
}
%>

<%
if ((wiContext.getClientInfo().isFirefox() || wiContext.getClientInfo().isIceweasel())
      && (wiContext.getClientInfo().getBrowserVersionMajor() == 2)) {
%>
#welcome
{
      overflow: visible;
    width: 400px;
    white-space: nowrap;
<%
}
%>
}
0
 
LVL 9

Expert Comment

by:Vijaya Reddy Pinnapa Reddy
ID: 39983154
0
 

Author Comment

by:damejen
ID: 39983317
Elchuru, thanks for the article, though it seems I cant change the colour to something a lighter shade of black such as grey, it just reverts to white.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 9

Accepted Solution

by:
Vijaya Reddy Pinnapa Reddy earned 500 total points
ID: 39983467
http://www.w3schools.com/cssref/css_colors.asp

Goto this link and select the color.
Copy the color code
Make it like
background-color:#A0A0A0;
0
 

Author Comment

by:damejen
ID: 39985413
Hi elchuru,

I did a bit of playing around and finally got it. You were on the right track though.

this is what I did:

body
{
    background: #566169;

NB. I did not add the -color to the line, just background: #color;

This solved the application background colour issue.

Thanks.
0
 

Author Comment

by:damejen
ID: 39985705
I've requested that this question be closed as follows:

Accepted answer: 0 points for damejen's comment #a39985413

for the following reason:

Amendments made to original solution to solve the problem.
0
 
LVL 9

Expert Comment

by:Vijaya Reddy Pinnapa Reddy
ID: 39985681
Hi damejen,

I tried to resolve your issue. Please mark it as answered or give some points
0

Featured Post

Secure Your Active Directory - April 20, 2017

Active Directory plays a critical role in your company’s IT infrastructure and keeping it secure in today’s hacker-infested world is a must.
Microsoft published 300+ pages of guidance, but who has the time, money, and resources to implement? Register now to find an easier way.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Citrix Consultant (Netscaler expert - Netscaler gateway) 3 112
CITRIX Xenapp 7.6 and RDS licensing 8 124
Citrix app access issue 1 40
Connecting Xenapp 7.x to Storefront 2.6 7 29
After several days of searching and hunting for limited documentation, I wanted to share this guide to hopefully save someone the hassle of trying to figure this out on their own. I have tested this on Xendesktop 7.1 and PS 4.5 running simultaneous…
If your vDisk VHD file gets deleted from the image store accidentally or on purpose, you won't be able to remove the vDisk from the PVS console. There is a known workaround that is solid.
How to install and configure Citrix XenApp 6.5 - Part 1. In this video tutorial we have explained step by step installation of Citrix XenApp 6.5 Server on Windows Server 2008 R2 is explained in this video. We have explained the difference between…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question