[Tutorial] Como editar tu plantilla HTML/CSS

  1. #1



    Hola ternuras estaba editando mi super perfil y se que a muchos les gustaria editar el suyo pero no saben y tampoco cuentan con los creditos(sacos de oro) que cobran por editarles la plantilla HTML/CSS , asi que aca les dejo este pequeño tutorial de como editar tu plantilla html de la manera mas facil y disculpen por no usar un medio de grabación pues no tengo un programa para grabar y se me aria dificil subirlo y publicarlo después porque tampoco tengo internet, pero mientras espero que las imagenes les ayuden.

    Por otra, si no tienes un super perfil y no sabes como activarlo descuida dale click en el siguiente enlace que te dejare abajo, el cual te llevara a mi tutorial anterior que te ayudaran a entender que es un SUPER PERFIL y como activarlo.


    https://www.boombang.nl/forum/guias-y-tutoriales/t19002/







    Para ir aprendiendo a modificar una plantilla HTML/CSS usaremos la plantilla que tengo en uso de mi SUPER PERFIL que es la siguiente:

    Para copiar la plantilla dale click donde dice SELECCIONAR y con la segunda tecla del mouse le das COPIAR y la pegas ya en tu BLOC de NOTAS o en WORD como prefieras para que sea mucho mas facil la edicion de esta.



    <style>
    body{
    background-image: url(https://i.imgur.com/ipwnAsf.png);
    background no-repeat center fixed;
    }

    #up_pictures , #up_other_info, #publi, hr, .navigate_section ul, .cat_bar, .catbg {
    display: none;
    }

    div.content
    {
    all: unset;
    padding: 0px !important;
    color: #11486E;
    }

    #profile_right, #profile_left{
    width: 0.6%;
    }

    #profile_left{
    padding-right: 4px;
    padding-left: 155px;
    }

    #profile_right{
    padding-left: 4px;
    padding-right: 155px;
    }

    body, td, th, tr {
    color: #11486E;
    font-family: VAGRounded;
    }

    .windowbg, #preview_body {
    color: #11486E;
    background-color: rgba(255, 255, 255, 0.6);
    }

    .poster h4, .poster h4 a {
    color: #11486E;
    }

    h1, h2, h3, h4, h5, h6 {
    color: #11486E;
    font-size: 1em;
    margin: 0;
    padding: 0;
    }

    a:visited {
    color: #11486E;
    text-decoration: none;
    }

    a:link {
    text-decoration: none;
    color: #11486E;
    }

    .gt {
    background-image: linear-gradient( to top right, #AB0849, #AB0849);
    padding: 10px;
    border-radius: 5px;
    COLOR: #FFF;
    font-family: VAGRounded;
    font-size: 25px;
    margin-bottom: 7px;
    }

    div#forumposts{
    padding-left: 155px;
    padding-right: 170px;
    }

    div#up_write_comment{
    padding-right: 170px;
    padding-left: 155px;
    }

    </style>



    Spoiler
    FONDO (background)
    Como su nombre lo indica es la imagen que se encuentra a lo ultimo en tu super perfil. ejemplo:




    Para editarla solo tienes que buscar en google la imagen que te gustaria tener de fondo en tu SUPER PERFIL o bien si tienes conocimientos de photoshop u otro editor crea el fondo que sea de tu grado. Una vez elegido tu fondo lo subes a imgur y copias el link directo.



    Ya copiado el link directo de nuestro fondo subido a imgur, nos dirigimos al codigo HTML que estamos editando y en la parte superior donde dice BACKGROUND-IMAGE borramos el link que esta en los parentesis y pegamos el link directo que copiamos de nuestro fondo en imgur, es decir, reemplazamos el link de imgur ya existente en la plantilla HTML por el link directo de imgur del fondo que escogimos para nuestro SUPER PERFIL. Ejemplo:










    Spoiler
    COLORES DE LETRA(Resumen, Comentarios y otros):
    Los colores de letra son super facil de cambiar nada mas necesitamos el color en forma de codigo htlm/css los cuales podemos conseguir en paginas, sin embargo, les recomiendo la siguiente pagina que es la que uso para editar mis plantillas:


    https://htmlcolorcodes.com/es/

    Una vez ya ubicados en la pagina que le deje arriba bajamos al circulo o selector de color donde podemos elegir el color de nuestro agrado.

    Cuando selecciones el color de tu gusto, a mano derecha te saldra el codigo html/css del color elegido,lo seleccionas y con la segunda tecla del mouse solo lo copias y lo pegas en la plantilla html/css reemplazando el otro codigo que se encontraba en la plantilla. Ejemplo:



    Para cambiar el color de letra solo borra los 11486E y en el medio de los # ; pegas el codigo del color que te gusto. Ejemplo: antes--> #1148E; ELIMINA los numeros y letra y pega tu codigo en el medio ahora--->#016F78;




    Cabe destacar, que tienes que sustituir los SIETE codigos de COLOR: #11486E; que esta en la plantilla, por el que has copiado del selector de color para que asi logres cambiar el color de todas las letras desde la que describen el resumen hasta el color de las letras de comentarios. En la planilla hay un ultimo codigo de color el cual es COLOR: #FFF; este ultimo no tienes porque modificarlo.








    Spoiler
    BARRA
    Al igual que el paso anterior usaremos la pagina donde se encuentra el selector de color y escogeremos el color que mas nos guste y copiaremos el codigo html/css que se encuentra a mano derecha.




    Cabe destacar que la barra se puede editar de dos formas a tu gusto. Tales como:


    Color solido: Es cuando la barra se encuentra conformada por un solo codigo de color html/css. Ejemplo:



    Para hacer que sea una barra con un color solido copiamos el codigo html/css del selector de color y lo pegamos en ambos # sustituyendo el codigo de color que ya se encontraba en la plantilla html.





    Color degradado: Es cuando la barra se encuentra conformada por dos codigos de color html/css. Ejemplo:



    Para hacer que sea una barra en forma de degradado vamos al selector de color html/css y seleccionamos dos codigos de color distintos el cual uno pegaremos en el primer # y el otro codigo de color html/css diferente lo pegamos en el otro # sustituyendo los codigos de color que ya se encontraban en la plantilla html.









    Una vez seguido todos los pasos anteriores, seleccionaras toda tu plantilla html, es decir, copiaras toda tu plantilla html/css ya editada le das click con la segunda tecla del mouse y la copias



    Vas a MODIFICACIÓN DE PERFIL bajas y en ''PERSONALIZACIÓN o CUSTOMITAZTION'' es donde deberás pegar el código de la plantilla HTML Y CSS que has editado a tu gusto le das click en guardar perfil.

    Spoiler


    Y ya solo vas a resumen para ver como quedo tu super perfil

    Spoiler


    Ternuras, espero que este Tutorial de como Editar tu plantilla HTML/CSS les ayudara a entender como modificar su plantilla html/css de una manera facil y sencilla. Si aun no lograste entendero tienes dudas enviame un MP. Dale like al tema si te ayudo en algo 7w7r o comentame algo lindo en mi SUPER PERIL.

    https://www.boombang.nl/forum/profile/?u=6642


    Edited on 30 Jan 2019
  2. #2
    Estos tutoriales ayudan muchísimo a que cada usuario pueda ser independiente y hacer las cosas a su gusto, además de que ahorramos gastar también. Gracias por eso ?? (espero ancleen el post para que no se pierda).
  3. #3
    Me sorprendes cada vez más arepita ??
  4. #4
    https://www.boombang.nl/forum/beluga/codigo-de-superprofile-free-)-por-otro-vende-re-caro-a-los-gentes/

Log in to post.