Would like to get some help with custom css

Hey! I would like to get some help with custom css please! This is probably quite easy for you guys. But im not that good at custom css.
This is the url where I wan't to make some custom css: http://pro.bymt.se/loggain/
I have also grant you access!

Please take a look at my image! The login module that I want some custom css has the class: .my-btn .

first of all I want the whole module to be more width. Also remove this "(required)" text, cant find out how to do it myself... I would also like to change color of the button and also the width of it. If it is possible to move "forgot password" so it is under the login button too would be great!

Don't know if it is too advanced, but I would also like to change "Forgot password?" to "Glömt lösenordet?".

Last but not least, can you place some simple icons in the field too? I have added a image so you understand! I can create the icons myself , just wondering if you can like link to a image in library? Nevermind, if it is too complicated just let me know, it is not necessary!

Anyways, thanks for always being nice :slight_smile:

//Marcus from Sweden

  • Predrag Dubajic

    Hey @MarcuSM,

    Hope you're doing well today :slight_smile:

    Let me try getting this part by part and then I'll post combined code at the end of this comment which you can use.

    first of all I want the whole module to be more width

    Any specific width you are looking for here?
    If you want only to widen input fields you can do that with this CSS code, just adjust the value for width:

    #login_form_user_login,
    #login_form_user_pass {
        width: 250px;
    }

    Also remove this "(required)" text, cant find out how to do it myself...

    Not sure if this can be removed by using theme options but this code should work:

    .cjfm-login-form .cjfm-required {
    	display: none;
    }

    I would also like to change color of the button and also the width of it

    There is just a bit more code here, since you will need to adjust button background color, border and bottom shadow, also, use padding values to adjust width and height:

    .cjfm-login-form .submit-button #do_login {
        background: #2ECC71;
        border-color: #92E4B5;
        box-shadow: 0 0.25em 0 0 #AFECC9,0 4px 9px rgba(0, 0, 0, 0.75);
        padding: 6px 20px;
    }

    If it is possible to move "forgot password" so it is under the login button too would be great!

    This should do it:

    .cjfm-login-form .submit-button .button-suffix {
        float: left;
        width: 100%;
    }

    Don't know if it is too advanced, but I would also like to change "Forgot password?" to "Glömt lösenordet?"

    This is not something that can be done using CSS code, you will need to use your theme translation files to translate this part of text or you can try with our Ultimate Branding plugin and its Text Change module:
    https://premium.wpmudev.org/project/ultimate-branding/

    Last but not least, can you place some simple icons in the field too?

    Here is the code that will add icons, you only need to place the correct url of your icons, I would suggest using 18x18px icons :slight_smile:

    .cjfm-login-form #login_form_user_login {
        background-image: url(USERNAME_ICON_URL);
        background-repeat: no-repeat;
        background-position: 95% center;
    }
    
    .cjfm-login-form #login_form_user_pass {
        background-image: url(PASSWORD_ICON_URL);
        background-repeat: no-repeat;
        background-position: 95% center;
    }

    I hope I didn't miss anything there, if I did please let me know :slight_smile:

    And here is the entire code that you can copy/paste:

    .cjfm-login-form #login_form_user_login,
    .cjfm-login-form #login_form_user_pass {
        width: 250px;
    }
    
    .cjfm-login-form .cjfm-required {
    	display: none;
    }
    
    .cjfm-login-form .submit-button #do_login {
        background: #2ECC71;
        border-color: #92E4B5;
        box-shadow: 0 0.25em 0 0 #AFECC9,0 4px 9px rgba(0, 0, 0, 0.75);
        padding: 6px 20px;
    }
    
    .cjfm-login-form .submit-button .button-suffix {
        float: left;
        width: 100%;
    }
    
    .cjfm-login-form #login_form_user_login {
        background-image: url(USERNAME_ICON_URL);
        background-repeat: no-repeat;
        background-position: 95% center;
    }
    
    .cjfm-login-form #login_form_user_pass {
        background-image: url(PASSWORD_ICON_URL);
        background-repeat: no-repeat;
        background-position: 95% center;
    }

    Best regards,
    Predrag

  • Adam Czajczyk

    Hey Marcus,

    That's great that Predrag's tip has helped you!

    As for identifying classes (class name or element ID) one of the most handy tools would be Chrome's DevTools Element Inspector. The basic usage idea is that once you "right click" on an element of the page and then select "Inspect Element", you're given highlighted HTML code along with relevant CSS rules.

    Take a look here please:

    https://developer.chrome.com/devtools

    https://developer.chrome.com/devtools#dom-and-styles

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.