Topic: Como puedo poner el login asi?

January 23, 2013 - 12:38 12:38

Como puedo poner el login asi?

Datos importantes:
Url del foro: http://comunidad.fearbooks.net
Version de SMF: 2.0.3
Theme del foro: losox

Descripcion del problema:
Hola amigos, nose si hay algun mod para esto lo busque y no lo encontre pero me gustaria poner el login de esta manera...hay chance? estaria bueno xD

**Reply #1** January 23, 2013 - 01:55 13:55

Hola,

¿te las arreglas un poco con html y css? Porque es tan sencillo con css poniendo:

.cuadro-login{
position: fixed;
}

Y en el Index.template.php pones algo como esto:

<div class="cuadro-login">Mi cuadro de login aqui</div>

**Reply #2** January 23, 2013 - 02:09 14:09

Quote from: manix on January 23, 2013 - 01:55 13:55

Hola,

¿te las arreglas un poco con html y css? Porque es tan sencillo con css poniendo:

.cuadro-login{
position: fixed;
}

Y en el Index.template.php pones algo como esto:

<div class="cuadro-login">Mi cuadro de login aqui</div>

SII lo voy a intentar, me gustaria tener un poco de ayuda porq no soy experto xD css nose casi nada en html me manejo mejor.. pero habria alguna manera de poder ayudarme? esto podria ser un proyecto de un futuro mod

la verdad el estilo esta bueno es mas interactivo

**Reply #3** January 23, 2013 - 02:25 14:25

Te hice la consulta, pero si no sabes está bien. Un poco mas descriptiva sería que agregaras el siguiente código al archivo index.css que se encuentra ubicado en la carpeta /foro/Themes/el-tema-que-usas/css/

.cuadro-login{
position: fixed;
right: 100px;
top: 20px;
}

Ahora bien, en el archivo Index.template.php que se encuentra ubicado en la carpeta /foro/Themes/el-tema-que-usas/ debes editarlo para que puedas buscar lo siguiente:

<body>

Y reemplazarlo por:

<body><div class="cuadro-login">Mi cuadro de login aqui</div>

Verás que las letras "Mi cuadro de login" darán el mismo efecto que buscas. Inténtalo, y si te va bien te explico como siguen las cosas.

**Reply #4** January 23, 2013 - 02:47 14:47

Quote from: manix on January 23, 2013 - 02:25 14:25

Te hice la consulta, pero si no sabes está bien. Un poco mas descriptiva sería que agregaras el siguiente código al archivo index.css que se encuentra ubicado en la carpeta /foro/Themes/el-tema-que-usas/css/

.cuadro-login{
position: fixed;
right: 100px;
top: 20px;
}

Ahora bien, en el archivo Index.template.php que se encuentra ubicado en la carpeta /foro/Themes/el-tema-que-usas/ debes editarlo para que puedas buscar lo siguiente:

<body>

Y reemplazarlo por:

<body><div class="cuadro-login">Mi cuadro de login aqui</div>

Verás que las letras "Mi cuadro de login" darán el mismo efecto que buscas. Inténtalo, y si te va bien te explico como siguen las cosas.

Me salio todo loq me dijiste amigo, lo puedes ver en mi pagina de "prueba" aca edito las cosas antes de implementar en mi web oficial
http://prueba.fearbooks.net esta arriba a la derecha de la pantalla casi no se ve pero si esta xD

**Reply #5** January 23, 2013 - 02:56 14:56

Excelente.

Ahora debes sustituir el texto "Mi cuadro de login aqui" por el siguiente fragmento de código que te creará un formulario.

<div class="cuadro-login">
<form accept-charset="UTF-8" method="post" action="http://prueba.fearbooks.net/index.php?action=login2">
            <table align="center">
               <tbody><tr>
                  <td><label>Usuario:</label> </td>

                  <td><input type="text" value="" size="9" name="user" id="sp_user"></td>
               </tr><tr>
                  <td><label>Contraseña:</label> </td>

                  <td><input type="password" size="9" id="sp_passwrd" name="passwrd"></td>
               </tr><tr>
                  <td>
                     <select name="cookielength">
                        <option value="60">1 Hora</option>
                        <option value="1440">1 Día</option>
                        <option value="10080">1 Semana</option>
                        <option value="43200">1 Mes</option>
                        <option selected="selected" value="-1">Siempre</option>
                     </select>
                  </td>
                  <td><input type="submit" value="Ingresar"></td>
               </tr>
            </tbody></table>
         </form>
</div>

**Reply #6** January 23, 2013 - 03:12 15:12

Quote from: manix on January 23, 2013 - 02:56 14:56

Excelente.

Ahora debes sustituir el texto "Mi cuadro de login aqui" por el siguiente fragmento de código que te creará un formulario.

<div class="cuadro-login">
<form accept-charset="UTF-8" method="post" action="http://prueba.fearbooks.net/index.php?action=login2">
            <table align="center">
               <tbody><tr>
                  <td><label>Usuario:</label> </td>

                  <td><input type="text" value="" size="9" name="user" id="sp_user"></td>
               </tr><tr>
                  <td><label>Contraseña:</label> </td>

                  <td><input type="password" size="9" id="sp_passwrd" name="passwrd"></td>
               </tr><tr>
                  <td>
                     <select name="cookielength">
                        <option value="60">1 Hora</option>
                        <option value="1440">1 Día</option>
                        <option value="10080">1 Semana</option>
                        <option value="43200">1 Mes</option>
                        <option selected="selected" value="-1">Siempre</option>
                     </select>
                  </td>
                  <td><input type="submit" value="Ingresar"></td>
               </tr>
            </tbody></table>
         </form>
</div>

Exelente amigooo muchas graciass ! ahora lo ultimo donde debo editar para ponerlo como en la foto, con ese fondo y para ponerlo mas abajo =)

**Reply #7** January 23, 2013 - 03:16 15:16

Code: [Select]

action="http://prueba.fearbooks.net/index.php?action=login2">
podria ser:

Code: [Select]

action="', $scripturl, '?action=login2">
y de esa manera funcionaria en cualquier foro

**Reply #8** January 23, 2013 - 03:26 15:26

Gracias 4Kstore, también hace falta el condicional para que solo los visitantes puedan ver el recuadro. No recuerdo el código de memoria.

En cuanto al fondo del recuadro, todo acerca del diseño lo debes de hacer en el css, por ejemplo, acá de muestro como poner las letras blancas y el fondo negro de tu recuadro:

.cuadro-login{
background: #000000; /* color del fondo*/
color: #ffffff; /* color del texto*/
position: fixed;
right: 100px; /* la distancia del lado derecho de la pantalla */
top: 20px; /* la distancia entre el tope de la pantalla y el cuadro, si lo quieres mas abajo ponle 200px */
}

En google solo busca ejemplos de diseño en css para que vayas agregando más propiedades a tu gusto.

**Reply #9** January 23, 2013 - 03:31 15:31

Este seria el condicional: if(!empty($context['is_guest']))

Se podría usar $user_info pero no esta globalizada en la función esa, saludos!

**Reply #10** January 23, 2013 - 05:57 17:57

hice caso y busque en google algunos diseños, encontre esto http://www.mediafire.com/?40tlcc3bbz5ggl como podria adaptarlo a mi sitio?(Solo la seccion de login)

**Reply #11** January 23, 2013 - 06:08 18:08

Muy bueno.. voy a implementarlo apenas pueda y tenga un poquito de tiempo. Manix un Groxo.. Saludos

Enviado desde mi GT-I9300 usando Tapatalk 2

**Reply #12** January 23, 2013 - 06:14 18:14

Quote from: fearbooks987 on January 23, 2013 - 05:57 17:57

hice caso y busque en google algunos diseños, encontre esto http://www.mediafire.com/?40tlcc3bbz5ggml como podria adaptarlo a mi sitio?(Solo la seccion de login)

Todo lo que quieres hacer se hace en el css, no hay mas: es tan solo pura imaginación, jugar con colores. Inténtalo, con mucho gusto te echo la mano con cosas específicas que no comprendas. Y una cosa más, no te recomiendo usar MPs (mensajes privados) para hacer consultas, es que cuesta mucho de esa manera y bien con mucha generosidad te podemos ayudar acá.

Quote from: rogerscrack on January 23, 2013 - 06:08 18:08

Muy bueno.. voy a implementarlo apenas pueda y tenga un poquito de tiempo. Manix un Groxo.. Saludos

Enviado desde mi GT-I9300 usando Tapatalk 2

Siempre eres bienvenido amigo! :-)

**Reply #13** January 23, 2013 - 06:20 18:20

Quote from: manix on January 23, 2013 - 06:14 18:14

Quote from: fearbooks987 on January 23, 2013 - 05:57 17:57
hice caso y busque en google algunos diseños, encontre esto http://www.mediafire.com/?40tlcc3bbz5ggml como podria adaptarlo a mi sitio?(Solo la seccion de login)

Todo lo que quieres hacer se hace en el css, no hay mas: es tan solo pura imaginación, jugar con colores. Inténtalo, con mucho gusto te echo la mano con cosas específicas que no comprendas. Y una cosa más, no te recomiendo usar MPs (mensajes privados) para hacer consultas, es que cuesta mucho de esa manera y bien con mucha generosidad te podemos ayudar acá.

Quote from: rogerscrack on January 23, 2013 - 06:08 18:08
Muy bueno.. voy a implementarlo apenas pueda y tenga un poquito de tiempo. Manix un Groxo.. Saludos

Enviado desde mi GT-I9300 usando Tapatalk 2

Siempre eres bienvenido amigo! :-)

Entiendo amigo, mi problema es como hacer que se adapte las imagenes, si te fijas en el archivo que te deje ahi podras ver que trae los codigo css, pero nose como adaptar ese codigo al theme o en su defecto nose como adaptar imagenes al codigo que me brindaste =)
te adjunto el archivo.

**Reply #14** January 23, 2013 - 06:29 18:29

Pon lo siguiente al final del archivo index.css:

Code: [Select]

.main { width:400px; height:250px; position:absolute; top:50%; left:50%; margin-top:-125px; margin-left:-200px;}
.box { width:370px; overflow:hidden; padding:15px; background:#fff; border:1px solid #d5d5d5; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 0 0 20px rgba(3,44,52,.22); -moz-box-shadow: 0 0 20px rgba(3,44,52,.22); -webkit-box-shadow: 0 0 20px rgba(3,44,52,.22);}
.box h2 { color:#292929; font-size:25px; margin:0; padding:0 0 10px 0; font-weight:bold; outline:none;}
.box h3 { color:#7f7f7f; font-size:17px; line-height:20px; margin:0; padding:0; font-weight:normal; outline:none;}

.form { margin:0; padding:0;}
.form fieldset { border:none; padding: 10px 0 0; margin:0;}
.form .row { margin-bottom:6px; position:relative; line-height:33px;}

.form .row input[type="text"], .form .row input[type="password"] { height:33px; line-height:33px; border:1px solid #c5c5c5; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset; -moz-box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 0 5px rgba(0,0,0,.1), 0 2px 2px rgba(0,0,0,.1) inset;}
.form .row input[type="text"]:focus, .form .row input[type="text"]:hover, .form .row input[type="password"]:focus, .form .row input[type="password"]:hover { border:1px solid #b8d564; box-shadow: 0 0 5px #b8d564, 0 2px 2px rgba(0,0,0,.1) inset; -moz-box-shadow: 0 0 5px #b8d564, 0 2px 2px rgba(0,0,0,.1) inset; -webkit-box-shadow: 0 0 5px #b8d564, 0 2px 2px rgba(0,0,0,.1) inset;}
.form .row input.login { background:url(../images/input_login.png) left center no-repeat #f5f5f5; width:100%; padding: 1px 5px 1px 45px;}
.form .row input.password { background:url(../images/input_password.png) left center no-repeat #f5f5f5; padding: 1px 130px 1px 45px; }
.form .row input.error { border:1px solid #eb9393; box-shadow: 0 0 5px #f7c4c4; -moz-box-shadow: 0 0 5px #f7c4c4; -webkit-box-shadow: 0 0 5px #f7c4c4; background-color:#fce4e4; }

.form .row a.forgot { position:absolute; top:2px; right:10px; color:#909090; font-size:12px; text-shadow:1px 1px 1px #fff;}
.form .row a.forgot:hover { color:#6e6e6e;}
.form .row input[type="checkbox"] { display:block; float:left; margin: 9px 6px 9px 2px; }
.form .row label { color:#086f86; font-size:14px; display:block; float:left; }
.form .row input[type="submit"] { cursor:pointer; color:#1c464e; text-shadow:1px 1px 0 #aaeaf7; border:1px solid #289cb8; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; background:#67bbcf; background: -webkit-gradient(linear, bottom, top, from(#67bbcf), to(#82def1)); background: -moz-linear-gradient(bottom,  #67bbcf,  #82def1); font-size:16px; padding:5px 20px; font-weight:bold; float:right;}
.form .row input[type="submit"]:hover { background:#51b1c7; background: -webkit-gradient(linear, bottom, top, from(#4297ab), to(#60cce3)); background: -moz-linear-gradient(bottom, #4297ab, #60cce3);}

.copy { float:right; color:#9eabae; font-size:12px; margin:10px 16px 0 0; text-shadow:1px 1px 1px #fff;}

Luego, sube todas las imagenes que vienen allí en /images dejándolas en el siguiente directorio: /foro/Themes/el-tema-que-usas/images/
Por último, busca en el Index.template.php la parte de <body> para que inmediatamente después de ello agregues:

Code: [Select]

<div class="main">
		<div class="box">
			<h2>Ingreso de cuenta</h2>
			<h3><a href="./register.php">Regístrate</a> o ingresa tu usuario y contrase&ntilde;a</h3>
			
			<form class="form" action="validar.php" method="post">
				<fieldset>
					<div class="row">
						<input type="text" class="login" name="nick" placeholder="Usuario" />
					</div>
					<div class="row">
						<input type="password" class="password" name="password" placeholder="Password"/>
						<a class="forgot" href="#">Olvide mi password</a>
					</div>	
					<div class="row">
			<input type="checkbox" class="remember" name="remember" id="remember"  />
						<label for="remember">Mantenerme logeado</label>
						<input type="submit" value="Ingresar" name="Ingresar"/>
					</div>
				</fieldset>
			</form>		
		</div>
		<span class="copy">Copyright &copy; 2012  iNews System</span>	</div>

Como puedo poner el login asi?