ferlagod

En este post, quiero compartir un CSS personalizado que he creado para darle un toque único y personal a tu blog. Este CSS está diseñado para ser fácil de implementar y se ajusta a diferentes temas y plataformas de blog. Con solo copiar y pegar el código en tu sitio, podrás personalizar la apariencia de tu blog con estilos de fuentes, colores, bordes y más. Si estás buscando una forma fácil de añadir un toque personal a tu blog, ¡éste es el lugar para comenzar!

¿Donde realizar dicho cambio?

Para personalizar tu blog en Oniros.eu (o cualquier blog construido en WriteFreely), sigue estos sencillos pasos:

• Accede a tu blog en Oniros.eu y haz clic en las tres líneas en la esquina superior izquierda.

• En el menú desplegable, haz clic en “Customize”.

• En la página de “Customize”, busca “Custom CSS”.

• Debajo de “Custom CSS”, pega el siguiente código en el cuadro de texto correspondiente.

#blog-title a {
  background-image: url("https:// (COLOCA LA URL DE SU LOGO)");
  background-position: center;
  background-repeat: no-repeat;
  color: rgba(0,0,0,0);
  display: inline-block;
  width: 200px;
  height: 200px;
  background-size: 200px;
  border-radius: 50%;
}

@media screen and (max-width: 767px) {
  #blog-title a {
    width: 150px;
    height: 150px;
    background-size: 150px;
  }
}

body#collection section#wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(340px, 1fr));
  grid-auto-rows: 400px;
  row-gap: 24px;
  margin: 0 auto;
  max-width: 1140px;
  grid-column-gap: 24px;
}

@media screen and (max-width: 1140px) {
  body#collection section#wrapper {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
  }
}

@media screen and (max-width: 767px) {
  body#collection section#wrapper {
    grid-template-columns: repeat(1, minmax(340px, 1fr));
  }
}

body#collection section#wrapper article {
  margin-bottom: 24px;
  padding: 24px 24px;
  clip-path: inset(0);
  margin: 0 auto;
  max-width: 340px;
  border: 1px solid gray; /* added border */
}

body#collection section#wrapper article .post-title {
  font-size: 24px;
  font-weight: 600;
}

body#collection section#wrapper article time.dt-published {
  font-size: 14px;
}

body#collection article .book>:not(:first-child) {
  display: none;
}

body#collection section#wrapper nav#paging a {
  color: rgb(214, 211, 205);
}

body#collection section#wrapper nav#paging {
  padding: unset;
  margin-bottom: unset;
  grid-column-start: 1;
  grid-column-end: -1;
}

footer nav::before {
    content: "Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional. " url("https://i.creativecommons.org/l/by-nc/4.0/88x31.png");
    white-space: pre-wrap;
}

i.v-container frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Importante que cambies en el código (COLOCA LA URL DE SU LOGO) por la url completa de su logo. También he colocado en footer nav::before la licencia Creative Commons, pero si deseas puede cambiarla o eliminarla.

Tras esto pulsas Save Changes, y listo.

Modifica el código a tu gusto y personaliza tu blog.

#css #writefreely #blog

---

- Sigue a este blog en @ferlagod@oniros.eu

- Sígueme en Mastodon @ferlagod@frikiverse.zone

- El feed del blog es Feed