How to change Register button in CSS (WHMCS Script)

Hello all,

I am trying to change the register button located here; http://xrumergeek.com/clients/register.php. The button is too small and out of place, ideally I am looking to replace it with something a little bigger and a little brighter.

I've contacted WHMCS Support and they've guided me in the right direction but will not assist any further. Can anyone make sense of what's below (this is what they've told me to edit) and explain exactly how I can change the button to something bigger and brighter, and perhaps align it more central on the page? Thank you!!

<p align="center"><input class="btn btn-large btn-primary" type="submit" value="{$LANG.clientregistertitle}" /></p>

Code (markup):

.input-btn-large, input.btn-large {
width: auto; /* Fix for Massive Width on Buttons from Bootstrap */

Code (markup):

I'd really appreciate any further guidance.

 

My first question would be what in the blue blazes makes a single lone input by itself a paragraph -- though looking at the page itself it's filled with endless pointless DIV and parargaphs around non-paragraph elements. I'd be throwing out ~60% or more of the markup on that page before even THINKING about the style.

Though that's kind of a given since you mentioned that fat bloated steaming pile of manure known as bootstrap... the presence of jquery bloat, google analytics in the wrong spot (NOT that there's a legitimate reason to even use GA if your server is set up right), etc, etc, etc...

Assuming you wanted to keep the garbage bloated pointless non-semantic markup, just what is it you want to do? Center it on the page? (text-align:center; in the css), make it bigger (just add padding)?

Really though you've got 19k of markup doing about half that's job...

 

Hello,

Thanks for your response. Coding is certainly not my strong point so the build of that entire page is through a combination of WHMCS and hired (poorly, it seems) help. I would like to both centre the registration button and make it bigger if possible. Could you try and guide me, it would be greatly appreciated.

WebDev

 

Furthermore- if you look here; http://xrumergeek.com/clients/submitticket.php?step=2&deptid=1 you will see the "Submit" button is a deep red colour, whereas on register.php the register button is a dull grey... not sure why the two are different but if I could get that to be red also, that would be fantastic.


EDIT: I've successfully managed to add padding now so ideally if I could just change the colour of the button to match the red of the rest of the site, that would be great.

WebDev

 

Not tested.

Look at bootstrap.css line 1858

.btn.primary {
  color: #ffffff;
  background-color: #D10B0B;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#F5423B), to(#D10B0B));
  background-image: -moz-linear-gradient(top, #F5423B, #D10B0B);
  background-image: -ms-linear-gradient(top, #F5423B, #D10B0B);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F5423B), color-stop(100%, #D10B0B));
  background-image: -webkit-linear-gradient(top, #F5423B, #D10B0B);
  background-image: -o-linear-gradient(top, #F5423B, #D10B0B);
  background-image: linear-gradient(top, #F5423B, #D10B0B);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5423B', endColorstr='#D10B0B', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #D10B0B #D10B0B #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

Code (markup):

The hex color values for the linear gradient are what is of concern.
Gawd, but bootstrap is a pile of it. 2400 lines for basically simple pages is ridiculous, plus three additional files? DS has this pegged.

good luck,

gary