Customizing Nanacast Membership Login Pages

1. To customize your Nanacast login page, first Login to Nanacast. Click Manage > Memberships, then click the Edit Listing link of your offer. Scroll down and expand the Membership Login page Settings.

2. Add your CSS within the Login Page Head Tag HTML Code box. Make sure to use <style> tags or your CSS won't work.
   
   
   Below are some examples of tags that can be used to manipulate the login page: **HINT** The !important; CSS modifier is useful for overriding existing inline CSS.

   
   #navBar{//selects the header bar with the navigation}
   
   body input:not(.medium_button){//selects all text fields except the login button and email password button}
   
   .main_table{ selects the parent element that holds all other elements}
   
   #top{selects the upper element}
   
   .medium_button{selects the login and email password buttons}
   
   .form_left{selects all of the text boxes adjacent to the text fields, useful if you'd like to hide them}
   
   #loginBox{ selects the main box holding the form fields and buttons }
   
   
   

   Here is an example of a CSS style you could use:

   
   
   <style><!-- make sure all of your css is between these tags -->
   
   #navBar{height: 0px !important; visibility:collapse;}
   
   body{background:none #c1c1c1!important; }
   
   body input:not(.medium_button){-webkit-border-radius: 3px 3px; border-radius: 3px/3px; padding:5px; border-style: solid !important; font-size:1.5em; color:#484848; margin-left:-150px !important;}
   
   .main_table{-webkit-border-radius: 3px 3px; width:400px !important; border-radius: 3px/3px; height:300px !important;}
   
   .main_table:first-child{background:#c1c1c1 none !important; padding-top:15px !important;}
   
   #top{height: 0px !important; visibility:collapse;}
   
   .medium_button{background:white; color:gray; border:2px solid #aaaaaa; border-bottom:2px solid #4b4b4b; border-top:2px #bebebe gray; -webkit-border-radius: 3px 3px; border-radius: 3px/3px;}
   
   .medium_button:active{background:white; color:gray; border:2px solid #aaaaaa; border-top:2px solid #4b4b4b; border-bottom:2px #bebebe gray;}
   
   .form_left{height: 0px !important; visibility:collapse;}
   </style> <!-- make sure all of your css is between these tags --> 
   
   

3. Also, immediately below the Login page head tag HTML code box, there is a Customized HTML to appear BELOW login boxes on login form box. Add the following code to it if you'd like a popular hidden text field effect that you might have seen on a page elsewhere:
   
   

   
   
   <script>
   
   var woo = document.getElementsByTagName('input');
   
   var val1 = "Email or Username";
   
   var val2 = "Password";
   
   woo[0].addEventListener("click", clearform, false);
   
   woo[1].addEventListener("click", clearform, false);
   
   woo[5].addEventListener("click", clearform, false);
   
   woo[0].addEventListener("blur", add1, false);
   
   woo[1].addEventListener("blur", add2, false);
   
   woo[5].addEventListener("blur", add1, false);
   
   woo[0].value = val1;
   
   woo[0].style.color = "gray";
   
   woo[1].type = 'text';
   
   woo[1].value = val2;
   
   woo[1].style.color = "gray";
   
   woo[5].value = val1 ;
   
   woo[5].style.color = "gray";
   
   function clearform(event){
   
   if(event.currentTarget.value == val1){
   
   event.currentTarget.value = "";
   
   }
   
   else if(event.currentTarget.value == val2){
   
   event.currentTarget.value = "";CSS Customization for Membership Login Page
   
   event.currentTarget.type = 'password';
   
   }
   
   else{return false;}
   
   
   }
   
   function add1(event){
   
   if(event.currentTarget.value == ""){
   
   event.currentTarget.value = val1;
   
   }
   
   }
   
   function add2(event){
   
   if(event.currentTarget.value == ""){
   
   event.currentTarget.value = val2;
   
   event.currentTarget.type = 'text';
   
   }
   
   }
   
   </script>