Support » Plugin: Login with Vipps » Unattracive UI

  • Resolved PorridgeFactory

    (@porridgefactory)


    I’m not sure if it is my theme (flatsome theme) or a Vipps code.. but can the log-in link be made more attractive. perhaps let the user specify the text as well. I have an international store and would like to use the text << log-in with Vipps (within Norway) >>

    I’d also like a button instead of just text. Or perhaps an easy way to edit the text. Right now it is squished and unattractive.

    thanks for the work you’ve done so far.

    Here is the screenshot
    https://www.dropbox.com/s/9246m9aby91wyry/2020-03-13_154241.jpg?dl=0

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor iverok

    (@iverok)

    Yes, it’s not supposed to look like that obviously. The CSS provided obviously isn’t quite compatible with your theme.

    It is possible to modify the CSS or the entire HTML of the button. If you want to, I can try to help with the CSS first, just in case the changes required can be generally useful. We’ll need access to the front-end (only) of your site; you can contact us on support@wp-hosting.no.

    The filters provided are for this banner

    'continue_with_vipps_checkout_banner'
    'continue_with_vipps_login_banner'
    'continue_with_vipps_register_banner'

    (depending on where this is shown.) It will take the entire HTML and needs to return the same. Based on your screenshot I think you will need to override 'continue_with_vipps_login_banner' with something like this:

    add_filter('continue_with_vipps_login_banner', function ($message) {
       $logo = plugins_url() . '/login-with-vipps/img/vipps_logo_negativ_rgb_transparent.png';
       $text = "<a href='javascript:login_with_vipps(\"woocommerce\");'>Log-in with %s (within Norway)</a>";
       $message = sprintf($text, "<img class='inline vipps-logo negative' border=0 src='$logo' alt='Vipps'/>");
       return $message;
    });

    For the CSS, the classes involved are div.woocommerce-info.vipps-info, but to fix that we need to see what other rules are active. You may try to just add some padding with !important.

    well – I didn’t get the button to show up correctly, but i did get padding around the text to take effect. That makes it look better at least

    Plugin Contributor iverok

    (@iverok)

    Good. The button code I posted is tested by the way, so it should take effect if added to your child-theme or similar.

    If you need more help with customizing the buttons we may need a bit more access; if so you can send an email to support@wp-hosting.no and we can se what we can do.

    I’m so happy others than me had this issue.
    Mine looks the same.
    https://ibb.co/8K4M5Tm

    But I’m a bit stupid, and cant seem to understand what CSS file you are reffering to.

    Are you able to help me to?

    Thanks in advance

    – Arne

    Plugin Contributor iverok

    (@iverok)

    What CSS file to modify will depend on your theme or child-theme. Some themes will allow you to add extra CSS as a theme option, and if this is lacking, there are plugins you can use (like https://wordpress.org/plugins/simple-custom-css/, and others).

    We should be able to help further (after Easter, at least) but then we’ll have to see the actual page. If you want to keep this private, you can contact support@wp-hosting.no with the information.

    We’ll of course try to make our CSS compatible with as many themes as possible, but there are a lot of them out there.

    Thanks for the reply.
    I’m currently using OceanWP theme.
    The page isn’t a secret, it can be found at https://profiltoy.no

    Looking forward to this Easter is over, and forward to hear from you again. 😊

    Thanks in advance

    – Arne

    Plugin Contributor iverok

    (@iverok)

    Sorry about the delay; here is some CSS that should help. Either add it with your themes “Custom CSS” feature, or if your theme does not provide this, you can use a “Custom CSS” plugin as noted above.

    Since you are (prudently!) hiding your wp-login link, I can’t help with any issues with the login button there, so this is for the WooCommerce login screen only and the various buttons and banners in the checkout process.

    Because some of your CSS is added inline on the page, these may need some extra code to get applied properly, but it should be a good start:

    /* To fix the "Press here" links, this should work. This will be included 
        in the plugins' default CSS in the next version, but in the meantime 
        add this too: */
    .woocommerce-info.vipps-info a {
    color: #fff !important; 
    background-color: transparent !important;
    }
    .woocommerce-info.vipps-info a:hover {
        color:#fff !important;
        font-weight: bolder;
        background-color: transparent !important;
    }
    
    /* The login banner uses the standard style of the woocommerce notices in your
       theme, but if you would like slightly larger text on this banner, try this: */
    .woocommerce-account .woocommerce-info.vipps-info {
        font-size: 105%;
    }
    
    /* To ensure the login banner doesn't grow too wide on larger screens, 
     you can try this. If you change font sizes, you may need to change 
     the numbers here: */
    
    @media screen and (min-width: 800px) {
        .woocommerce-account .woocommerce-info.vipps-info {
        width: 700px;
        position: relative;
        margin-left: -350px;
        left: 50%;
     }
    }
    
    /* Finally, this fixes the padding and margin of the "continue with Vipps" button in the shopping cart: */
    
    a.button.vipps-orange.vipps-button.continue-with-vipps {
        padding-top:0;
        padding-bottom: 0;
        margin-bottom: 0.5rem;
    }
    
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Unattracive UI’ is closed to new replies.