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.
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. 🙂
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 🙂
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;
}
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 !
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;.
