Difference between revisions of "Replicating ADFS Login Page"

From Studentnet Wiki
Jump to navigation Jump to search
 
(One intermediate revision by one other user not shown)
Line 6: Line 6:
 
===Login Theme General Settings===
 
===Login Theme General Settings===
  
#In your school's Cloudwork dashboard click '''Login Theme'''
+
#In the Cloudwork dashboard, click the menu bar>settings>Login Theme </br>[[File:Menu.png|300px]]
 
#Navigate to '''General Settings''' and click '''Edit'''
 
#Navigate to '''General Settings''' and click '''Edit'''
 
#Make '''Organisation name''' empty
 
#Make '''Organisation name''' empty
Line 13: Line 13:
 
#Upload the appropriate '''Logo''' and '''Background Image'''
 
#Upload the appropriate '''Logo''' and '''Background Image'''
 
#Copy and paste this text in to '''Custom Styles'''
 
#Copy and paste this text in to '''Custom Styles'''
body { background-repeat: no-repeat; background-size: auto; font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif; }
+
  body {height: 100vh; background-repeat: no-repeat; background-size: auto 100%; font-size: 0.9em; font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;}
.main .content { min-height: 98vh; height: auto !important; position: absolute; right: 0px; border-radius: 0px; padding: 40px 95px 0px 50px; margin: 0 auto; text-align: left; }
+
  .main .content { min-height: 100vh; height: auto !important; position: absolute; right: 0px; border-radius: 0px; padding: 0px 95px 0px 50px; margin: 0 auto; text-align: left; }
.main .content input[type=submit] { color: #FFF; min-width:80px; width: auto; height: 30px; padding: 4px 20px 6px 20px; -webkit-flex: none; font-size: inherit; font-size: 0.9em; border-radius: 0; line-height: 0.9em; }
+
  .main .content input[type=submit] { color: #FFF; min-width:80px; width: auto; height: 30px; padding: 0px 5px; -webkit-flex: none; font-size: inherit; font-size: 0.9em; border-radius: 0; line-height: 0.9em; }
div.submit { margin: 30px 0; }
+
  div.content-header { padding-top: 90px; margin-bottom: 60px; }
div.login { width: 350px; }
+
  div.submit { margin: 38px 0; 30px; }
input[type=text], input[type=password] { height: 28px; padding: 0px 3px 0px 3px; border: solid 1px #BABABA; background: #ffffff; color: #000; border-radius: 0px; font-weight:normal; margin: 0 0 8px 0; }
+
  div.login { width: 350px; }
div.content-header { padding-top: 40px; margin-bottom: 60px; }
+
  input[type=text], input[type=password], select { height: 28px; padding: 0px 3px 0px 3px; border: solid 1px #BABABA; background: #ffffff; color: #000; border-radius: 0px; font-weight:normal; margin: 0 0 8px 0; }
.login h3 { font-weight: normal; font-size: 0.9em; }
+
  .main .content input[type=text], .main .content input[type=password], .main .content h3, .main .content input[type=submit], .main .content a, .main .content select { font-weight: normal; font-size: 0.9em;  
 
+
    font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;}
 +
  .login h3 {margin-bottom:35px;}
 +
  .login a { text-decoration: none; }
 +
  div.footer { position:absolute; bottom:5px; right: 95px; width: 350px; }
  
 
===Login Page Settings===
 
===Login Page Settings===

Latest revision as of 05:38, 8 April 2021

Replicating ADFS Login Page

The instructions give a basic format on how to replicate ADFS Login Page for your Cloudwork Login Page so it looks like this. ADFS replicated page


Login Theme General Settings

  1. In the Cloudwork dashboard, click the menu bar>settings>Login Theme
    Menu.png
  2. Navigate to General Settings and click Edit
  3. Make Organisation name empty
  4. Check Show Logo and Show background image
  5. Select Inside Login Box for Logo Location
  6. Upload the appropriate Logo and Background Image
  7. Copy and paste this text in to Custom Styles
 body {height: 100vh; background-repeat: no-repeat; background-size: auto 100%; font-size: 0.9em; font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;}
 .main .content { min-height: 100vh; height: auto !important; position: absolute; right: 0px; border-radius: 0px; padding: 0px 95px 0px 50px; margin: 0 auto; text-align: left; }
 .main .content input[type=submit] { color: #FFF; min-width:80px; width: auto; height: 30px; padding: 0px 5px; -webkit-flex: none; font-size: inherit; font-size: 0.9em; border-radius: 0; line-height: 0.9em; }
 div.content-header { padding-top: 90px; margin-bottom: 60px; }
 div.submit { margin: 38px 0; 30px; }
 div.login { width: 350px; }
 input[type=text], input[type=password], select { height: 28px; padding: 0px 3px 0px 3px; border: solid 1px #BABABA; background: #ffffff; color: #000; border-radius: 0px; font-weight:normal; margin: 0 0 8px 0; }
 .main .content input[type=text], .main .content input[type=password], .main .content h3, .main .content input[type=submit], .main .content a, .main .content select { font-weight: normal; font-size: 0.9em; 
   font-family: "Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;}
 .login h3 {margin-bottom:35px;}
 .login a { text-decoration: none; }
 div.footer { position:absolute; bottom:5px; right: 95px; width: 350px; }

Login Page Settings

  1. Click submit after completing General Settings changes
  2. Uncheck Show Password Reset Link and Show Forgot Username Link
  3. Copy and paste the text below changing the bold text to your school's appropriate needs
<a href="School's Password Reset URL" 
style="color: color code;">Forgot password text</a>

Notes

To find your school's Password Reset URL, log in to your school's dashboard go to Cloudwork.ID Settings>Useful Links>Recover Forgotten Password