Customizing the Posit Workbench / RStudio Server Pro Login Page

Most of this content has moved to the admin guide and this page will be removed. You can customize the content and appearance of the Posit Workbench sign-in page by including custom HTML within the page. According to the instructions here: https://docs.posit.co/ide/server-pro/authenticating_users/customizing_signin.html

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: 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>