How can I restyle the login button?

How can I restyle the login button?

by abhishek bhattacharjee -
Number of replies: 4

hello richard i have created a theme from the doc u mentioned 

i wanted to customize a button but it is taking the css from the bootstrapbase as i can see even if i provide inline style 

html looks like this

<input type="submit" id="loginbtn" class="btn-success1 form-control1" value="<?php echo "Login" ?>" />

inline css

<style>

.form-control1{

display: block;

    width: 96.4%;

    height: 52px;

    padding: 6px 69px;

    font-size: 14px;

    line-height: 1.42857143;

    color: #555;

    background-color: #fff;

    background-image: none;

    border: 1px solid #ccc;

    margin-left: 10px;

}

.btn-success1{

    color: #fff; 

   background-color: #002f5e; 

   font-size: 24px;

    

}

</style>

but this is not working how to change the submit button

Attachment theme.png
Average of ratings: -
In reply to abhishek bhattacharjee

Re: How can I restyle the login button?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Did you add that HTML?

<input type="submit" id="loginbtn" class="btn-success1 form-control1" value="<?php echo "Login" ?>" />

Also where on the page did you add the CSS?...

Thanks

Mary

Average of ratings: -
In reply to abhishek bhattacharjee

Re: How can I restyle the login button?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I have found a little more time to look at this and find that the CSS is confusing, and that you are not using the CSS selectors correctly.

Try this and see if it works better:

.form-control1 {
    display: block;
    width: 96.4%;
    height: 52px;
    padding: 6px 69px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    margin-left: 10px;
}

#loginbtn .btn-success1.form-control1 {
    color: #fff;
    background-color: #002f5e;
    background-image: none;
    font-size: 24px;    
}

Average of ratings: Useful (1)
In reply to abhishek bhattacharjee

Re: How can I restyle the login button?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

In your screenshot of the developer view of the css, I don't see those classes being applied to whatever element you are looking at, so first of all check the html in chrome developer tools to ensure those classes are being applied (they probably are, they are just not getting the css, hence not in that part of the screenshot).

Then use Mary's corrected version of the css, but I would recommend adding it to one of the stylesheets of your theme, not as <style> tags in your layout file. Don't forget to either have theme developer mode enabled or purge caches.

Average of ratings: -
In reply to Richard Oelmann

Re: How can I restyle the login button?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Also, I'm not really sure why you would have added those classes anyway as they are not necessary. The submit button on the login page can be targetted specifically by:

#page-login-index .loginpanel input#loginbtn {your css rules here}

Perhaps you are trying to build your own independent login page - in which case my advice would be to start by recognising what you can do with the existing login page and some css styling, just by cloning and adapting the column1.php layout file to create a login.php (referenced in the config.php file) which would then have all the component parts by default (from $OUTPUT->main_content() ) and which you could then style as required without resorting to building your own specific html with new classes.

Generally, using the classes already in place, where possible, allows the theme to pick up consistent styles from the theme stylesheets (including the parent themes), rather than separate in-page style sections in every layout file.

One complication is that login is one area that does not have a renderer that can be overridden as other areas of the page/site do, but if you are at the stage where you are trying to replicate that level of customisation by creating your own login page rather than restyling the core one, then it would be useful to know that you have looked at and considered (and rejected) the core login page - and why - rather than creating a new one simply because you are not aware of some of the existing options, and so we can provide the appropriate support and help for your queries.

Average of ratings: -