Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Plugins & Atahualpa »

[SOLVED] How to customize Login, Registration and Lost Password with wp-customized-lo


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Jun 23, 2009, 07:19 AM
fromtheranks
 
145 posts · Apr 2009
Dev Env't: XP Pro SP3, IIS 5.1, MySQL 5.1, PHP 5.2.x, WP 2.7.1, Atahualpa 3.3.3, IE 7, FF 3.0.x
This evening I downloaded the wp-customized login plugin V1.0 from: http://www.thinkinginwordpress.com/2.../#comment-1167 (it's also available on the WP site: http://wordpress.org/extend/plugins/...tomized-login/).

I wanted to tailor my login, registration and lost password pages to match my styling of the Atahualpa theme and after poking around a bit this seemed the best place to start. Post some trial and error ... and researching through the various comments on the plugin authors' site, ... and after a big tip on how to differentiate Firefox from IE7 from Shedhead (http://forum.bytesforall.com/showthr...=8993#post8993), ... plus tips garnered from this forum over the last couple of months ... I have a workable solution.

You should know that part of my original "issue" with the plugin was that the default image container just above the login form is fairly small and I couldn't figure out how to resize it to accept my header image (which is 1280 x 160 pixels). That's where the tweaking began. It ended in the following replacement code for the custom-login.css file which is in the plugin's folder after installation. While there may be better ways to do this, the code does work.

To use, just change your image names and colors to taste. If you don't mind the smaller image right above the form then remark out my header code (which starts with "{background: url{ftr-it-header-image-v2.jpg}...), change the #login h1 width and height to some values other than zero and play with the margin-top settings. Read the comments as you go along, they explain quite a bit:

Code:
/* modified 6/23/09 by DPH to totally customize the login, registration and lost password pages */
/* this code will completely replace the starter custom-login.css file that comes with wp-customized-login plugin 1.0 */
/* Download available at:  http://wordpress.org/extend/plugins/wp-customized-login/ */

/* have to put something here or the WP logo shows up, so make it disappear with 0x0px, ... */
/* adding margin-top moves the form down below the new header image defined in the body section; */
/* however, the position margin-top sets on the page varies between Firefox and IE 7, though not fatally. */
/* adding the two variants of margin-top corrects this:  FF reads "margin-top:", IE7 reads:  ".margin-top:" */
#login h1 a{background:url(logo.png) no-repeat; width:0px; height:0px; margin-left:0px;margin-top:147px;.margin-top:70px;}

/* basic code structure by Craig 2/26/09; modified and expanded for my site */
body.login 

/* puts my header image - 1280x160 - across the top of the page starting at the upper left corner, replaces above image */
/* border-top-color changes the border color above the image to match the color set by the html statement below */
{background: url(ftr-it-header-image-V2.jpg) no-repeat top left; border-top-color: #BDBDBD;}

/* set text and hover colors for border top above image */
.login #backtoblog a { color: #000099; }
.login #backtoblog a:hover { color: #000099; text-decoration: underline; font-weight: bold; }

/* adds color to area of page below the image -- code solution by Luke 3/14/09 */
html {background-color:#BDBDBD;}

/* not sure what this code does, other than when unremarked, if set less than the height of the header image */
/* it cuts into the image, more didn't seem to matter and leaving it remarked out has no apparent effect */
/* #login { height: 160px; } */

/* #nav = lost password link */
.login #nav a { color: #000099 !important; }
.login #nav a:hover { color: #000099 !important; text-decoration:underline; font-weight:bold;}

/* submit button:  button color, border color, text color, font weight, new:  margin-top moves the button down */
#login form .submit input {
background: #000099 none repeat scroll 0 0;
border-color: #F2F2F2 !important;
color: #F2F2F2 !important;
font-weight:bold;
margin-top:5px;
}

/* form color, new:  reg_passmail controls the text color for the "A password will be sent by email to you" message. */
#loginform {background: #BDBDBD;}
#loginform p {}
#loginform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}
#reg_passmail {color: #000099;}

/* register form, uses #nav and .submit settings */
#registerform { background: #BDBDBD; }
#registerform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}

/* lost password, uses #nav and .submit settings */
#lostpasswordform { background: #BDBDBD; }
#lostpasswordform label { font-family: verdana,arial; font-size:1.0em; color: #000099;}

#wp-submit { }

#forgetmenot { }

#nav { }

.message {
background-color: #BDBDBD !important;
color: #FF0000 !important;
border-color: #FF0000 !important;
font-size:1.0em;
}
Hope this helps.

P.S. Craig and Luke were commentators on the plugin site who had offered code suggestions.

Last edited by fromtheranks; Jun 23, 2009 at 03:34 PM.
  #2  
Old Jun 23, 2009, 07:26 AM
fromtheranks
 
145 posts · Apr 2009
Dev Env't: XP Pro SP3, IIS 5.1, MySQL 5.1, PHP 5.2.x, WP 2.7.1, Atahualpa 3.3.3, IE 7, FF 3.0.x
Quick note: there is a missing close remark symbol at the end of the third remark line. It should read:

Code:
/* Download available at:  http://wordpress.org/extend/plugins/wp-customized-login/ */
Note: this has now been fixed.

Last edited by fromtheranks; Jun 23, 2009 at 02:49 PM.
  #3  
Old Jun 23, 2009, 07:44 AM
fromtheranks
 
145 posts · Apr 2009
Dev Env't: XP Pro SP3, IIS 5.1, MySQL 5.1, PHP 5.2.x, WP 2.7.1, Atahualpa 3.3.3, IE 7, FF 3.0.x
One more note to complete the set. If your WordPress URL and Blog Address URL are set differently (see General Settings) then you will also need to tweak wp-customized-login.php, from this:

Code:
$stylesheet_uri=get_bloginfo(’siteurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;
To this:
Code:
$stylesheet_uri=get_bloginfo(’wpurl’).”/”.PLUGINDIR.”/”.dirname(plugin_basename(__FILE__)).”/custom-login.css”;
Also, while I'm at it I should add a note about these two settings in the css file (at the end of the line beginning with "#login h1"):
Code:
margin-top:147px;.margin-top:70px;
This code was the result of the tip that Shedhed gave me. The "margin-top: 147px" is read properly by Firefox and ignored by IE7. The ".margin-top:70px" is read properly by IE7 and ignored by FF. The difference is the period. See the reference in the original thread submission for the complete story.

Hope this helps.

Last edited by fromtheranks; Jun 23, 2009 at 02:49 PM.
  #4  
Old Dec 4, 2009, 02:50 AM
everyman
 
79 posts · Nov 2009
Philadelphia
I use "theme my login" along with "aweber registration integration" and Memberwing and it works beautiful. See
http://internet101.biz/login/?instan...ction=register

Marc
  #5  
Old May 15, 2010, 04:26 PM
libella
 
1 posts · May 2010
Anybody else got experience with Atahualpa with "Theme My Login"?
  #6  
Old Apr 24, 2012, 03:13 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Here is a site that has some code that should change the login logo with ease, but its not working in Atahualpa, I guess maybe I would have to add it to Add CSS/JS script section?

PHP Code:
function custom_loginlogo() {
echo 
'<style type="text/css">
h1 a {background-image: url('
.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
</style>'
;
}
add_action('login_head''custom_loginlogo'); 
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg
  #7  
Old Apr 24, 2012, 05:00 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
you would need to edit function.php and add it at the end before the closing ?> PHP tag

note: changes to theme code will have to be redone everytime you upgrade the theme, so keep good notes.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Apr 24, 2012, 05:24 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Thanks for the advice, have everything documented as well - did only changes to functions and index php.

If I add that at the end:

PHP Code:
function custom_loginlogo() { 
echo 
'<style type="text/css"> 
h1 a {background-image: url('
.get_bloginfo('template_directory').'/images/logo.jpg) !important; } 
</style>'


add_action('login_head''custom_loginlogo'); 
no image will show, uploaded the Logo.jpg in the images folder? Do I use the wrong path or is the image tag case sensitive?
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg
  #9  
Old Apr 24, 2012, 05:30 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
If you type in the full URL to the image in the browser address bar, do you see it?
If not it isnt there, the name is wrong or there is a permission problem

If you do see it, there is an error in your code
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #10  
Old Apr 24, 2012, 05:41 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
It is case sensetive, when I used a capital "L" it worked.

The only thing is now how to position it proper (see Pic), any advice on this please?!

Click image for larger version

Name:	login.PNG
Views:	494
Size:	38.8 KB
ID:	1838
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg
  #11  
Old Apr 24, 2012, 06:25 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
You need to ask the plugin's author
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #12  
Old Apr 24, 2012, 06:38 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Here the full code I am using for future reference and other users too - replace with your picture path, picture dimensions and and desired URL):

PHP Code:
function custom_loginlogo() { 
echo 
'<style type="text/css"> 
.login h1 a {background-image: url('
.get_bloginfo('template_directory').'/images/Logo.jpg) !important; margin-left:auto;  margin-right:auto; height: 180px !important; width: 180px !important;} 
</style>'


add_action('login_head''custom_loginlogo'); 
add_filter'login_headerurl''custom_loginlogo_url' );
function 
custom_loginlogo_url($url) {
    return 
'http://www.tribe-online.de';

__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg

Last edited by Hody; Apr 24, 2012 at 07:12 AM.
  #13  
Old Apr 24, 2012, 07:15 AM
juggledad's Avatar
juggledad
 
22,253 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
This thread is about using the Wp-custom-login plugin. So what you have done is hijacked the thread, this is a no no. If you are dealing with something other than the subject of the thread, open a new thread.

Since you got the advice from another site, you should first ask the author of that article your questions. You could also try it with the twenty-eleven theme to see if it works there
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Apr 24, 2012 at 07:17 AM.
  #14  
Old Apr 24, 2012, 07:35 AM
Hody's Avatar
Hody
 
156 posts · Apr 2012
Sorry did not want to hijack, just thought I share me just gained knowledge, I thinks its very useful if somebody wants to replace the login-logo without using a PI.
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg
  #15  
Old Apr 24, 2012, 09:47 AM
lmilesw's Avatar
lmilesw
 
10,099 posts · Jul 2009
Central New York State USA
Why would you want to edit code that won't survive a theme upgrade when there are plugins that will do this quite nicely. Also it appears you are having "issues" with your solution.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #16  
Old Apr 24, 2012, 03:24 PM
Hody's Avatar
Hody
 
156 posts · Apr 2012
No it did work out just fine. I have to add manual php code to the functions.php each time an upgrade happens as my metabox require me to do so. Not its just 10 lines more. And it worked out great.
__________________
...that I rock, doesn´t mean I am made of stone!
My Blog: Diary of a Fatman - Run Fatboy Run! - Tribe Online Magazine - Freiburg

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding login/logout menu option. soop Atahualpa 3 Wordpress theme 12 Sep 12, 2011 01:01 PM
[SOLVED] help! i cant login to my wp-admin itsawrapjas Forum How-To 5 Jul 7, 2009 01:32 PM
Client login/ftp access ErikU Installing & running WordPress 1 Apr 16, 2009 03:33 PM
stupid question - login AJayH Atahualpa 3 Wordpress theme 3 Apr 7, 2009 08:15 AM
Making a 'child page' password protected when it holds a forum Steven Atahualpa 3 Wordpress theme 2 Mar 31, 2009 06:11 PM


All times are GMT -6. The time now is 01:45 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.