Customizing the RStudio Server Pro Login Page

You can customize the content and appearance of the RStudio Server sign-in page by including custom HTML within the page. This is accomplished by either:

1. Providing a file at /etc/rstudio/login.html that includes additional HTML to include within the login page; or

2. Specifying the auth-login-page-html option within /etc/rstudio/rserver.conf file which points to an alternate location for the login HTML file. For example, the following specifies that the file located at /opt/config/rstudio-login.html should be included within the login page:

/etc/rstudio/rserver.conf

 auth-login-page-html=/opt/config/rstudio-login.html 

The contents of the specified HTML file will be included after the standard login header and login username/password form. If you want to modify the appearance of the header and/or add content above the username/password form you can use CSS and JavaScript within your login.html file to modify the page after it loads.

Example

The login screen was modified to change the banner color, add a logo, and modify the submission form.

To accomplish this, the following html was added to /etc/rstudio/login.html:

<script type="text/javascript">
window.onload=function(){
    
var logo = document.createElement("img");
logo.setAttribute("src","images/logo.png");
logo.setAttribute("height", "36px");
logo.setAttribute("width", "36px");
logo.setAttribute("style", "float: right;");
document.getElementById("banner").appendChild(logo);

var cap = document.getElementById("caption");
cap.innerHTML = "Sign into RStudio with Windows Credentials";
}
</script>

<style>
#banner {background-color: #273d5f;}
#caption {border-bottom-color: #273d5f;}
</style>

Note that the logo was located in /usr/lib/rstudio-server/www/images 

Please note: For versions of RStudio Server Pro 1.3.1093-1 and above, we made changes such that the caption element id no longer exists - it is now caption_header.  Some element IDs were changed due to accessibility changes we're making to support screen readers, test automation purposes, and refactoring of all login pages to be more similar. Using the same example as above, the only difference is the caption_header in the "var cap" line.

<script type="text/javascript">
window.onload=function(){
    
var logo = document.createElement("img");
logo.setAttribute("src","images/logo.png");
logo.setAttribute("height", "36px");
logo.setAttribute("width", "36px");
logo.setAttribute("style", "float: right;");
document.getElementById("banner").appendChild(logo);

var cap = document.getElementById("caption_header");
cap.innerHTML = "Sign into RStudio with Windows Credentials";
}
</script>

<style>
#banner {background-color: #273d5f;}
#caption {border-bottom-color: #273d5f;}
</style>