Netscaler 10.1 Custom AAA Login Page

We are Netscaler 10.1 and need to update the default AAA login page so request for one APP "sharepoint" get a different login screen which is more branded to our company but all other AAA services should use the default one for now.

Now I have never does this before but have read the process if different from 9.x to 10.x.  From my Netscaler I copied all files from the /vpn/resources folder to a folder on my desktop called ns_gui_custom.

I am be bit unsure of the following.

1) How to change the background color?
2) Change the logo's for our company ones's?

I am not a web developer so what are the best tools to do this
LVL 21
compdigit44Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brian CTXSupportCitrix ConsultantCommented:
Assuming you followed this to create the page:  http://support.citrix.com/article/CTX123736

You can reference this for some more detail on customizations.  http://support.citrix.com/article/CTX126206

I'd recommend getting any in-house web developers to do the customizations for you, unless you are familiar with CSS (Cascading Style Sheets).

Reference the last post here for changes to non-AG pages:  http://discussions.citrix.com/topic/348553-custom-theme-for-aaa-and-netscaler-gateway/

and # 3 on this page:  https://msandbu.wordpress.com/2013/11/04/netscaler-tips-and-tricks/

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
compdigit44Author Commented:
there a no easy to use designs tools you could recommend?
Brian CTXSupportCitrix ConsultantCommented:
Not personally.  I hate web development work.  Would take me hours to do what a web developer could do in ten minutes.
compdigit44Author Commented:
We do not have any web developers onsite though
Brian CTXSupportCitrix ConsultantCommented:
Can you zip the site code and upload it so I can take a look?  I don't have a non-production NetScaler available that I can play with.

https://ctxsupport.sharefile.com/r-r27ef3eaee3c4096b (Link expires May 22, 2015)
compdigit44Author Commented:
I cannot upload the file right now but they are all the standard finishes in the /nsgui/vpn/resources directory
Brian CTXSupportCitrix ConsultantCommented:
Whenever you can is fine.  I don't have access to a NetScaler that isn't production.
compdigit44Author Commented:
I will not be able to upload the files since its against our security SOP for the appliance... I am sorry
compdigit44Author Commented:
Does anyone have any suggestion or tips on how I can customize the AAA login screen on a Netscaler 10.1 with limit Web Dev experience or tools?

I only need tot update the logos, change the background color and remove reference to Citrix an replace it with our company name
Brian CTXSupportCitrix ConsultantCommented:
You'd have to copy the customization files when you create the to-be-branded site, which violates the SOP for the appliance.  Just tell them you can't do it for that reason.  Seems silly to me since it's just generic code, but I digress.
compdigit44Author Commented:
I understand your point about the code being generic but policy is policy...

Any other suggestion????
Brian CTXSupportCitrix ConsultantCommented:
Nothing I can do without seeing the site code.  Maybe someone else has done it and will chime in.
btanExec ConsultantCommented:
Ref "3: Change GUI on Gateway portal", and also already mentioned, the customisation will be in the folder "/netscaler/ns_gui"
For instance if we wish to change the background image we can add a new image to the folder /var/netscaler/gui/vpn/media by added a new image by the name bg_bubbles.jpg to replace the old background.

If we wish to change the text that appears in the portal we can change this under /vpn/resources/en.xml (This file contains most of the text that appears in the portal.)
https://msandbu.wordpress.com/2013/11/04/netscaler-tips-and-tricks/
the exact steps is also mentioned already in the shared "CTX123736" inside Citrix.com / Support

Actually since I am also not a web developer per se, and we just want to try changing the images by replacing the below file trial and error ... w/o code changes ...(though professional but is just a quick test out only)
/netscaler/ns_gui/vpn/index.html
/netscaler/portal/templates/homepage.html
/netscaler/portal/templates/ftlist.html
/netscaler/portal/templates/bookmark.html

/netscaler/ns_gui/vpn/images

/netscaler/ns_gui/vpn/images/caxtonstyle.css
/netscaler/ns_gui/vpn/images/NavCurrentBarLink.gif
/netscaler/ns_gui/vpn/images/ctxHeader01.gif
/netscaler/ns_gui/vpn/images/ctxHeader02.gif
/netscaler/ns_gui/vpn/images/NavBarLink.gif
/netscaler/ns_gui/vpn/images/CenterBlueBkg.jpg

/netscaler/ns_gui/vpns/images/JAVAHover_icon.png
/netscaler/ns_gui/vpns/images/Logoff_icon.png
/netscaler/ns_gui/vpns/images/ActiveX_icon.png
/netscaler/ns_gui/vpns/images/ActiveXHover_icon.png
/netscaler/ns_gui/vpns/images/ClientlessHover_icon.png
/netscaler/ns_gui/vpns/images/AccessGateway_icon.png
/netscaler/ns_gui/vpns/images/AccessGatewayHover_icon.png
/netscaler/ns_gui/vpns/images/WebUI_icon.png
/netscaler/ns_gui/vpns/images/WebUIHover_icon.png
/netscaler/ns_gui/vpns/images/Logoff_icon.png
/netscaler/ns_gui/vpns/images/LogoffHover_icon.png
/netscaler/ns_gui/vpns/images/JAVA_icon.png
compdigit44Author Commented:
Thanks ... I have read that I have to archive the files as as *.tar otherwise the file would be lost on a reboot.  Also will these seeing change affect all AAA request. I only need this for one URL request and that's it...
compdigit44Author Commented:
It sounds like I could take all of the image in the image folder and replace them with my images but use the same name and do the index.html file will automatically pick them up... do I have the right idea. Also can I name my folder holding my custom files anything I want or does it have to be a specific name
Brian CTXSupportCitrix ConsultantCommented:
That should work.  Download the contents so you can get the size of the image files.  From my recollection you can name it whatever you like.
compdigit44Author Commented:
Doing that now... Cannot find where the background color is set though... They really do not make it easy to do this
compdigit44Author Commented:
anyway to test the file without uploading it to the Netscaler
compdigit44Author Commented:
My whole goal in doing this is because I am moving getting ride of our ISA 2006 server which external SharePoint connections come into in favor of the Netscaler. I just need to change the page a bit so user do not get confused as to why they see a Citrix screen when connecting to Sharepoint
btanExec ConsultantCommented:
maybe since a slight diff then might as well use the "GreenBubble" example (see "Change GUI on Gateway portal")
For instance if we wish to change the background image we can add a new image to the folder /var/netscaler/gui/vpn/media by added a new image by the name bg_bubbles.jpg to replace the old background.
If we wish to change the text that appears in the portal we can change this under /vpn/resources/en.xml
Now if we want to same this custom theme, we first need to create a folder called ns_gui_custom under the /var/ folder.

This can in shell by writing  mkdir /var/ns_gui_custom

Next change directory to /netscaler by typing: cd /netscaler

Now we to archive the ns_gui folder: tar -cvzf /var/ns_gui_custom/customtheme.tar.gz ns_gui/* This is because when the netscaler boots it exports the tar file to the nsgui folder.
re-using the theme at global setting and simply replace the image file - that should give the different fell from ISA already https://msandbu.wordpress.com/2013/11/04/netscaler-tips-and-tricks/
btanExec ConsultantCommented:
Or just follow this example which include "disclaimer statement" in UI
To add a disclaimer to the login page of the Access gateway Enterprise Edition, complete the following procedure:

Copy the index.html and login.js files to the local computer.
Open the index.html file in a text editor and make the following changes to the content of the file:
This definition is available at approximately line number 67.
Add the text, highlighted in bold face for your reference, as shown in the following snippet:
...<tr>
<!– Disclaimer customization – Add a name to the LogonButton in order to be referenced later –>
<td></td><td></td><td align=”right”><input type=”submit” value=”Log On” onclick=”ns_check();” onmouseover=”this.className=’CTX_CaxtonButton_Hover';” onmouseout=”this.className=’CTX_CaxtonButton';” name=”LogonButton” disabled=”true”/></td>
</tr>
</table>
<!– Disclaimer customization –>
<input type=”checkbox” name=”chk1_button” onClick=”enableLogonButton(this);”/> Please enter you disclaimer text here
<!– End of Disclaimer customization–>
</FORM>
http://bretty.me.uk/how-to-add-a-disclaimer-to-the-access-gateway-enterprise-edition/
compdigit44Author Commented:
I found the really good link which steps through all the items I need to change..

http://www.icenlemon.co.uk/blog/?p=232

I hope this helps someone else as well.
compdigit44Author Commented:
any idea on how I can preview my change without have the upload them to he Netscaler? When I double click on the tmindex.html file I just get a blank pages... I feel that I am getting really close
btanExec ConsultantCommented:
most probably the dependencies stated in the html was not found in the same folder when you try to to open the html, try to see if you can get those together and re-open. good to spin off another qns if necessarily. thanks for sharing.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Citrix

From novice to tech pro — start learning today.