New to the community? Start here

MarketPress Payment Method screen displays awkwardly

The screen to choose a payment method on my Marketpress shop is displaying very strangely. It is currently doing this in WPMUDev’s Business Feature theme which I had hoped would be fully compatible with Marketpress. However, it displays the same way in other themes. I’m looking for a way, or a trick, or a hack to fix this.

The payment option icons do not line up with their respective text or radio buttons.

Please take a look at this screenshot, so you can see what I mean:

http://imgur.com/OwDm7

Thanks!

Wed, 23 May 2012 1:45:38
  • Kimberly
    • Champion of Loops

    Hi there!

    Sorry about the lineup issue :slight_smile:

    Framemarket/Gridmarket are the only themes actually built for Marketpress, but all of our themes are compatible. Some just take a bit of tweaking to adjust the style. The css doesn't always account for every possible usage.

    To adjust your buttons and icons you can visit

    themes/busiess-feature/_inc/css/businessfeature.css

    and find

    div.post img {

    margin-bottom: 15px;

    somewhere around line 1529. You can change this to 0px. I'll attach a pic of what it should look like

    Best!

    Kimberly

    If the above action did not result in the resolution or common end to this ticket then please feel free to come back here for comment. Just be sure you mark "Not Resolved" to re-open or we might miss it! :slight_smile: Thanks!

    [attachments are only viewable by logged-in members]

  • bigskinny
    • Flash Drive

    KimberlyL,

    Thank you but the image you posted still doesn’t look proper, and could easily confuse a customer. The radio button for Google Checkout should be directly next to the words “Google Checkout”, and the same with Paypal.

    Your solution doesn’t change the placement of the text, it just moves the graphics closer to the radio buttons… what I really need to do is move the text to be directly next to its respective radio button.

    Thank you.

  • bigskinny
    • Flash Drive

    Any progress here? If you could even tell me which CSS (or PHP) file controls the display of this page that would be very helpful. I’ve been trying to track down the relevant code and I can’t find it.

    Note that this same issue happens with multiple different themes; I don’t think it’s a theme issue, so I don’t think the solution should be to alter the theme.

  • Kimberly
    • Champion of Loops

    Here you go! got some pro help :slight_smile:

    Found the relevant code within MarketPress plugin. The function which builds the gateway output is in

    /marketpress/marketpress-includes/template-functions.php starting line 651. The function is named _mp_cart_payment()

    If she wants to move the text to the other side of the image so the layout is radio button, text, image she can add the following CSS to her theme's stylesheet

    table.mp_cart_payment_methods label {

    float: left;

    text-align: left;

    }

    table.mp_cart_payment_methods input {

    float: left;

    }

    table.mp_cart_payment_methods label img {

    float: right;

    }

    Will make the output something like the following.

    [attachments are only viewable by logged-in members]