Skip to:
Content
Pages
Categories
Search
Top
Bottom

Styling the login widget


  • Lars Henriksen
    Participant

    @adjunkten

    Hi,

    I am trying to use the login widget in the topbar of my site.

    I would like the two input fields to align horizontally – they don’t in Chrome – and I would also like to make the login form smaller.

    How can I achieve that?

Viewing 5 replies - 1 through 5 (of 5 total)

  • iamthewebb
    Participant

    @iamthewebb

    Just had a quick look and chrome renders both input boxes at width 170px where as FF has a width of 147px, you could force this in your theme override?
    #bp-login-widget-user-login.input

    I think it was designed to be used in a sidebar and it might look a bit strange on a mobile device without further css.


    Lars Henriksen
    Participant

    @adjunkten

    Thanks @iamthewebb, your hint helped me in the right direction.

    You are right, it doesn’t look so well on a mobile device. How can I fix that?

    Cheers, Lars


    iamthewebb
    Participant

    @iamthewebb

    @media rules are useful for having differing css depending on the screen width but I can see you’ve updated it so it should look good over all devices anyway.
    Looks good


    Lars Henriksen
    Participant

    @adjunkten

    Yes, I think it looks OK now.

    I hid the labels ‘username’ and password’ to save space for the input fields. I would like to add theses labels as placeholder text to them, though – some users might be confused by seeing two empty boxes.

    Is there any way I could do that, without editing the widget code?

    Thanks,
    Lars


    studiocrafted
    Participant

    @studiocrafted

    .css-class-of-username-input, .css-class-of-password-input {
    float: left;
    width: 50%;
    }

    If the inputs have containers then you can also apply padding-right and padding-left to the first and last child.

    .username-container {
    padding-right: 10px;
    }

    .password-container {
    padding-left: 10px;
    }

    To add a label as a placeholder wont work, a placeholder should be a hint about what to do with the form field, the label should be used to describe it in part. Additional info about the field can be supplied after the input in a paragraph.

    There are some nice examples of animated label elements which could achieve what you are trying to do with css. It would be something like.

    .input-container {
    position: relative;
    }

    label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: .2s;
    }
    input:focus + label {
    position: absolute;
    top: 0;
    left: 0;
    }

    Hope that helps.

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.
Skip to toolbar