XF 1.x Login page styling

Pod

Customer
Hey all :)

We have added this https://xenforo.com/community/resources/join-user-group-by-waindigo.225/ today and it all seems to be fine. The only thing I don't like is the styling of the choice menu on the registration page.

Screen Shot 2015-05-17 at 21.26.54.png


Is there a way to make the boxes look more slick? Preferably not as tall..and maybe in a grid?

Thanks!
 

Russ

Pixel Exit Staff
NP, thanks Russ. I disabled it after a while because it looked crap ;)

I have re-enabled it so you can take a look....

Try maybe this in extra.css:

Code:
.register_form .xenForm .xenForm {
  background-color: rgb(28, 28, 28);
  border: 1px solid rgb(40, 40, 40);
  border-radius: 2px;
  padding: 10px;
}

.register_form .xenForm .xenForm h3.sectionHeader {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
  padding: 9px 10px;
  text-transform: uppercase;
   margin-bottom: 0px;
}

.register_form .xenForm .xenForm .section {
  margin: 0 auto;
}
.register_form .xenForm .xenForm .ugList .ctrlUnit {
  margin: 0 auto;
  padding: 10px 0;
   text-align: center;
}
.register_form .xenForm .xenForm .ugList dt, .register_form .xenForm .xenForm .ugList dd {
  display: inline-block;
  float: none;
  width: auto;
}

Result:
Screenshot_2.png
 
  • Like
Reactions: Pod

Pod

Customer
Wow. That looks great, thank you!

Any way to take out the blank lines above and below the group names? ...or do you think that'll look crappy?
 

Steve

Moderator
Ok, I'll leave it as per your changes. Many thanks again Russ.
You can go a little further to save space and make it look more compact. :)

Code:
ol.section.ugList .primaryContent {
  width: 50%;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
}
ol.section.ugList .primaryContent:last-child {
  width: 100%;
}
Result:
GSzYYAP.png
 
  • Like
Reactions: Pod

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.