Skip to Content Skip to Menu

Trying to style login module buttons and fields

  • alsage13
  • alsage13
  • OFFLINE
  • Posts: 9
  • Thanks: 0
  • Karma: 0
12 years 6 months ago - 12 years 6 months ago #197104 by alsage13
I've spent an absurd amount of time trying to figure out how to style the buttons and fields on my CB login module. Using Firebug I've played a great deal with the styles as element.style but I am not getting it into my CSS file correctly, somehow. I have decent knowledge of CSS but this is stumping me! :blush:

Here is my CSS:
Code:
mod_login_username.cbloginbottom, inputbox.cbloginbottom { color: #666666; height: 22px; } button.cbloginbottom { background: none repeat scroll 0 0 #F0F0F0; border: 1px solid #ADD9F4; border-radius: 6px 6px 6px 6px; color: #666666; padding: 5px; }

Obviously, .cbloginbottom is the class I've given to the module. You can see the live page here

Any help on this is VERY appreciate! Thank you!
Last edit: 12 years 6 months ago by alsage13.

Please Log in or Create an account to join the conversation.

  • isherwood
  • isherwood
  • OFFLINE
  • Posts: 1
  • Thanks: 0
  • Karma: 0
12 years 6 months ago - 12 years 6 months ago #197151 by isherwood
One problem I see with your button styles is that the currently applied class is actually .cbloginright. Sometimes rather than giving an element a custom class, you should simply use the existing classes on parent elements. This eliminates the need to dig into the code to find the element. For example:
Code:
.cbLoginButtonSpan input.button { background-color: #F0F0F0; border: 1px solid #ADD9F4; border-radius: 6px; color: #666; padding: 5px; -moz-transition: background-color 0.4s ease 0s; -webkit-transition: background-color 0.4s ease 0s; transition: background-color 0.4s ease 0s; }

The above transition styles will apply a fade effect in modern browsers, which softens the user experience nicely when used in conjunction with, for example:
Code:
.cbLoginButtonSpan input.button:hover { background-color: #fff; }
Last edit: 12 years 6 months ago by isherwood.

Please Log in or Create an account to join the conversation.

  • alsage13
  • alsage13
  • OFFLINE
  • Posts: 9
  • Thanks: 0
  • Karma: 0
12 years 6 months ago #197258 by alsage13
Actually it turned out to be a lot simpler than that, just a stupid little mistake. When I put the class in the module, I put a period in front of it (.cbloginbottom) instead of a leading space ( cbloginbottom). Once I fixed that it worked.

Thanks for the advice, though, isherwood, I can see that coming in handy down the road.

Please Log in or Create an account to join the conversation.

Moderators: beatnantkrileon
Powered by Kunena Forum