[How To?] How can I change the size, color etc... of the Quick Login Box?

[blongso]

Hello community,
How and where can I change the size, color etc... of the Quick Login Box?

THX in advance for your help!
blongso

---

re,
I am trying to explain our problem:

Our quickbox doesn't look nice


FA5Dark Frontend Theme by Vintagedaddyo (Changed a bit for our purposes)

global.css:

/** Modal Start **/

.blocker  {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 z-index: 9999;
 padding: 20px;
 box-sizing: border-box;
 background-color: rgb(0,0,0);
 background-color: rgba(0,0,0,0.75);
 text-align: center;
}

.blocker:before{
 content: "";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 margin-right: -0.05em;
}

.blocker.behind {
 background-color: transparent;
}

.modal {
 width: 400px;
 text-align: left;
 background: #fff;
 display: inline-block;
 vertical-align: middle;
 position: relative;
 z-index: 2;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -o-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
 -webkit-box-shadow: 0 0 10px #000;
 -moz-box-shadow: 0 0 10px #000;
 -o-box-shadow: 0 0 10px #000;
 -ms-box-shadow: 0 0 10px #000;
 box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
 position: absolute;
 top: -12.5px;
 right: -12.5px;
 display: block;
 width: 30px;
 height: 30px;
 text-indent: -9999px;
 background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
 display: none;
 width: 64px;
 height: 64px;
 position: fixed;
 top: 50%;
 left: 50%;
 margin-right: -32px;
 margin-top: -32px;
 background: url(images/spinner_big.gif) no-repeat center center;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 -o-border-radius: 8px;
 -ms-border-radius: 8px;
 border-radius: 8px;
}

/** Modal End **/

In my opinion the code looks exactly like the original code
Since we don't like the arrangement and the box is somehow too small (incorrectly proportioned), we would like to have the "original" Quick Login Box.
My question: How can I solve this problem?

[Alexander L.]

Hello,

I'm not going to give you a tutorial on how to do this. However, I am going to give you a quick tip that you can use all the time.
Go to your desired page, press F12 and you will get the inspect element tool.
Press this little thing:

Now click on the part of the login box you want to change, on the right side of the inspect element tool it shows CSS and in which file it is.
All you have to do now is go over to your ACP -> themes -> your theme -> find the file and change the colour.