Jump to content
Welcome to our new Citrix community!
  • Visually change RFWebUI with CSS


    Juliano Reckziegel
    • Validation Status: Validated
      Summary: Customize Citrix Gateway's login page visually using CSS. This method involves relocating form elements and adjusting labels for a personalized interface that persists through updates.
      Has Video?: No

    Previously, we explored customizing the Citrix Gateway authentication page via JavaScript, offering extensive flexibility, as detailed in a prior article. However, a recent scenario arose where a customer sought minor visual alterations to the login form. To accomplished this we used simple CSS instructions.

    The desired changes were straightforward:

    • Relocate the form header to the top of the username input field and make it bold.
    • Adjust the positioning of the "User name:" and "Password:" labels nearer to the input fields.

    The initial authentication page resembled the left part of the following image, while the right side view reflected the desired modifications:

    converted-file.thumb.png.d43bc84dbb565ac67c70df416c25cee5.png

    To implement this, we created a new RfWebUI theme and edited the initially empty style.css file situated at /var/netscaler/logon/themes/NAME_OF_YOUR_NEW_RfWebUI_THEME/ with the following content:

     

    @media (min-width: 610px) {
        #login_title {
            margin-left: 186px;
            font-weight: bold;
        }
            
        .credentialform .plain {
            display: block;
            width: 175px;
            text-align: right;
            height: 44px;
            margin: 0;
        }
    }

    The @media rule, utilized in media queries, facilitates applying distinct styles for varying media types or devices. This ensures that the browser implements these configurations solely when the screen width is at least 610px, preventing formatting issues on mobile devices.

    The first section targets the element identified by the ID 'login_title', representing the form title. You can verify this through browser developer tools:

    image.png.91ae2a274e1b9643f054d51ff87b9dc4.png

     

    The subsequent section modifies elements containing the CSS classes 'credentialform' and 'plain', as depicted in the following image:

    image.png.b8e6c999a7702399abfd4456cf447c29.png

     

    Remember, NetScaler caches Gateway files within its internal optimization cache, irrespective of whether the IC feature is active or not. To purge cached objects from the NetScaler, execute the following command:

    flush contentGroup loginstaticobjects

    An important aspect to note is that these customizations endure NetScaler reboots and upgrades.

     

    This method empowers you to effect minor or significant updates in how this page displays. Consider this as a reference for potential modifications, allowing ample creativity in customization.


    User Feedback

    Recommended Comments

    There are no comments to display.



    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an account

    Sign up for a new account in our community. It's easy!

    Register a new account

    Sign in

    Already have an account? Sign in here.

    Sign In Now

×
×
  • Create New...