Controllerless Networks

In ClearPass Guest, I have setup a customer Web Login page.  Please see the attached JPG.  It is using the Customer Skin 1.  In that skin, I have the following code in the CSS Styles section:

First, let me state that I am still very new with HTML code.

{literal}
#topContainer { }
 #tdLogo { }
  #topLogo { }
 #tdTitle { }
#mainContainer { }
 #tdNav { }
  #navContainer { } 
 #tdContent { }
  #contentContainer { }
   #nwaContent { }
    #nwaTop { }
    #nwaLeft { } #nwaBody { }
    #nwaBottom { }
#bottomContainer { }

body {
    background-image: url("public/ftc_images/bg.jpg");
    background-repeat: repeat-x;
    background-color: #4885b6;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}

{/literal}

In the Begin HTML section:

<center>

In the End HTML section:

</center>

I would like to be able to change/control the Log In window on this page.  So far, I have learned that the <center> ... </center> code shown above centers the window the way we would like, but I do not know how to change the colors and/or fonts within the window, outside of some given code that will center everything in it.  

Is there some documentation somewhere, or can someone tell me how to change the Log In window so its colors match those that I am working with on this page?

Any help is appreciated.

Jason...

Jason,

In response to your questions, I created a short video on Youtube: https://youtu.be/s6hyuMTQexM on how to change these bar colors, but also how to figure out what classes to change to get the desired results.

th.nwaTop {
background-color: #ff8000;
background-image: none;
}

th.nwaBottom,th.nwaLeft {
background-color: #b0b0ff;
background-image: none;
}

Note that webdesign is considered to be a profession; however this may help you to get your job done..

Herman

Herman,

Thank you so much for the video.  That is so helpful and really gives us a better understanding of how the code in the skins work.  Again, much thanks!

Jason...

We seem to be having a problem when the page is viewed from either an Android or iPhone.  The formating we put in place on the skin is not affecting the Log In window when the page is viewed on an Android or iPhone.

In the CSS Styles section:

{literal}

th.nwaTop { 
    background-color: #0080B8;
    background-image: none;
}

table.nwaContent {
    border: 2px solid #78b4db;
    border-color: #78b4db;
    margin: auto;
}

{/literal}

It works great when the page is viewed from a laptop/desktop but not when pulled up in an iPhone or Android.

Any way to make the formating work for both large and small screens?

Jason...

It seems that on mobile devices different attributes are used: div.nwa* instead of tr.nwa*:

You can show the mobile view from the developer-tools by clicking the icon in the red circle, then select a device to view on (I chose Nexus 5 in the above screenshot), then reload the page.. 

I first tried to set the class as .nwaTop, but that seems overridden by a more specific class... so I ended up with the following code for my original example:

{literal}

th.nwaTop, div.nwaTop { 
  background-color: #ff8000;
  background-image: none;
}

th.nwaBottom, th.nwaLeft, div.nwaBottom, div.nwaLeft {
  background-color: #b0b0ff;
  background-image: none;
}

.....

You probably can use this to correct your CSS code...

Herman

Herman,

Just figured that out.  You are right.  Added "DIV.nwaTop" and "DIV.nwaContent" and the formating is showing up on both the desktop and mobile screens correctly now.   

Much thanks, again,

Jason...

{literal}

TH.nwaTop, DIV.nwaTop { 
    background-color: #0080B8;
    background-image: none;
}

TABLE.nwaContent, DIV.nwaContent {
    border: 1px solid #0080B8;
    border-color: #0080B8;
    margin: auto;
}

{/literal}