Wordpress Themes - WP Forum at BFA - Formatting of Sumbit Button on Password Protected Page

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)

- - Formatting of Sumbit Button on Password Protected Page (http://forum.bytesforall.com/showthread.php?t=2906)

Formatting of Sumbit Button on Password Protected Page

I would like to use my CSS Styling ie., Size, Color, Font, Hover styling specified in the Atahualpa settings for the Submit button on a Password Protect Page.

I cannot figure out how to do this. Any help would be appreciated.

Give buttons a class of "button" and text fields a class of "text". Atahualpa won't style all input fields, only those with specific classes, because otherwise the various input elements couldn't be distinguished cross-browser

<input type="submit" class="button"...... />

<input type="text" class="text" ..... />

Hi Flynn,

Thank-you for the quick reply. I was aware of the class attributes, as I used these to format a custom template for pages.

The problem is, I don't know where the the code is fo the Password Protect forms to put in the code for formatting them. Its not something customizable in 3.4.1. Nor is it a .php file that you can edit to insert the tags

Then see if the button, or any parent container, already has a class or ID, then you could style it through HMTL/CSS Inserts -> CSS Insert

.button, .Button, .yourclass {
padding: 0 2px;
height: 24px;
line-height: 16px;
...more...
}

.buttonhover {
padding: 0 2px;
cursor: pointer;
...more..
}

To add the hover effect you'd have to add the button's class in js.php

jQuery("input.button, input.Button, input.yourclass").

I am not exactly certain if I follow exactly what to do to make all the buttons and text fields style the same.

It appears that when you password protect something it uses its own style that is not configurable by Atahualpa.

I suppose I could use a plugin, but I would rather use Atahualpa

I am not sure if anyone cares, but I figured out how to style the Submit Button and Password field on Wordpress "Password Protected" pages...

via "Add HTML/CSS Inserts" add the following code.

Code:

input[type=submit]{

padding:0 2px;

height:24px;

line-height:16px;

background-color:#777777;

color:#ffffff;

border:solid 2px #555555;

font-weight:bold;

}

input[type=submit]:hover{

padding:0 2px;

cursor:pointer;

background-color:#6b9c6b;

color:#ffffff;border:

solid 2px #496d49;

}

input[type=password]{

padding:3px;

color:#000000;

border-top:solid 1px #333333;

border-left:solid 1px #333333;

border-right:solid 1px #999999;

border-bottom:solid 1px #cccccc;

background:url(http://yourwebsite.com/wp-content/themes/atahualpa/images/inputbackgr.gif) top left no-repeat;

}

input[type=password].highlight{

background: #e8eff7;

border-color: #37699f;

}

In order for the onfocus highlighting to occur you have to edit js.php and add some code to the jQuery for highlighting fields

from:

Code:

jQuery("input.text, input.TextField, input.file, input.password, textarea").

to:

Code:

jQuery("input.text, input.TextField, input.file, input.password, textarea, input[type=password]").

There may be a better way to do the button color and hover, but this is how I did it. I think Atahualpa should have this formatting as something standard.

The input[type=password] CSS won't work in IE6 though.

However the existing CSS class .password could be added to inputs of the type password which don't have the class password

jQuery('input[type=password]').addClass('password');

Will add this to the next version

Hi,

If you use the "better-protected-pages" plugin (available from www.wordpress.org/extend) then all of this is done for you. It even adds a "re-lock" button to your password protected pages which is a major problem with wordpress as it normally leaves the page indefinitely unlocked on your computer... which could be a major "security" problem for your data.

Anyway, hope that the plugin helps,

Madeglobal.