[GESIOR] Create a "themebox login"

[Sleet]

Hello guys, I would like to make a login themebox.

The player enters the account name and password in it and he logins, the only difference being that he does that on a "themebox".

It should be pretty much like this:

It doesn't have to be fancy, I can do the design if necessary.

Thanks in advance!

 

[Unknown Soldier]

Try to play around with this

<form action="?subtopic=accountmanagement" method="post">
                        <span>Account:</span>
                            <input name="account_login" maxlength="30" type="password" class="field">
                        <span>Password:</span>
                            <input name="password_login" maxlength="50" type="password" class="field">

                        <input type="submit" class="button-login" value="">
                    </form>

if you want to add this in left menu, then just put code from above under any submenu link

if you want some artworks, then try this, just use your graphic elements:

        <div class="panel-right">
            <div class="login-box">
                <div class="top">
                    <div class="artwork-left" style="background: url('<?PHP echo $layout_name; ?>/images/login-artwork.gif') no-repeat;"></div>
                    <div class="artwork-right" style="background: url('<?PHP echo $layout_name; ?>/images/login-artwork.gif') no-repeat;"></div>
                </div>
                <div class="mid">
                    <form action="?subtopic=accountmanagement" method="post">
                        <span>Account:</span>
                            <input name="account_login" maxlength="30" type="password" class="field">
                        <span>Password:</span>
                            <input name="password_login" maxlength="50" type="password" class="field">

                        <input type="submit" class="button-login" value="">
                    </form>
                </div>
                <div class="bot"></div>
            </div>

 

[Sleet]

Try to play around with this

<form action="?subtopic=accountmanagement" method="post">
                        <span>Account:</span>
                            <input name="account_login" maxlength="30" type="password" class="field">
                        <span>Password:</span>
                            <input name="password_login" maxlength="50" type="password" class="field">

                        <input type="submit" class="button-login" value="">
                    </form>

if you want to add this in left menu, then just put code from above under any submenu link

if you want some artworks, then try this, just use your graphic elements:

        <div class="panel-right">
            <div class="login-box">
                <div class="top">
                    <div class="artwork-left" style="background: url('<?PHP echo $layout_name; ?>/images/login-artwork.gif') no-repeat;"></div>
                    <div class="artwork-right" style="background: url('<?PHP echo $layout_name; ?>/images/login-artwork.gif') no-repeat;"></div>
                </div>
                <div class="mid">
                    <form action="?subtopic=accountmanagement" method="post">
                        <span>Account:</span>
                            <input name="account_login" maxlength="30" type="password" class="field">
                        <span>Password:</span>
                            <input name="password_login" maxlength="50" type="password" class="field">

                        <input type="submit" class="button-login" value="">
                    </form>
                </div>
                <div class="bot"></div>
            </div>

I got it to work on my website, if the player enters the account name and password it will login, but I have three problems:

First one is that the login button, the account name and the password inputs are too far right, I'd like to center them. Here's the example:

And also, can I change the white color of the input toa blue-ish one?
And I'd also like to change the color and size of the letters, how to do that?

(Please ignore the Highscores background, it is just a test.)

EDIT:

I fixed the first problem by adding <center></center> to the lines, now I found out that the login button doesn't have "Login" written in it. How can I make the login button an image?

 

[Unknown Soldier]

You can also set a name to the button, type it in value

<input type="submit" class="button-login" value="Button name">

about the image/color or another fancy decorations... you should use style.css file. I am not sure if it will help, but edit your css file and add this (edit it whatever you like)

.button-login
        {
            display: block;
            width: 90px;
            height: 20px;
            margin-right: 1px;
            margin-top: 1px;
            cursor: pointer;
            background: url('images/Login-Box-Button-Login.png') no-repeat;
        }

I am not an expert, but it works more or less like this


@edit
Sorry, I have not noticed that you have mentioned a box where you enter your account data... You will need something like this

.field
        {
            display: block;
            width: 138px;
            height: 22px;
            border: 0px;
            color: #4f6e99;
            margin: auto;
            background: url('images/Login-Box-Input.png') no-repeat;
            font-size: 9px;
            padding-left: 5px;
            padding-right: 5px;
        }

you can set "background" to image (like above) or just select a color background: blue; or background: #4f6e99;

have fun ;p

 

[Sleet]

Thank you very much!

 

[sampleizsample]

thanks

 

[Sleet]

Oh, I forgot one more thing, is it possible to make a button that makes the player go to his management page instead of having the account name and password inputs there when he is logged on?

@edit:

Nevermind, did that myself:

<div id="Loginbox" class="Themebox">
    <div class="loginbox" style="background:url(<?PHP echo $layout_name; ?>/images/themeboxes/loginbox.png)" align="    ">
            <?PHP
            if($logged){
            ?>
            <form action="?subtopic=accountmanagement" method="post">
                        <br>
                        <br>
                        <br>
                        <center><input type="button" value="Gerenciar conta" class="homebutton" id="btnHome" onClick="document.location.href='?subtopic=accountmanagement'" /></center>
            </form>
            <?php } else { ?>
            <form action="?subtopic=accountmanagement" method="post">
                        <center><br><span style="font-size: 11px;">Conta:</span> <br></center>
                            <center><input name="account_login" size="20" maxlength="30" type="password" class="field"></center>
                        <center><span style="font-size: 11px;">Senha:</span> <br></center>
                            <center><input name="password_login" maxlength="50" type="password" class="field"></center>
                        <center><input type="submit" class="button-login" value="Login"></center>
            </form>
            <?php } ?>
           
</div>   
</div>