Styling the s2member_pro_login_widget (CSS)
Posted: October 29th, 2011, 6:51 pmHi all,
My CSS skills are limited and I'm looking to go from this
to this.
I used the login pro code
1. The problem is that I do not now what element to address to style the input fields and the button.
2. I will probably need to work with jquery to add "username" and "password" inside the fields, but that problem is secondary, and I can probably figure that out myself.
I tried manipulating div#login, and I got it to float on the right of the header, and set the width for the input field, but that's it
I don't know how to address the login fields, the button, the text and the ticker box. I need them to display horizontally like I did in the image above.
You can see the test blog here; http://www.caesarsreport.com/blog/
If you have any tips how to make this possible, please post them, thank you so much!
Appendix - This is the header code:
My CSS skills are limited and I'm looking to go from this
to this.
I used the login pro code
- Code: Select all
<div id ="login">
<?php
$options = array(
"title" => "",
"signup_url" => "http://xxx.xxxxxx.org/register/",
"login_redirect" => "%%previous%%",
"profile_title" => "",
"display_gravatar" => "1",
"link_gravatar" => "1",
"display_name" => "1",
"logged_in_code" => "",
"logout_redirect" => "http://xxx.xxxxxx.org",
"my_account_url" => "1",
"my_profile_url" => "1"
);
$args = array (
"before_widget" => "<div class=\"member_login_widget\">",
"after_widget" => "</div>",
"before_title" => "<h5>",
"after_title" => "</h5>"
);
echo s2member_pro_login_widget($options, $args);
?>
</div>
1. The problem is that I do not now what element to address to style the input fields and the button.
2. I will probably need to work with jquery to add "username" and "password" inside the fields, but that problem is secondary, and I can probably figure that out myself.
I tried manipulating div#login, and I got it to float on the right of the header, and set the width for the input field, but that's it
- Code: Select all
#login {
width: 220px;
height: 70px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: right;
display:inline-block;
}
I don't know how to address the login fields, the button, the text and the ticker box. I need them to display horizontally like I did in the image above.
You can see the test blog here; http://www.caesarsreport.com/blog/
If you have any tips how to make this possible, please post them, thank you so much!
Appendix - This is the header code:
- Code: Select all
<?php
/**
* Header Template
*
* @package Mysitemyway
* @subpackage Template
*/
?><!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie ie6 lte9 lte8 lte7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 7]> <html class="ie ie7 lte9 lte8 lte7" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 8]> <html class="ie ie8 lte9 lte8" <?php language_attributes(); ?>> <![endif]-->
<!--[if IE 9]> <html class="ie ie9 lte9" <?php language_attributes(); ?>> <![endif]-->
<!--[if gt IE 9]> <html> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php mysite_document_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php mysite_head(); ?>
<?php wp_head(); ?>
</head>
<body class="<?php mysite_body_class(); ?>">
<div class="multibg"><div class="multibg"></div></div>
<div id="body_inner">
<?php mysite_before_header();
?><div id="header">
<div id="header_inner">
<?php mysite_header();
?>
<div id ="login">
<?php
$options = array(
"title" => "",
"signup_url" => "http://xxx.xxxxxx.org/register/",
"login_redirect" => "%%previous%%",
"profile_title" => "",
"display_gravatar" => "1",
"link_gravatar" => "1",
"display_name" => "1",
"logged_in_code" => "",
"logout_redirect" => "http://xxx.xxxxxx.org",
"my_account_url" => "1",
"my_profile_url" => "1"
);
$args = array (
"before_widget" => "<div class=\"member_login_widget\">",
"after_widget" => "</div>",
"before_title" => "<h5>",
"after_title" => "</h5>"
);
echo s2member_pro_login_widget($options, $args);
?>
</div>
</div><!-- #header_inner -->
</div><!-- #header -->
<?php mysite_after_header();
?><div id="content">
<div id="content_inner">
<?php mysite_before_main();
?><div id="main">
<div id="main_inner">
<?php mysite_before_page_content(); ?>