Report Blog Entry
Lo primero es entender un poco la sintaxis en CSS (lo que sirve para darle estilos a elementos HTML, con los que se construyen todas las webs), así no se confunden al leer el código:
selector {
atributo: valor;
}
Eso en términos generales. Primero se "selecciona" el elemento del HTML [se escribe su nombre, o "clase"], luego se indica la característica a manipular [atributo] y a ahí se le asignan los valores que uno quiera.
Es importante respetar mucho los signos de puntuación.
Teniendo eso en claro, a continuación voy a dejar la mayoría de los nombres de tags HTML que usa el layout normal de spacehey en los perfiles (o sus clases) y cada quien deberá ponerle los atributos y valores que desee.
Los atributos que más se suelen usar son los siguientes:
Los valores dependen del atributo, por eso los linkee, para que puedan consultar qué valores son aplicables a cada uno y cómo usarlos. Ya después va de la creatividad de cada quién lo que quieran hacer.
Les recomiendo bastante usar la herramienta de MDN cuando tengan una idea en mente y quieran saber si hay atributos "disponibles" para llevarla a cabo (seguramente sí); o cuando un código no les funcione y no sepan porqué, ya que casi siempre son errores de sintaxis.
<style>
body {
Para editar cosas de toda la página en sí. Aquí se suele editar el fondo general
}
.top {
Para editar el cuadro al tope de la página, donde está el logo de spacehey y demás
}
.logo {
Para el logo de la página. Se suele usar el atributo «content» en este caso
}
nav ul {
Para editar la barra de navegación
}
footer {
Para el cuadro abajo de todo, donde están los créditos/info de la página
}
main {
El cuadro principal donde están contenidos todos los otros recuadros del perfil, entre el top y el footer
}
.general-about {
El cuadro donde está la foto de perfil y la info general
}
.mood {
Cuadro del mood
}
.contact {
Cuadro de contacto, donde está lo de agg amigues, block, im, etc.
}
.contact .heading {
Encabezado del cuadro de contacto
}
.url-info {
Cuadro donde está la url del perfil
}
.table-section {
Sección de intereses
}
.table-section .heading {
Encabezado de la sección de intereses
}
.table-section .inner {
Fondo principal de la sección de intereses
}
.details-table td, .details-table p {
Fondo de cada cuadro dentro de la sección de intereses
}
.details-table td:first-child {
Casi lo mismo de arriba lol
}
.blog-preview {
Cuadro del blog
}
.blurbs {
Apartado del about me y who id like to meet
}
.blurbs .heading {
Encabezado de los blurbs
}
.friends .heading {
Encabezado del cuadro de amigos
}
.friends-grid {
Cuadro de amigos
}
.comments-table {
Tabla de comentarios
}
table.comments-table {
Tabla dentro dentro de la tabla principal de comentarios
}
.comments-table td, .comments-table tr {
Recuadros de la tabla de comentarios
}
.comment-replies {
Cuadros de las respuestas de los comentarios
}
button {
Para editar el aspecto de los botones
}
a {
Enlaces
}
p {
Párrafos
}
h1 {
Título 1
}
h2 {
Título 2
}
h3 {
Título 3
}
h4 {
Título 4
}
</style>
Evidentemente hay muchos más, pero eso es la base.
Para hacer cosas más específicas lamentablemente sí hay que saberle un poco más al CSS. Pero si ya entienden un poco de la estructura y cómo funciona se les va hacer más fácil tomar fragmentos de código de los layouts e ir reemplazando atributos/valores.
También les va a servir mucho inspeccionar!! Es lo mejor que pueden hacer si hay cositas muy concretas que quisieran cambiar que no están en la sección de layouts y no lo encuentran en MDN.
Por acá les dejo mi otro blog con linkzZz de ayuda para todo ese proceso de decorar perfiles ;).
Y bueno, si les sirve la cosa apreciaría mucho que dejen kudos. Y si no jódanse pues.
Comments
Displaying 3 of 3 comments ( View all | Add Comment )
ghost3333
Gracias por le blog
💫 tratando de mirar cuales son los selectores usados en el perfil para poderlo editar a mi gusto y que es lo que editan
Me sirve porque estaba
De nadaa :)
by ✯ LizZz ✯; ; Report
Katze.04
ala te quedo genial el layout :O
Gracias :>
by ✯ LizZz ✯; ; Report
Bandruc Draal🇻🇪
Por fin algo util para la gente hispana y no un vent ni una anecdota toda pendeja
10/10 quedo fino
Pero bien q igual te lees todos mis vents eh
by ✯ LizZz ✯; ; Report