WordPress.org

Ready to get started?Download WordPress

Forums

Donate Extra
[resolved] Each element moving to the line below... (9 posts)

  1. kentopolis
    Member
    Posted 1 year ago #

    I'm getting some weird styling in my theme, every element is on it's own line, so it doesn't make much sense to an end user view page here. Any help?

    http://wordpress.org/extend/plugins/donate-extra/

  2. justinesmithies
    Member
    Plugin Author

    Posted 1 year ago #

    Hmm its definately something to do with your theme.
    Leave it with my and i'll try and find an answer for you.

  3. justinesmithies
    Member
    Plugin Author

    Posted 1 year ago #

    Can you do me a favour please ?
    Can you make a test page with nothing on it but the donate extra form for me to look at too ?

    Thanx
    Justine

  4. kentopolis
    Member
    Posted 1 year ago #

    http://www.epicchurch.us/test-donate/ here it is, thanks so much for looking into this! I really appreciate it it!

  5. justinesmithies
    Member
    Plugin Author

    Posted 1 year ago #

    If you use the firebug plugin you can fix the issue using the modified snippets from below.
    To make a permanant fix edit your donate-extra.php file and ammend the correct lines to look similar to what i have included below.

    <small style="position: relative; bottom: 30px; left: 220px;">(Currency: USD)</small>
    <div style="position: relative; left: 220px; width: auto; bottom: 60px;"><div style="position : relative; top: 15px; left: 5px;">x</div><input type="text" style="width: 10px; position: relative; bottom: 5px; left: 20px;" value="1" id="p3" name="p3">
    </div>

    Hope that helps ?

    Justine

  6. kentopolis
    Member
    Posted 1 year ago #

    Justinesmithies, thank you so much!!! That was really helpful!
    if this helps someone else, here is the actual code snippets I replaced in the php... I also addjusted a few things in the second piece to make the box for defining the number of repeats for a donation a little bigger to account for a larger number to be seen...

    So... I replaced:
    <small>('.__('Currency: ','dextra').$cur.')</small></p>';

    with:
    <small style="position: relative; bottom: 30px; left: 220px;">('.__('Currency: ','dextra').$cur.')</small></p>';

    and:
    <input name="p3" id="p3" value="'.$dextra['duration'].'" type="text" style="width:10px;" />

    with:

    <div style="position: relative; left: 220px; width: auto; bottom: 60px;"><div style="position: relative; top: 15px; left: -19px;">x</div>
    <input type="text" style="width: 50px; position: relative; bottom: 15px; left: 20px;" value="1" id="p3" name="p3">

    Any idea why it's still wrapping the form on http://www.epicchurch.us/give-online/. I tried doing
    <div style="white-space:nowrap;"> around the shortcode and it did not work...

  7. kentopolis
    Member
    Posted 1 year ago #

    Ok, so, I'm dumb, I just gave the form a width and it fixed the wrapping... if set to 100% it will not wrap at all, I kind of liked how it wrapped around it at 347px...

    Thanks for all your work on this plugin!
    <form id="donateextraform" style="float: left; width: 347px;"" action="'.$verifyurlz[$dextra['testing_mode']].'" method="post">';

  8. justinesmithies
    Member
    Plugin Author

    Posted 1 year ago #

    Glad to have been a help to someone.

    Thanx
    Justine

  9. kentopolis
    Member
    Posted 1 year ago #

    Code Styling Changes to work with the new update - just in case anyone else has the same problems of the plugin not displaying well in their theme...

    The donation amount - styled the width:
    <input type="text" name="amount" id="amount" value="'.$dextra['default_value'].'" style="width: 150px;"/>

    bring the currency up next to the donation amount:
    <small style="position: relative; left: 166px; bottom: 30px;">('.__('Currency: ','dextra').$cur.')</small>

    Bring the "how often" box up next to the word "every":
    <input name="p3" id="p3" value="'.$dextra['duration'].'" type="text" style="width: 35px;position: relative;bottom: 24px;left: 42px;" />

    Bring the frequency drop down up:
    <select name="t3" id="t3" style="width: 125px; position: relative; bottom: 63px; left: 89px;">';

    Bring "for" up next to the donation frequency drop down (added a div for styling purposes):
    <div style="position: relative; bottom: 49px;"> for</div>

    Move the input box for "how many times to repeat" up:
    <input name="srt" id="srt" value="'.$dplus['duration'].'" type="text" style="width:20px;position: relative;bottom: 74px;left: 23px;width: 36px;" >

    Move up the "times ("0"..." text:
    <div style="position: relative; left: 67px; bottom: 106px;"> times <small>("0" means no end date)</small></div> (placed all of this inside of a div to keep it all together)

    Move "donate" button up:
    <input type="image" src="'.$button.'" style="background-color: transparent;position: relative;bottom: 105px;" border="0" name="submit" alt="">

    I am aware that this may only help me on my site - but, I at least wanted to have the changes easily accessible for my own site. If there is a better way of doing this, I'm all ears - I'm not a css guru

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic