Some CSS related to the New UI

Document created by Canvas Admin Expert on Feb 25, 2016Last modified by Canvas Admin Expert on Oct 7, 2016
Version 5Show Document
  • View in full screen mode

Several people have asked for my code that I've used to mess around with the new UI.

Here's a screenshot of what some of the code affects based on the code below:

login page with CSS code.png

Here’s a copy and paste of most of my important CSS tweaks related to the new UI.  Anything in “/* */"  is a description of what the code does.   Please note that I have not played around with formatting the login page for mobile yet.  This code is for browsers.


/*format background (image, color, etc.)*/


background-size: auto;

background-attachment: fixed;



/*position the main login box area; This code sets it 75 pixels from the top*/


    margin-top: 75px;



/*login box*  We changed the size to 465x665 to accommodate the size of our background image/


    background: url(“INSERT HTTPS LINK TO IMAGE HERE") no-repeat !important;

    height: 465px; 

    width: 665px; 

    box-shadow: 0 4px 20px -2px #000000;

    padding: 0px;



/*Hide Canvas header logo*/


    display: none;



/*username login box*/


    height: 38px;

    width: 235px;



/*password login box*/


    height: 38px;

    width: 235px;



/*position entire login form (username, password, stay signed in, forgot password, log in button)*/


    margin: 183px 0px 0px;



/*Forgot Password? link*/


    color: #FFFFFF !important;



/*Stay Signed In link*/


    color: #FFFFFF !important;



/*add Canvas image at bottom container*/


    background: url("INSERT HTTPS LINK TO IMAGE HERE") no-repeat 65%;


7 people found this helpful