Skip to:
Content
Pages
Categories
Search
Top
Bottom

Login widget customization

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

  • @mcuk
    Participant

    @mcuk

    You need to get the css selectors for the title and the button to style them. Easily done using the developer tools on your browser (hit F12 in your browser).

    Then you’ll have something like this to remove the title:

    #idoftitle {
        display: none; 
    }

    and to style your button something like:

    #idofloginbutton {
        border: 1px solid #ff00ff;
        border-radius: 4px;
        background: #ff00ff;
        color: #fff;
    }

    etc.

    There are lots of variables that go into styling so the above are just examples. Put your custom code in your style.css file within your child theme and your changes will show.


    Georgio
    Participant

    @georgio-1

    I used:

    #bp-login-widget-submit {
    border: 1px solid #78B8CE;
    border-radius: 4px;
    background: #84D0EF;
    color: #fff;
    }

    and here is the result

    It is much better than before, but the size of the button is always large. I can make the button smaller, but the link ‘Connexion’ will not be centered any more.
    If I don’t have more chance with the bbpress widget, I will leave it with the code above.

    Thank you very much for your help. 🙂


    @mcuk
    Participant

    @mcuk

    You can set the width, height, padding properties etc to reduce the size of the button. Without a link to your site though it’s not possible to suggest anything further 🙂


    @mcuk
    Participant

    @mcuk

    have a play around:

    #bp-login-widget-submit {
    	width: 50px;
    	height: 20px;
    	padding: 4px 10px;
    	border: 1px solid #0e532c;
    	border-radius: 4px;
    	background: linear-gradient(#4f7c8f, #84D0EF);
    	background: -webkit-linear-gradient(#4f7c8f, #84D0EF); 
    	background: -o-linear-gradient(#4f7c8f, #84D0EF); 
    	background: -moz-linear-gradient(#4f7c8f, #84D0EF); 
    	box-shadow: 0 4px 4px #4f7c8f;
    	-webkit-box-shadow: 0 4px 4px #4f7c8f;
    	-moz-box-shadow: 0 4px 4px #4f7c8f;
    	font-size: 14px;
    }

    Georgio
    Participant

    @georgio-1

    I made some small changes with your code (width, height, margin-right)

    #bp-login-widget-submit {
    	width: 80px;
    	height: auto;
    	padding: 4px 10px;
    	margin-right: 10px;
    	..................

    and the result is really very nice: My site

    Is it OK that I have put the “height” to “auto” ?

    Thank you again for your help !


    @mcuk
    Participant

    @mcuk

    hi,

    Yeah looks good :). With the current properties you’ve used, to center your text the minimum width for your button needs to be: width: 90px;.

    The height is automatically calculated at the moment (combination of the text height, padding and border thickness). It adds up to 30px. So you can either remove the height property from your css or just set it equal to height: 30px;.


    Georgio
    Participant

    @georgio-1

    Thanks! 🙂

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