Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 627
  • Last Modified:

Citrix Web Interface Customization

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
damejen
Asked:
damejen
  • 4
  • 3
1 Solution
 
damejenAuthor Commented:
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
 
Vijaya Reddy Pinnapa ReddyCommented:
0
 
damejenAuthor Commented:
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
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 
Vijaya Reddy Pinnapa ReddyCommented:
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
 
damejenAuthor Commented:
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
 
damejenAuthor Commented:
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
 
Vijaya Reddy Pinnapa ReddyCommented:
Hi damejen,

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

Featured Post

Get quick recovery of individual SharePoint items

Free tool – Veeam Explorer for Microsoft SharePoint, enables fast, easy restores of SharePoint sites, documents, libraries and lists — all with no agents to manage and no additional licenses to buy.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now