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 » Header configuration & styling »

Formatting of Sumbit Button on Password Protected Page


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 Aug 11, 2009, 01:03 PM
aebrigham
 
35 posts · Aug 2009
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.
  #2  
Old Aug 11, 2009, 01:29 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
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" ..... />
  #3  
Old Aug 11, 2009, 01:50 PM
aebrigham
 
35 posts · Aug 2009
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
  #4  
Old Aug 11, 2009, 02:54 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
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").
  #5  
Old Aug 11, 2009, 10:18 PM
aebrigham
 
35 posts · Aug 2009
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
  #6  
Old Aug 25, 2009, 06:29 AM
aebrigham
 
35 posts · Aug 2009
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.
  #7  
Old Aug 27, 2009, 12:40 PM
Flynn's Avatar
Flynn
 
3,754 posts · Oct 2008
Munich, Germany
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
  #8  
Old Sep 14, 2009, 09:42 AM
Madeglobal
 
1 posts · Sep 2009
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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Search Results page needs formatting black_cat Atahualpa 3 Wordpress theme 5 Aug 10, 2009 09:55 AM
Main Page Body Text Formatting weiserma Header configuration & styling 1 Jul 18, 2009 02:17 PM
formatting (adding space) to main page menu viewdesigninc Page & Category Menu Bars 1 Mar 31, 2009 06:38 PM
Making a 'child page' password protected when it holds a forum Steven Atahualpa 3 Wordpress theme 2 Mar 31, 2009 06:11 PM
Changing Home page formatting ... Old Squid Page & Category Menu Bars 1 Feb 19, 2009 05:59 PM


All times are GMT -6. The time now is 10:07 AM.


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