locked
Swap illutstration and login RRS feed

  • Question

  • I've been looking at customising the ADFS 3 login page to conform to our company branding, I have the logo etc. but what I really want to do is have the login on the left and the illustration on the right.

    I can't see a way to do this using css but maybe that is because my skills aren't good enough in this area.

    Does anyone know if/how this can be achieved?

    TIA

    James

     
    Friday, September 16, 2016 9:45 PM

All replies

  • I'd go for 2 modification in the default Style.css:

    #branding
    {       
        /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
           Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
        height:100%;
        margin-right:0px; /* Pierre: instead of 500 */
        margin-left:500px; /* Pierre: instead of 0 */
        background-color:inherit;
        background-repeat: no-repeat;
        background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
    }


    And

    #contentWrapper { ; /*Pierre: instead of relative */ width:500px; height:100%; overflow:auto; background-color:#ffffff; /* for IE7 */ margin-left:0px; /* Pierre: instead of -500 */
    margin-right:0px; #I }


    So the full thing is... You export your current CSS file with:

    Export-AdfsWebTheme -Name <your theme> -DirectoryPath <some directory>

    You edit the Style.css found in <some directory>\css. You can copy this one:

    * {
    	margin:0px;
    	padding:0px;
    }
    html, body
    {
        height:100%;
        width:100%;
        background-color:#ffffff;
        color:#000000;
        font-weight:normal;
        font-family:"Segoe UI" , "Segoe" , "SegoeUI-Regular-final", Tahoma, Helvetica, Arial, sans-serif;
        min-width:500px;
        -ms-overflow-style:-ms-autohiding-scrollbar;
    }
    
    body
    {
        font-size:0.9em;
    }
    
    #noScript { margin:16px; color:Black; }
    
    :lang(en-GB){quotes:'\2018' '\2019' '\201C' '\201D';}
    :lang(zh){font-family:微软雅黑;}
    
    @-ms-viewport { width: device-width; }
    @-moz-viewport { width: device-width; }
    @-o-viewport { width: device-width; }
    @-webkit-viewport { width: device-width;  }
    @viewport { width: device-width; }
    
    /* Theme layout styles */
    
    #fullPage, #brandingWrapper
    {
        width:100%;
        height:100%;
        background-color:inherit;
    }
    #brandingWrapper
    {
        background-color:#4488dd;
    }
    #branding
    {       
        /* A background image will be added to the #branding element at run-time once the illustration image is configured in the theme. 
           Recommended image dimensions: 1420x1200 pixels, JPG or PNG, 200 kB average, 500 kB maximum. */
        height:100%;
        margin-right:0px; margin-left:500px;
        background-color:inherit;
        background-repeat: no-repeat;
        background-size:cover;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
    }
    #contentWrapper
    {
        ;
        width:500px;    
        height:100%;
        overflow:auto;
        background-color:#ffffff; /* for IE7 */
        margin-left:0px; margin-right:0px; 
    }
    #content
    {
        min-height:100%;
        height: auto !important;
        margin:0 auto -55px auto;
        padding:0px 150px 0px 50px;
    }
    #header
    {
        font-size:2em;
        font-weight:lighter;
        font-family:"Segoe UI Light" , "Segoe" , "SegoeUI-Light-final", Tahoma, Helvetica, Arial, sans-serif;
        padding-top: 90px;
        margin-bottom:60px;
        min-height:100px;
        overflow:hidden;
    }
    #header img
    {
        /* Logo image recommended dimension: 60x60 (square) or 350X35 (elongated), 4 kB average, 10 kB maximum. Transparent PNG strongly recommended. */
        width:auto;
        height:auto;
    }
    #workArea, #header
    {
        word-wrap:break-word;
        width:350px;
    }
    #workArea
    {
        margin-bottom:90px;
    }
    #footerPlaceholder
    {
        height:40px;
    }
    #footer
    {
        height:40px;
        padding:10px 50px 0px 50px;
        ;
        color:#666666;
        font-size:0.78em;
    }
    #footerLinks
    {
        float:none;
        padding-top:10px;
    }
    #copyright {color:#696969;}
    .pageLink { color:#000000; padding-left:16px; }
    
    /* Common content styles */
    
    .clear {clear:both;}
    .float { float:left; } 
    .floatReverse { float:right; } 
    .indent { margin-left:16px; } 
    .indentNonCollapsible { padding-left:16px; }
    .hidden {display:none;}
    .notHidden {display:inherit;}
    .error { color:#c85305; }
    .actionLink { margin-bottom:8px; display:block; }
    a
    {
        color:#2672ec;
        text-decoration:none;
        background-color:transparent;
    }
    ul { list-style-type: disc; }
    h1,h2,h3,h4,h5,label { margin-bottom: 8px; }
    .submitMargin { margin-top:38px; margin-bottom:30px; }
    .topFieldMargin { margin-top:8px; }
    .fieldMargin { margin-bottom:8px; }
    .groupMargin { margin-bottom:30px; } 
    .sectionMargin { margin-bottom:64px; }
    .block { display: block; }
    .autoWidth { width:auto; }
    .fullWidth { width:342px; }
    .fullWidthIndent { width:326px; }
    input
    {
        max-width:100%; 
        font-family:inherit;
        margin-bottom:8px;
    }
    input[type="radio"], input[type="checkbox"] {
        vertical-align:middle;
        margin-bottom: 0px;
    }
    span.submit, input[type="submit"]
    {
        border:none;
        background-color:rgb(38, 114, 236);
        min-width:80px;
        width:auto;
        height:30px;
        padding:4px 20px 6px 20px;
        border-style:solid;
        border-width:1px;
        transition:background 0s;
        color:rgb(255, 255, 255);
        cursor:pointer;
        margin-bottom:8px;
        
        -ms-user-select:none;
        -moz-transition:background 0s;
        -webkit-transition:background 0s;
        -o-transition:background 0s;
        -webkit-touch-callout:none;
        -webkit-user-select:none;
        -khtml-user-select:none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select:none;
    }
    input[type="submit"]:hover,span.submit:hover
    {
        background: rgb(212, 227, 251);
    }
    input.text{
        height:28px;
        padding:0px 3px 0px 3px ;
        border:solid 1px #BABABA;
    }
    input.text:focus
    {
      border: 1px solid #6B6B6B;
    }
    select
    {
        height:28px;
        min-width:60px;
        max-width:100%; 
        margin-bottom:8px;
    
        white-space:nowrap;
        overflow:hidden;
        box-shadow:none;
        padding:2px;
        font-family:inherit;
    }
    h1, .giantText
    {
       font-size:2.0em; 
       font-weight:lighter;
    }          
    h2, .bigText
    {
       font-size:1.33em;
       font-weight:lighter;
    }
    h3, .normalText
    {
        font-size:1.0em;
        font-weight:normal;
    }
    h4, .smallText
    {
        font-size:0.9em;
        font-weight:normal;
    }
    h5, .tinyText
    {
        font-size:0.8em;
        font-weight:normal;
    }
    .hint
    {
        color:#999999;
    }
    .emphasis
    {
        font-weight:700;
        color:#2F2F2F;
    } 
    .smallIcon
    {
        height:20px;
        padding-right:12px;
        vertical-align:middle;
    }
    .largeIcon
    {
        height:48px;
        /* width:48px; */
        vertical-align:middle;
    }
    .largeTextNoWrap
    {
        height:48px;
        display:table-cell; /* needed when in float*/
        vertical-align:middle;
        white-space:nowrap;
        font-size:1.2em;
    }
    .idp
    {
        height:48px;
        clear:both;
        padding:8px;
        overflow:hidden;
    }
    .idp:hover 
    {
        background-color:#cccccc;
    }
    .idpDescription
    {
        width:80%;
    }
    
    /* Form factor: intermediate height layout. Reduce space of the header. */
    @media only screen and (max-height: 820px) {
        #header {
            padding-top: 40px;
            min-height:0px;
            overflow: hidden;
        }
    
        #workArea
        {
            margin-bottom:60px; 
        }
    }
    
    /* Form factor: intermediate height layout. Reduce space of the header. */
    @media only screen and (max-height: 500px) {
        #header {
            padding-top: 30px;
            margin-bottom: 30px;
        }
        #workArea{
            margin-bottom:40px; 
        }
    }
    
    /* Form factor: intermediate layout (WAB in non-snapped view falls in here) */
    @media only screen and (max-width: 600px) {
        html, body {
            min-width: 260px;
        }
    
        #brandingWrapper {
            display: none;
        }
    
        #contentWrapper {
            float: none;
            width: 100%;
            margin: 0px auto;
        }
    
        #content, #footer, #header {
            width: 400px;
            padding-left: 0px;
            padding-right: 0px;
            margin-left: auto;
            margin-right: auto;
        }
    
        #workArea {
            width: 100%;
        }
    
        .fullWidth {
            width: 392px;
        }
    
        .fullWidthIndent {
            width: 376px;
        }
    }
    
    @media only screen and (max-width: 450px) {
        body {
            font-size: 0.8em;
        }
    
        #content, #footer {
            width:auto;
            margin-right:33px;
            margin-left:25px;
        }
    
        #header {
            width: auto;
        }
    
        span.submit, input[type="submit"] {
            font-size: 0.9em;
        }
    
        .fullWidth
        {
            width:100%;
            margin-left:auto;
            margin-right:auto;
        }
    
        .fullWidthIndent {
            width: 85%;
        }
    
        .idpDescription
        {
            width:70%;
        }
    }
    
    /* Form factor: snapped WAB (for WAB to work in snapped view, the content wrapper width has to be set to 260px) */
    @media only screen and (max-width:280px)
    {
        #contentWrapper
        {
            width:260px;
        }
        .idpDescription
        {
            max-width:160px;
            min-width:100px;
        }
    }

    Save it and then you import back into your theme:

    Set-AdfsWebTheme -TargetName <your theme> -StyleSheet @{Path="<some directory>\css\style.css"}

    It seems to work fine for IE and Egde on Windows 10. I have not tried it for anything else. Before putting this in place, you'd better test with the different devices and browsers (and native apps) that you are using to ensure a consistant user experience. Tell us how it goes!


    Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.


    Saturday, September 17, 2016 11:36 PM
  • Ok, for whatever reason, I cannot write position then : then absolute. It gets removed automatically... So here is the CSS file to download: https://1drv.ms/f/s!AnDJKqqv9KwngQty8g8e3Sp2PsB1

    Note: Posts are provided “AS IS” without warranty of any kind, either expressed or implied, including but not limited to the implied warranties of merchantability and/or fitness for a particular purpose.

    Sunday, September 18, 2016 3:58 PM