Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post

    changing box around login

    on mmp.power1.com there is a login page.

    I want to be able to center the whole thing and have a colored border around it, while still keeping it centered.. Im having trouble figuring out how to do this. Im pretty sure the issue is in the standard login elements portion but I havent been able to fix it. Could anyone help?

    The css is as follows
    Code:
    @charset "utf-8";
    
    /****************************
        MANDATORY ELEMENTS
     *****************************/
      
    /* cursor for the triggers */
    .pg_trigger, .pg_logout_btn {
        cursor: pointer;   
    }
    .pg_login_trig {
    	font-weight: bold;
    }
     
    /* loader style */
    .pg_loading {
        display: inline-block;
        background: url(../img/loader.gif) no-repeat top left transparent;
        width: 20px;
        height: 20px;  
    }
     
    /* loader container */
    .pg_loginform_loader,
    .pg_custom_form_loader {
    	display: inline-block;	
    }
    .pg_loginform_loader span,
    .pg_custom_form_loader span
    .pg_logout_box .pg_loading {
        display: inline-block;
        margin-bottom:-3px;
    }
     
     
    /****************************
        WIDGET FORM ELEMENTS
     *****************************/
      
    /* form label */
    .PrivateContentLogin label {
        display: inline-block;
        min-width: 100px;  
        margin-top: 7px;
    }
     
    /* form input */
    .PrivateContentLogin input[type="text"],
    .PrivateContentLogin input[type="password"] {
    	width: 166px;
    	padding: 3px;  
    }
     
    /* logout button */
    .widget .pg_logout_btn {
        display: inline-block;
        padding: 2px 4px;
        margin-top: 5px;
    }
     
      
    /*********************************
       STANDARD LOGIN FORM ELEMENTS
     ********************************/
      
     /* container */
     .pg_login_block {
        margin: 20px 0;
    	width:150px;
    }
     
    /* container message */
    .pg_login_block p {
        padding: 5px 10px;
        border-radius: 4px;
        background-color: #000;
        border: 1px solid #ddd;
        margin: 0;
    	padding-left:300px;
        border: 1px solid #EEE78A;
    	
    	
    	
    }
      
     /* form tag */
    .pg_pvtpage_login_form,
    .pg_inline_login_form {
        width: 290px;
        padding: 17px;
    	padding-top:100px;
    	padding-left:300px;
        border: 1px solid #F00 ;
       background-color: #000000;
        /*box-shadow:0px 0px 7px rgb(190,190,190);*/
        border-radius: 4px;
    }
    .pg_pvtpage_login_form {
        margin: 20px auto 20px;
    }
    .pg_inline_login_form {
        margin: 0 auto 30px;   
    }
     
    /* label*/
    .pg_pvtpage_login_form label,
    .pg_inline_login_form label {
        display: inline-block;
        width: 90px;
        padding-right: 10px;   
        margin-bottom: 15px;
    }
     
    /* text inputs */
    .pg_pvtpage_login_form input[type="text"],
    .pg_pvtpage_login_form inputinput[type=password],
    .pg_inline_login_form input[type="text"],
    .pg_inline_login_form input[type="password"] {
    	padding: 3px;
    	width: 166px;	
    }
     
     
     
    /*********************************
              LOGOUT BOX
     ********************************/
    .pg_logout_box {
    	display: inline-block;
    	padding: 2px 5px;	
    	border: 1px solid #000;
    	background-color: #000;
    	border-radius: 3px;
    } 
     
    
    
    /************************************************
       COMMON REGISTRATION AND CUSTOM FORM ELEMENTS
     ***********************************************/
    
    /* form wrapper style */
    .pg_registration_form,
    .pg_custom_form {
        margin: 0 auto 30px;
        width: 335px;
        padding: 17px;
        border: 1px solid #D3D3D3;
        background-color: #F4F4F4;
        box-shadow:0px 0px 7px rgb(190,190,190);
        border-radius: 4px;
    }
    
    /* required */
    .pg_req_field {
    	color: #F30;	
    }
    
    /* form field list */
    .pg_form_flist {
    	list-style: none;
    	margin: 0;
    	padding: 0;	
    	clear: both;
    }
    .pg_form_flist li {
    	padding: 0;
    	margin: 0 15px 15px 0;
    	max-width: 320px;
    }
    
    /* label */
    .pg_form_flist li > label {
    	display: inline-block;
    	padding: 3px 10px 0 0;
    	max-width: 130px;	
    }
    .pg_textarea_label {
    	padding-right: 10px;
    	width: auto;	
    }
    label.pg_textarea_label {
    	display: block;
        margin: 0;
        padding: 0;
        width: auto;
    }
    
    /* checkbox wrapper */
    .pg_check_wrap {
    	float: right;
    	width: 176px;
    }
    
    /* checkbox label */
    .pg_check_wrap .pg_check_label {
    	display: inline-block;
    	width: 152px;	
    	margin: 0;
    	padding: 0;
    }
    
    /* single checkbox */
    .pg_check_wrap input {
    	vertical-align: top;
    	margin: 5px 4px 0 3px;	
    }
    
    /* input, select and textarea format */
    .pg_form_flist input[type=text],
    .pg_form_flist input[type=password],
    .pg_form_flist select {
    	width: 166px;
    	padding: 3px;
    	box-sizing: content-box;
    	-ms-box-sizing:content-box;
    	-moz-box-sizing:content-box;
    	-webkit-box-sizing:content-box; 	
    	border: 1px solid #ddd;
    	float: right;
    }
    .pg_form_flist textarea {
    	width: 314px;
    	min-height: 65px;
    	border: 1px solid #ddd;
    	padding: 3px;	
    }
    
    
    /****************************
       SUCCESS AND ERROR MESSAGES
     *****************************/
      
    /* standard form messages */
    .pg_error_mess,
    .pg_success_mess {
        display: block;
        color: #444;
        padding: 3px 5px;
        border-radius: 3px;
        margin-bottom: 7px;
        font-size: 85%;
    }
     
    /* widget form messages */
    .widget .pg_error_mess,
    .widget .pg_success_mess {
        display: block;
        color: #444;
        padding: 2px 3px;
        border-radius: 2px;
        margin-bottom: 7px;
        margin-top: 7px;
        font-size: 95%;
        max-width: 168px;
    }
     
    /* messages color */
    .pg_error_mess {
        border: 1px solid #FFA6A6;
        background-color: #FFCACA;
    }
    .pg_success_mess {
        background-color: #EAF5DC;
        border: 1px solid #BFE098;
    }

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Got a link ?

    Or even HTML

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    Yeah its mmp.power1.com

  • #4
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Add:

    Code:
    .pg_inline_login_form{
    text-align:center;
    width: 875px;
    }
    Remove:

    Code:
    .pg_pvtpage_login_form, .pg_inline_login_form{
    padding:100px 17px 17px 300px;
    }

  • #5
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    That fixes the awkward sizing of the box, but it doesnt center it still, this thing is stubborn haha

  • #6
    Regular Coder
    Join Date
    Mar 2011
    Posts
    212
    Thanks
    10
    Thanked 1 Time in 1 Post
    Is there a way to center everything on the page?

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,618
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You can senter any block element that has a width using margin: 0 auto
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Regular Coder
    Join Date
    Dec 2010
    Posts
    134
    Thanks
    17
    Thanked 6 Times in 6 Posts
    It's fixed it.

    If you want the bounding box smaller, change 875px to 605px then add margin:0px 135px;

    Just make sure the width and margin left and right add up to the width of the containing div, which is 875px.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •