Client Login button change size and text
Hi all,

I was wondering if anyone knew how to change the client login box size and text, or even customize the background image to reflect our sites consistancy. I appreciate your help. My box looks like this as per the original code posted on the client-login post. However this size is not working for firefox everything else. Any suggestions would be great!

this is what I see in firefox:



Brandon
www.pipercreekphotography.com

Originally Posted by pipercreekphotography Client Login button change size and text Hi all, I was wondering if anyone knew how to change the client login box size and text, or even customize the background image to reflect our sites consistancy. I appreciate your help. My box looks like this as per the original code posted on the client-login post. However this size is not working for firefox everything else. Any suggestions would be great! this is what I see in firefox: Brandon www.pipercreekphotography.com

carefully look through your script and find this long line, change these parameters first, then we'll add some CSS to style more....first though, get the width adjusted here...and the text...post back with more details on how you want to style it...like do you have a background image you want to try...or what color do you want the box to be...what color do you want the text....things like that :

 YE.onDOMReady(function(){clientLogin(Sizzle('a[href=/Clients]')[0],'Clients')});function clientLogin(trigger,category){var clDialog=new YAHOO.widget.Panel("clDialog",{width:"325px",fixedcenter:true,zIndex:100,constraintovikrport:true,underlay:"shadow",modal:true,close:true,visible:false,draggable:false,effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:.7}});clDialog.setHeader("<h1>Login</h1><p>Please Enter Your Password To Continue.</p>");clDialog.setBody('<label>Login Name: </label><input id="clUsername" type="text" />');clDialog.setFooter('<input id="clLoginButton" type="button" value="submit" />');clDialog.render(document.body);YE.addListener(trigger,'click',function(e){YE.preventDefault(e);clDialog.show()});YE.addListener('clLoginButton','click',function(e){var value=YD.get('clUsername').value;if(value!=''){var url='/'+category+'/'+value;window.location.href=url}else{alert('Please enter your username to continue')}})};

Allen,

Found the line of code and changed it. Now I think I would like to play around with the color or maybe add a specific image to the box in order for it to look like other items on my site.

Originally Posted by J Allen carefully look through your script and find this long line, change these parameters first, then we'll add some CSS to style more....first though, get the width adjusted here...and the text...post back with more details on how you want to style it...like do you have a background image you want to try...or what color do you want the box to be...what color do you want the text....things like that : YE.onDOMReady(function(){clientLogin(Sizzle('a[href=/Clients]')[0],'Clients')});function clientLogin(trigger,category){var clDialog=new YAHOO.widget.Panel("clDialog",{width:"325px",fixedcenter:true,zIndex:100,constraintovikrport:true,underlay:"shadow",modal:true,close:true,visible:false,draggable:false,effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:.7}});clDialog.setHeader("<h1>Login</h1><p>Please Enter Your Password To Continue.</p>");clDialog.setBody('<label>Login Name: </label><input id="clUsername" type="text" />');clDialog.setFooter('<input id="clLoginButton" type="button" value="submit" />');clDialog.render(document.body);YE.addListener(trigger,'click',function(e){YE.preventDefault(e);clDialog.show()});YE.addListener('clLoginButton','click',function(e){var value=YD.get('clUsername').value;if(value!=''){var url='/'+category+'/'+value;window.location.href=url}else{alert('Please enter your username to continue')}})};

Originally Posted by pipercreekphotography Allen, Found the line of code and changed it. Now I think I would like to play around with the color or maybe add a specific image to the box in order for it to look like other items on my site.

try something like this:

/*pop-up login form*/
#clDialog {background-image:none;
background-color:#000;color:#fff}
#clDialog.yui-panel .ft {background-image:none;
background-color:#000;border:none}
#clDialog.yui-panel .hd h1{text-shadow:none}
.yui-panel .bd {border:none}
.yui-panel .hd {background-image:none;
background-color:#000;border:none}
#clDialog .bd {text-align:center}
#clDialog {border:2px solid #fff}

i like that format, how does it work Clients enter there name and then go to there gallery or do they then need to enter a password also?

For our site the clients password is a unique ID, associated with the gallery. So if I create a gallery the client's password is the name of the gallery.

Originally Posted by aztek081 i like that format, how does it work Clients enter there name and then go to there gallery or do they then need to enter a password also?

does it work with sub-categories

It should...the password is just the name of the gallery

Originally Posted by aztek081 does it work with sub-categories

Thanks J. I will play around with it

Originally Posted by J Allen try something like this: /*pop-up login form*/ #clDialog {background-image:none; background-color:#000;color:#fff} #clDialog.yui-panel .ft {background-image:none; background-color:#000;border:none} #clDialog.yui-panel .hd h1{text-shadow:none} .yui-panel .bd {border:none} .yui-panel .hd {background-image:none; background-color:#000;border:none} #clDialog .bd {text-align:center} #clDialog {border:2px solid #fff}