Netscaler 11 Theme Customization - How to Add Links and Verbiage

[Mike Roselli]

Luan Nguyen,

 

Yes it does work with 11.0.64.34 F. What part is not working?

 

FYI

In order for the changes to take effect the logonstatistics cache may need to be invalidated, as others have posted. If you have platinum licensing then you can go to "Optimization --> Integrated Caching --> Content Groups" and invalidate the loginstaticobjects. (For me the cache, with platinum license, seems to update and the page displays correctly after about 120 seconds which is the default time period when Integrated Caching is enabled.)

If you do not then you can follow Christian Schwendemann's comment:

"Posted 29 December 2015 - 11:08 AM

Thanks for the writeup

 

I was getting crazy on my Netscaler why this is not working.

I´ve been double checking all the settings.

 

In the end it turned out that due to the wizards created "_cacheVPNStaticObjects" cache policy, that was binded to my netscaler gateway vserver, it never showed me these changed settings, while I was seeing a hit on the policy.

 

I chose "edit" and changed it from cache to no cache and voila, it works  :)
Afterwards, when I reactivate it the change is still there and persists. 

Funny thing aside is, that when I change the option it tells me, because of a standard license, that the feature is not licensed.. anyway it seems to use integrated caching when its bond to a netscaler gateway.

"

[Luan Nguyen]

The content does not show at all. I did change the integrated caching from cache to no cache without any luck.

[Mike Roselli]

not sure then. I do know it works.

 

Check the policies and make sure the hit counter is being incremented. I would also check the action and see if there is maybe a typo somewhere like a misplaced/incorrect escape character or invalid HTML code being rewritten into the javascript file. You can also use the web browser's developer tools to view the page and files.

 

 

FYI

The javascript file you are editing is generating the HTML code for the logon page so the rewrite action is adding javascript code to add/change HTML code.

[Luan Nguyen]

Hi Mike,

 

I deleted the custom theme and started all over again and it worked. Not sure what the issue was.

 

Thanks again for all your help.

 

Luan

[Luan Nguyen]

on a side note. Is it possible to add verbiage in the header? Could some one please help?

 

Thanks!

[Mike Roselli]

Luan,

 

Anything is possible :)

 

I am going to assume by header you mean very top and center of the logon page. This should be possible by rewriting the gateway_login_view.js file and appending some HTML code to "this._parent" before any other appends. (the script is building the web elements and adding in order of appearance. So as an example the following should work:

 

add rewrite action rw_act_login_header insert_before_all "HTTP.RES.BODY(120000).SET_TEXT_MODE(IGNORECASE)" q{"this._parent.append($(\"<div style='text-align:center;color:yellow'>THIS IS A TEST</div>\"));"} -pattern "//start header code"

 

add rewrite policy rw_pol_login_header "HTTP.REQ.URL.CONTAINS(\"gateway_login_view.js\")" rw_act_login_header

 

The above will add THIS IS A TEST in yellow to the top-center of the page.

 

 

 

 

Hopefully that will get you started.

 

 

BTW

I use Chrome's developer tools (F12) and test my HTML/script code using the Resource Override extension. the combination allows me to view the site files as they are fetched, copy and override specific one to locally cached so I can edit/debug changes.

[Sam Jacobs]

Mike,

 

Really great work!

I have one suggestion, which might make things a bit easier, and that is to add an id attribute to any DIVs that you add. You can then:

- create CSS selectors for them in custom.css, and 

- add text to them by adding keys to the XML files in the resources directory.

 

That will make the rewrite actions smaller (less likely to hit string limits) and easier to understand.

 

Also, if the additions are more than a few DIVs, you can also create alternate gateway_login(_form)_view.js files, and use a rewrite action/policy to swap the entire file!

 

Regards,

-Sam

[Mike Roselli]

Thanks Sam!

 

I agree that adding id attributes and rewriting the css file would make it easier to understand. There is another forum post about creating alternate script files on here somewhere. I am in a position where it is easier for me to create rewrites then upload files to the appliance so i focused on a rewrite only approach.

 

Hopefully this will be a temporary thing anyways... My Citrix TRM told me that the following enhancement request were approved for development:

 

Ability to customized gateway UI theme -Header and Footer text areas

Ability to customized Gateway UI theme - Customize the EULA check box verbiage

Ability to customized UI theme - favicon graphic

 

It looks like it is going to be added into the 11.1 code, not sure if it will be in the initial or a point release after but it should remove the need to rewrite/replace files for simple code additions or verbiage in the future.

[Dale Roberts]

Hi guys, Is there away of moving the logo and logon box more to the right, Also if i wanted to add another link below the loginbox  I have one link already using carl stalhoods method, via modifying the login_forn_view.js and saving it using rc.netscaler

But I want another link under that 

[brandon dockery1709156285]

This is awesome. I've tried for a couple hours to call an external .HTML footer file and embed it in to the page with this method, to no avail. This would get around the character limit issue and make things a lot easier to manage. 

 

Anyone have any solutions for that, it would rock. 

[Sandy Williams]

This is an excellent post, thank you!  One comment is that Citrix released Portal themes now for AAA VIP's (as of the latest 11 firmware).  Your bind commands for the rewrite policies can't apply to AAA so I had to bind mine globally.  I just need to figure out how to write the policy so it only applies to the single AAA site.

 

I don't suppose anyone has come across how to modify the favicon for a singular site?  I read this blog below but it would be a global change which isn't what I want..

http://www.jasonsamuel.com/2015/07/10/how-to-fix-green-bubble-theme-after-upgrading-to-netscaler-11-unified-gateway/

[Luan Nguyen]

11.1 has been released recently. Could someone confirm it the feature is included?

 

Thanks!

[Adam Oliver1709152437]

I'm not seeing how the text can be added in 11.1.  There are lots of options on how to style header and footer info but no actual box to add the footer text.  I've tried the rewrite rules and it shows the policies are being hit but I do not see it appearing on the page.  I am using 11.1 47.14.  Has anyone tried these rewrite rules in 11.1?  I need to add a disclaimer to the logon page that does not require clicking on the Terms and Conditions link.

[Luan Nguyen]

I tried the rewrite with NS11.0.64.34 and didn't see anything appearing on the page. I had to do an IE force refresh (ctrl + F5) in order to see it.

 

I'm not sure if there's a way to force the change without user's interaction on their client machines.

[Adam Oliver1709152437]

I think I had a combination of needed a forced refresh and needing to invalidate the cache objects.  I only did the latter before.  All seems good now.  Thanks Luan!

[Luan Nguyen]

no problem Adam. If you try to make changes to the footer/header. Do you need to do a forced refresh on the workstation to see the changes?

[Adam Oliver1709152437]

I think I do.  I have encountered one annoying issue.  Occasionally the login box does not appear at all and I only see the background image.  I thought I was botching something until I noticed that if I went to another computer it was fine.  As of now I have two machines I cannot use for previewing until I figure out what the problem is.  Fortunately I still have a few more around to keep working.

[Vincent Alberti1709156874]

Today I got this footer text working under NS 11.1 47.14 so I can confirm this works fine. First it didn't work but I figured I set my rewrite action to INSERT_BEFORE instead of INSERT_BEFORE_ALL. So be aware for that one! ;) Didn't have to do anything with those cache settings as I'm using a standard license and not a platinum. :)

[Luan Nguyen]

@Vincent Alberti

 

Can you share the cli that you used? I tried with the Insert_before and got a syntax error.

 

Thanks,

[Les Kelemen]

Just wanted to thank everyone for their input as I was able to customize the NS 11 to almost the exact same customization as the 10.5 page I had. The below R/W action gave me the desire result. I also modify the base.css, en.xml  and the custom.css to get the addtional results I wanted.

 

"var login_footer=$(\"<br><br><div style='text-align:center;color:Blue;font-size:15px;overflow:visible'><b>Forgot Password? Click Here <a target=_blank class=button href=https://yourlink.com/reset>"+"Password Reset</a></a><br><br><img src=https://yourlink.com/logon/themes/Default/custom_media/wbot.png style=width:45%;height45%;></div>\").appendTo(logonbox_container);"

[Kari Ruissalo]

This seems to work with 11.0 and 11.1 with X1 and Greenbubble templates perfectly.

 

Thank you Mike Roselli for sharing these!

 

ps. Any ideas how to clear the the cache on STD/ENT edition of NetScaler other than restart the appliance?

[Afshin Lak]

Does anybody knows how to get this work with RfWebUI theme of NS 11.1?

Thanks!

 

[Mike Roselli]

Afshin

 

These rewrites do not work with the RfWebUI.

 

The RfWebUI is based on Storefront code and is much more complex than the other themes. It seems to have generic function blocks that can, and more than likely are, used for other visual components. I think the best way to modify it is going to be replacing the files located in /var/netscaler/logon/LogonPoint/custom with one that has custom functions, script.js, additional css, style.css, and strings, strings.en.json, But i have not had a chance to DEV that statement yet and may not have a chance to do so anytime soon. But my theory is that if you can make the changes in Storefront then the same code can be used to change RfWebUI on the netscaler.

[CarlStalhood]

See http://support.citrix.com/article/CTX215817 for sample RfWebUI instructions.

[Mike Roselli]

Thanks Carl!

 

I didn't even know that article had the RfWebUI examples too.