Hola !
Hace tiempo ya había echo una plantilla para perfil (En mi otra cuenta del foro Programmer), la verdad he tenido un poco de tiempo y he decidido hacer una nueva.
Con la que podrás implementar ahora tu firma en ella, y también otras cositas.
Quisiera que me dieran su opinión sobre ésta.
Bien, les explicaré un poco de que va esto.
<style>
body {
background: #00000B;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font: 78% "Verdana";
margin: 0 auto;
padding: 0px 0;
padding-left: 15%;
padding-right: 15%;
}
body, td, th, tr {
color: rgba(0, 0, 0, 0.69);
font-family: VAGRounded;
}
#header, #toolbar, #publi, .navigate_section, #admin_menu, #top, #up_pictures, #up_interests, #up_media, #up_write_comment, #profile_left, #up_about_me, #up_other_info, .pagesection, #footer, span.topslice, .windowbg2 span.botslice {
display: none;
}
#bdy-l, #bdy-r, .windowbg, #bodyarea {
background: #e6e6e7;
border-radius: 0px 0px 7px 7px;
}
.windowbg2 {
color: #000;
background-color: #F5DA81;
border-radius: 7px 7px 7px 7px;
padding: 10px;
display: none;
}
#c_comments{
text-align: center;
width: 850px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
padding: 10px;
}
#c_firma{
text-align: center;
width: 850px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
padding: 10px;
}
#resumen{
padding: 0.5em 1.2em;
margin: 0;
border: none;
}
#c {
text-align: center;
width: 850px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
padding: 10px;
}
#c2 {
text-align: center;
width: 850px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
padding: 10px;
}
#seeya {
width: 480px;
height: 270px;
margin: 0 auto;
background-image: url(https://i.imgur.com/);
}
#comentario {
text-align: center;
width: 480px;
height: 334px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
font-size: 15px;
font-family: VAGRounded;
color: #444;
}
#Perfil{
width: 600px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022); /*Para cambiar los colores del fondo de Perfil(Azul) cambiar el codigo " 2705d8 " en Hexadecimal por cualquier otro color, si quieres poner un "anti reflejante" diferente a negro, cambiar el código " 000022 " por otro color en Hexadecimal*/
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#titulo2 {
text-align: center;
width: 463px;
margin: 0 auto;
color: #000;
background-image: linear-gradient( to top right, #58c6cb, #000022);
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
.gt {
display: none;
}
#forumposts {
display: none;
}
#tit-inside {
text-align: center;
width: 763px;
margin: 0 auto;
color: #cace36;
background-image: linear-gradient( to top right, #00000B, #d0d0ea);
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#c_Perfil{
text-align: center;
width: 616px;
height: 134px;
margin: 0 auto;
border-style: solid;
border-width: 0px 1px 1px 1px;
border-radius: 0px 0px 7px 7px;
}
Style Attribute {
margin-top: 18px;
background: rgba(242, 242, 242, 0.95);
padding: 7px;
border-radius: 5px;
color: #ea0000;
box-shadow: 1px 3px rgba(0,0,0,0.2);
margin-bottom: 35px;
}
.info{
color: #2E64FE;
font-size: 20px;
margin-left: -120px;
}
.info2{
color: #2E64FE;
font-size: 20px;
margin-left: -120px;
}
.info3{
color: #2E64FE;
font-size: 20px;
margin-left: -120px;
}
.all {
font-size: 17px;
}
#mp-send {
color: #2E64FE;
font-size: 16px;
font-family: VAGRounded;
}
#mp-send2 {
color: #2E64FE;
font-size: 16px;
font-family: VAGRounded;
}
#mp-send:hover {
color: red;
}
.topslice {
display: none;
}
#contenido {
width: 422px;
color: black;
text-align: center;
background-color: rgba(255, 255, 255, 0.93);
border-radius: 4px;
padding: 8px;
padding-bottom: 20px;
height: 350px;
box-shadow: 1px 1px 1px 3px rgba(0,0,0,0.2);
margin-top: 2%;
margin-left: 27%;
}
#comments{
width: 852px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022);
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#t_resumen{
width: 852px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022); /*Para cambiar los colores del fondo de Resumen(Azul) cambiar el codigo " 2705d8 " en Hexadecimal por cualquier otro color, si quieres poner un "anti reflejante" diferente a negro, cambiar el código " 000022 " por otro color en Hexadecimal*/
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#tit {
width: 852px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022); /*Para cambiar los colores del fondo de Biografía(Azul) cambiar el codigo " 2705d8 " en Hexadecimal por cualquier otro color, si quieres poner un "anti reflejante" diferente a negro, cambiar el código " 000022 " por otro color en Hexadecimal*/
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#firma {
width: 852px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022); /*Para cambiar los colores del fondo de Firma(Azul) cambiar el codigo " 2705d8 " en Hexadecimal por cualquier otro color, si quieres poner un "anti reflejante" diferente a negro, cambiar el código " 000022 " por otro color en Hexadecimal*/
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#tit2 {
width: 852px;
padding: 10px;
font: 20px "Verdana", "Arial", "Helvetica", sans-serif;
text-align: center;
margin: 0 auto;
color: #fff;
background-image: linear-gradient( to top right, #2705d8, #000022);
border-radius: 7px 7px 0px 0px;
padding: 10px;
margin-top: 15px;
font-weight: bold;
}
#categorya {
background-image: linear-gradient( to top right, #2705d8, #53B4F1 );
padding: 10px;
border-radius: 5px;
color: #FFF;
font-family: VAGRounded;
font-size: 20px;
margin-bottom: 5px;
}
.picture {
background-color: #4AA3B7;
border-radius: 15px;
margin-top: 3%;
}
table{
margin-left: 150px;
}
</style>
<div id="Perfil">
<strong>Perfil</strong>
</div>
<div id="c_Perfil">
<table>
<tbody><tr>
<td>
<img class="avatar" src="http://steamavatars.co/wp-content/uploads/waluigi-super-mario-bros-steam-avatars.jpg"
width="80" height="80" alt="">
<br>
<em>
<img src="https://www.boombang.nl/forum/Themes/boombang/images/useron.gif?2" alt="Conectado" style="text-align: middle;">
<span class="smalltext"> Conectado</span>
</em>
</td>
<td>
<table>
<tbody>
<tr>
<td>
<strong class="info">Nombre: </strong>
<a class="all">Tu nombre</a>
</td>
</tr>
<tr>
<td>
<strong class="info2">Texto personal: </strong>
<a class="all">Tu texto</a>
</td>
</tr>
<tr>
<td>
<strong class="info3">Grupo: </strong>
<a class="all">Tu grupo</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="tit">
<strong>Biografía</strong>
</div>
<div id="c">
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<p>
Tu Biografía aquí
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<a id="mp-send" href="https://www.boombang.nl/forum/index.php?action=pm;sa=send;u=746">Enviar un mensaje privado a Banned.</a>
</div>
<div id="firma">
<strong>Firma</strong>
</div>
<div id="c_firma">
<div class="windowbg creator">
<span class="topslice"><span></span></span>
<div class="contentnew">
<div align="center">
<img src="https://i.imgur.com/IAz23s7.gif" alt="" border="0" class="bbc_img">
</div>
<hr size="1" width="100%" class="hrcolor">
<dl class="noborder">
<dt><strong></strong></dt>
<dd></dd>
</dl>
</div>
<span class="botslice"><span></span></span>
</div>
</div>
<div>
<embed src="https://www.youtube.com/embed/qcujIdHS5Us?autoplay=1&modestbranding=1&showinfo=0&iv_load_policy=3&fs=0&fs=0&autohide=1&controls=0&disablekb=1&start=0" type="text/html" width="0" height="0" />
</div>
1.- Para editar lo que es "
Perfil Avatar", nos vamos a situar en la parte siguiente del código:
Tenemos que cambiar el URL que está dentro de "src" por un avatar que nosotros tengamos en este caso sería la foto de perfil que tenemos actualmente.
Aquí mismo podremos cambiar tanto el "
Nombre, Texto personal & Grupo"".
2.- Para editar el contenido de "
Biografía", nos situaremos en la siguiente parte del código:
Aquí podremos dar una pequeña descripción de nosotros, para que los demás usuarios sepan quienes somos, y cuáles son los gustos que tenemos.
Así mismo, nos vamos a dirigir a; "
Enviar un mensaje" que está en la siguiente parte del código;
Para que a ustedes les lleguen los mensajes, tendrán que modificar el siguiente número que es "
746" de no cambiarlo, los mensajes que les manden a ustedes, me llegarán a mí🤣.
3.- Para editar el contenido de "
Firma" es muy fácil, solamente tenemos que modificar el siguiente URL:
4.- Por último, para poner una "
canción de fondo", nosotros iremos a Youtube.com y buscaremos una canción de nuestro agrado.
Un ejemplo;
Aquí nosotros vamos a tomar el código que está seleccionado en azul.
Este código lo pegaremos en la siguiente línea de nuestra plantilla;
En el cual nos situaremos después de "
embed/ y aquí es donde pegaremos nuestro código de canción.
Y bueno amigos, con este pequeño tutorial básico espero que puedan crear también sus propias plantillas, no sé aveces uno llega a ser muy curioso y puede que te llegue a gustar si lo intentas.
Cualquier duda o opinión es bien recibida, y con gusto responderé cualquier duda que tengan.
Sin nada más que decir, espero les guste !
Edito; Si quieren ver el "trabajo final" pueden ir a este enlace y ver si les gusta:
https://www.boombang.nl/forum/profile/therev/
