Login page styling

[Pod]

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.

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

Thanks!

 

[Russ]

I'll need to view it live on the site, can you PM me a temp login that would have access to that page?

 

[Pod]

Hey Russ. You can see it on the registration page of my licensed site, no login required.

 

[Pod]

Hey

Have you had any more thoughts about this?

 

[Russ]

Apologies it slipped past me, not seeing it:

 

[Pod]

NP, thanks Russ. I disabled it after a while because it looked crap

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

 

[Russ]

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:

.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:

 

[Pod]

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?

 

[Russ]

Which blank lines, the borders? I think the separation is nice just as my own opinion.

 

[Pod]

Ok, I'll leave it as per your changes. Many thanks again Russ.

 

[Steve]

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.

ol.section.ugList .primaryContent {
  width: 50%;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
}
ol.section.ugList .primaryContent:last-child {
  width: 100%;
}

Result:

 

[Pod]

Done. Thanks Steve