[TUTORIAL] Plantilla para perfil

26 Feb 2018#1

Hola muy buenas !
El día de ayer, publiqué mi plantilla y quise saber sobre críticas y demás, bien; por que algunos usuarios me lo han pedido y tal, hago público el código de ésta, por si alguien gusta modificarlo o simplemente usarlo como ya está.
Todo el código está comentado, y creo que es fácil de entender, así mismo doy páginas de donde buscar colores y esas cosas.
Si alguien tiene alguna duda o algo de como modificar una cosa, mandarme MP y lo atiendo con todo gusto.
Sin nada más que decir aquí dejo el código:

Paso 1: Copiar el código.

<style>
#publi, .navigate_section, #menu_toggle, #profile_right, #up_user_info, #up_contact, #up_buddies, #up_write_comment, #up_write_comment, .windowbg2, .pagesection, .windowbg2, .pagesection {
display: none;
}
.contentnew {
text-align: center;
}

.contentnew td img{
    width: 130px;
    height: 130px;
}
.windowbg, #preview_body {
    color: #000;
    background-color: rgba(241, 241, 241, 0);
}
.windowbg, #preview_body {
    border-radius: 10px;
}
.contentnew td em{
    display: none;
}
Style Attribute {
    margin-top: 18px;
    background: rgba(242, 242, 242, 0.95);
    padding: 7px;
    border-radius: 5px;
    color: #18a7d4;
    box-shadow: 1px 3px rgba(0,0,0,0.2);
    margin-bottom: 35px;
}
.div1, .div2{
    display: none;
}
blockquote.bbc_standard_quote {
    background-color: #f1f1f100;
}
blockquote.bbc_standard_quote, blockquote.bbc_alternate_quote {
    font-size: xx-small;
    color: #2a4bab;
    line-height: 1.4em;
    border-top: 2px solid #42b8c5;
    border-bottom: 2px solid #42b8c5;
}
table #up_summary{
    display: none;
}

/*Cosas que solamente debes modificar*/


::-webkit-scrollbar-thumb {
    background-color: rgb(0, 199, 255); /*Color en colores RGB puedes cambiar tu color del scrollbar (línea para bajar o subir) a tu gusto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
    border-radius: 14px;
}
::-webkit-scrollbar {
    width: 11px;
    background-color: rgba(0, 0, 0, 0); /*Color en colores RGB puedes cambiar tu color del fondo scrollbar a tu gusto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
    border-radius: 14px;
}
.gt {
    background-image: linear-gradient( to top right, #4a92b1, #dbebf1); /*Color en colores RGB puedes cambiar tu color del fondo título a tu gusto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
    padding: 6px;
    text-align: center;
    border-radius: 10px;
    color: #000000; /*Color del texto título por defecto en color negro*/
    font-family: unset;
    font-size: 25px;
    margin-bottom: -20px;
}
.bbc_img {
    width: 300px; /*Aquí modificas la anchura de tu firma*/
    height: 140px; /*Aquí modificas la altura de tu firma*/
    margin-bottom: 15px;
    margin-right: -50px;
}
.texto {
    font-weight: bold;
    font-size: 17px;
    color: rgb(0, 0, 0); /*Color en colores RGB puedes cambiar tu color a tu gusto del texto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
}
#mensaje {
    margin-top: 16px;
    color: #000000; /*Color del texto mensaje privado por defecto en color negro*/
}
.content{
    background: rgba(242, 242, 242, 0); /*Color de fondo, por defecto en color gris claro, para hacerlo transparente puedes usar el siguiente código: rgba(242, 242, 242, 0); también puedes cambiar tu color a tu gusto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
    box-shadow: 1px 3px rgba(0, 0, 0, 0); /*Línea borde contenedor por defecto color transparente también puedes cambiar tu color a tu gusto aquí en cualquiera de estas páginas: https://www.w3schools.com/colors/colors_picker.asp  <-> https://www.w3schools.com/colors/colors_rgb.asp*/
}
body{
     /*background: url() no-repeat center center fixed;*/ 
     /*Aquí puedes poner un fondo para tu perfil, por defecto está comentado, solamente borra el diagonal y asterisco solamente " background: url() no-repeat center center fixed; "*/
}

</style>


<div id="up_summary">
        <div class="category gt"><i class="fa fa-user-circle"></i>  Usuario ~ Profesional</div> <!-- Aquí cambias el nombre por el tuyo y así mismo el grupo del que perteneces (después de editarlo, borras este comentario) -->
            <div class="windowbg creator">
                <div class="contentnew">
                 <img class="avatar" src="https://www.boombang.nl/gallery/avatar/keko.php?personid=3&amp;color1=TmpBMk1qWTI=&amp;color2=TURBd01EQXc=&amp;color3=UmtaR1JqQXc=&amp;color4=UmpKR04wWkc=&amp;color5=UmpKR04wWkc=" width="150" height="150" alt="" style=""><br> <!-- Aquí cambias el url que está en SRC por el avatar tuyo (después de editarlo, borras este comentario) -->
                            <em><img src="https://www.boombang.nl/forum/Themes/boombang/images/useroff.gif?0" alt="" style="">    <span class="smalltext" style=""> Desconectado</span></em>
                            <br><br>
                            <div id="messageText">
                                <span class="texto">Hola !</span> <!-- Aquí pones el texto de presentación que quieras (después de editarlo, borras este comentario) -->
                                <br><br>
                            </div>
                           <div id="privateMessage">
                                 <a id="mensaje" href="https://www.boombang.nl/forum/pm/?sa=send;u=8671">Enviar un mensaje privado a este Usuario.</a> <!-- Aquí cambias el ID 8671 por el tuyo, que sino me llegarán los mensajes a mí >.< (después de editarlo, borras este comentario) -->
                           </div>
                </div>
            </div>
        </div>

<div class="contentnew">
     <div class="signature" style="">
        <div style="margin-top: 20px;">
            <img src="https://i.imgur.com/WSH6CbS.png" alt="" border="0" class="bbc_img"><br> <!-- Aquí va tu firma, (después de editarlo, borras este comentario) -->
            <blockquote class="bbc_standard_quote">«Todos somos muy ignorantes, lo que ocurre es que no todos ignoramos las mismas cosas»</blockquote> <!-- Aquí va una frase que quieras agregar      (después de editarlo, borras este comentario) -->
        </div>
    </div>
</div>

Paso 2: Ya copiado el CODIGO HTML dirígete CUSTOMITAZTION pega el código y guarda tu configuración, ya despues solo vas a tu perfil para ver el resultado.

Spoiler

Espero realmente les guste, dentro de poco haré pública otra plantilla un poco más básica y sencilla que es a petición de @Wilfre , por tiempo y demás cosas, me es imposible el publicarla ahora mismo, para mañana la hago pública.

El resultado final sería el siguiente:

Igualmente pueden verlo entrando a mi perfil.

Edito: He utilizado imágenes del Post de @!--cpp---! el cual puedes ver dando click https://www.boombang.nl/forum/guias-y-tutoriales/(tutorial)-~-modifica-el-cursor-de-tu-super-perfil-~/ con el fin de hacer el tutorial un poco más fácil de entender y que debes hacer.