• Locked
2 replies [Last post]
Thu, 2013-06-20 06:05
helenaqurfew
helenaqurfew's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2013-06-20
Posts: 2
Points: 3

Hi!

Thank you for having a CSS forum for those of us who can become confused by all of these things at times! I am attempting to get the login page for our company to look like the following:

https://jannus.org/wp-includes/images/Yearly%20Income.jpg

But am having an extreme amount of difficulty getting it to happen. Using the PHP/HTML:

    //1. Add a new form element...
    add_action('register_form','myplugin_register_form');
    function myplugin_register_form (){
        $yearly_income = ( isset( $_POST['yearly_income'] ) ) ? $_POST['yearly_income']: '';
        ?>
		<p id="dollar_sign_p">$</p>
        <p id="yearly_income_p">
            <label for="yearly_income"><?php _e('Yearly Income','mydomain') ?><br />
                <input type="text" name="yearly_income" id="yearly_income" class="input" value="50,000" size="25" style="text-align:right" onkeypress="return forceNumber(event);" onkeyup="this.value=numberWithCommas(this.value);"/>
        </p>
        <?php
    }

I have tried various things such as:

html body.login div#login form#registerform p#dollar_sign_p {
            float:left;
        }
 
html body.login div#login form#registerform p#yearly_income_p {
            float:left;
        }

and

html body.login div#login form#registerform p#dollar_sign_p {
            display:inline;
        }
 
html body.login div#login form#registerform p#yearly_income_p {
            display:inline;
        }

But in both cases the dollar sign is either A) remaining above the field or B) it pulls the text from below (which reads on the site: "A password will be emailed to you" but which is not in this image) up next to it. I'm going to not fiddle with it for a while while I attempt some other stuff - the actual site with the incorrect formatting can be seen here:

https://jannus.org/wp-login.php?action=register

As you can see in the image I am also interested in displaying a "per year" text after it. How do I properly align this elements in one line? I was almost positive float-left would do it, but for some reason it does not float the field next to the dollar sign but the text that is displayed below the field (?!)

Top
Tags:
Thu, 2013-06-20 09:20
#1
pav
pav's picture
Offline
Regular
Last seen: 9 years 48 weeks ago
Timezone: GMT+1
Joined: 2012-10-18
Posts: 33
Points: 41

Try this-

One thing- Label tag was not closed. 

<p class='amountControl'>
		<label for="yearly_income" style='margin-left:10px;'>Yearly Income</label>
		<span style='font-size:16px;font-weight:bold'>&#36;</span>
		 <input name="yearly_income" id="yearly_income" class="input" value="50,000" size="25" type="text" style='width:168px'>
		 <span style='font-size:16px;font-weight:bold'>per year</span>
	</p>

For demo purpose I have inline styles, its better to have them in classes. I have also deleted some attributes, which you can add back.

Cheers! .Pav

Top
Thu, 2013-06-20 09:33
#2
helenaqurfew
helenaqurfew's picture
Offline
newbie
Last seen: 9 years 50 weeks ago
Timezone: GMT-7
Joined: 2013-06-20
Posts: 2
Points: 3

Amazing

Pav...thanks!

With some modifications with the js needed I arrived at the following:

	<p class='amountControl'>
		<label for="yearly_income" style='margin-left:0px;'>Yearly Income</label>
		<span style='font-size:16px;font-weight:bold'>&#36;</span>
		 <input type="text" name="yearly_income" id="yearly_income" class="input" value="50,000" size="25" style='width:168px; text-align:right' onkeypress="return forceNumber(event);" onkeyup="this.value=numberWithCommas(this.value);"
		 <span style='font-size:16px;font-weight:bold'>per year</span>
	</p>

Works and looks fantastic! Thank you so much for taking the time. Nice elegant solution compared to my convoluted mess (!)

-Helena

Top
  • Locked