Hojas de estilo para maquetar con The Homebrewery

[quimar0]

Voy a intentar organizar un post con ayudas de maquetación para la herramienta web The Homebrewery.

Se compone de varias partes:

-Plantillas con diferentes css para lograr los diferentes estilos.

-Enlaces a recursos gráficos empleados. No voy a enlazar los pdf, solo los enlaces directos para que quien esté interesado pueda ver el código.

-Ayudas de maquetación en español e inglés.

- 3 Aventuras maquetadas usando las técnicas y plantillas del post.



AVISO IMPORTANTE: está herramienta está diseñada para visualizarse en CHROME, y da fallos usando diferentes navegadores. El pdf se puede generara a partir de la página. ESENCIAL elegir el tamaño de impresión A4 para obtener el documento sin cortes ni franjas blancas.


1)PLANTILLAS DE ESTILO:

I.OFICIALES DE DnD5

-Estilo Manual del jugador d&d 5e (original): https://homebrewery.naturalcrit.com/share/Hy-FqlqWSV

-Estilo Dungeon Master Guideusuario de reddit u/AeronDrake):
https://homebrewery.naturalcrit.com/share/HJZx7A3NS4

-Estilo Monster Manual d&d5 (usuario de reddit u/AeronDrake): https://homebrewery.naturalcrit.com/share/H147fvbBV

-Estilo Xanathar guide to everything (usuario de reddit u/JorgeRMH): https://homebrewery.naturalcrit.com/share/HJP1qafSN

II.EL RESURGIR DEL DRAGÓN

-Estilo Erdd FAN:
https://homebrewery.naturalcrit.com/share/BJ_iovWSE

-Estilo Erdd Aventuras gratuitas Juego organizado:
https://homebrewery.naturalcrit.com/share/BybkcQKbHN

-Estilo Erdd Fan - Zolarax (Con elementos de Bruno A. Verd):
https://homebrewery.naturalcrit.com/share/HyXBpWVHE

III.OTROS ESTILOS

-Estilo Elemental Evil (usuario de reddit u/AeronDrake ): https://homebrewery.naturalcrit.com/share/r1-JtWw-SV

-Estilo Slayer (usuario de reddit u/Swordmeow):
https://homebrewery.naturalcrit.com/share/S1Zxjo2VHE

-Estilo Xanathar GtE Azul y plata (usuario de reddit u/AeronDrake): https://homebrewery.naturalcrit.com/share/r1WQJnpGHE

2)ENLACES A RECURSOS GRAFICOS:

-Mias: https://imgur.com/a/kBjRrvn

-Otras varios d&d:

https://imgur.com/a/TW79K (5e) https://imgur.com/a/SKmRN(Player m) https://imgur.com/a/OZt2m (Player m)
https://imgur.com/a/C9Knows (monster manual)
https://imgur.com/a/KBtzBsN#agoxUig (DM manual)


3)ENLACES A MANUALES SOBRE MAQUETACIÓN:

https://drive.google.com/open?id=1WLxIPawReZv7jXmEzOUoQPoyucy4L2Yi

4) AVENTURAS de ejemplo:

-La flauta mágica:
https://homebrewery.naturalcrit.com/share/ryZ20RM9iG (Estilo normal usando imágenes)

-Un Templo en los Bosques de @Jex Rex : https://homebrewery.naturalcrit.com/share/rJmCK7cy9Q (Estilo de El Resurgir del Dragón)

-El corazón del Dragón de @Js Sanvi : https://homebrewery.naturalcrit.com/share/rytE3r34V (Estilo de Aventuras gratuitas del JO de El Resurgir del Dragón)

Por ahora ya está, iré ampliando el post en el futuro.


Un saludo y ¡cread malditos!

 

[VillaJota]

Impresionante, muchas gracias por el enlace.

Jesu

 

[Altair984]

Hola muy buenas, alguien sabe como poder quitar la linea amarilla de debajo de la hoja? es lo unico que no he conseguido descubir como modificarlo.

 

[quimar0]

Hola muy buenas, alguien sabe como poder quitar la linea amarilla de debajo de la hoja? es lo unico que no he conseguido descubir como modificarlo.

Tienes que añadir la siguiente línea dentro de la etiqueta del css, por ejemplo para eliminar la línea amarilla en la página 4:

<style>
    .phb#p4:after{ display:none; }
</style>

Enviado desde mi Nexus 5X mediante Tapatalk

 

[Altair984]

muchisimas gracias voy a probar a ver q tal , x cierto muchas gracias x dejar todo el material. esta casi todos los recursos necesarios ^^.

 

[Altair984]

-Estilo Xanathar guide to everything (usuario de reddit u/JorgeRMH):

https://homebrewery.naturalcrit.com/share/HJP1qafSN

Perdona que te vuelva a molestar, solu una ultima cosa y ya te dejo tranquiilo de verdad ^^´jajaaj. Mira me gustaria pedirte un ultimo favor. He buscado por todo el material que has dejado de imgur y lo unico que no encuentro y me gusta muchisimo es la esquinera dorada que aparece en esta foto. ¿podrias pasarmela si no te resulta de mucha molestia por favor?

PD: he probado el codigo y va perfecto, solo tengo q cambiar el numero por el numero de la pagina que no quiero que tenga la linea y me lo elimina perfectamente, muchisimas gracias   leasantry:

 

[quimar0]

-Estilo Xanathar guide to everything (usuario de reddit u/JorgeRMH):

https://homebrewery.naturalcrit.com/share/HJP1qafSN

Perdona que te vuelva a molestar, solu una ultima cosa y ya te dejo tranquiilo de verdad ^^´jajaaj. Mira me gustaria pedirte un ultimo favor. He buscado por todo el material que has dejado de imgur y lo unico que no encuentro y me gusta muchisimo es la esquinera dorada que aparece en esta foto. ¿podrias pasarmela si no te resulta de mucha molestia por favor?

PD: he probado el codigo y va perfecto, solo tengo q cambiar el numero por el numero de la pagina que no quiero que tenga la linea y me lo elimina perfectamente, muchisimas gracias   leasantry:

No es molestia, si miras el código de la hoja, en el CSS encontrarás una etiqueta llamada "footer" con el siguiente código:


/* Footer */
.phb .pageNumber {color: rgba(0, 0, 0, 0.5)}
.phb .footnote {color: rgba(0, 0, 0, 0.5)}  .phb:nth-child(odd):after{ content : ''; position : absolute; bottom : -3px; left : 10px; z-index : -10; height : 336px; width : 100%;
background-image : url('https://i.imgur.com/p7wvb4z.png');
background-size : cover; }

En la "url" tienes la dirección de imgur donde se encuentra la imagen que buscas.

A darle duro

Enviado desde mi Nexus 5X mediante Tapatalk

 

[Altair984]

a darles duro

De nuevo muchisimas gracias ^^  :friends:

 

[Bullpaint]

Buenas y gracias por el trabajo que has realizado, he sí Guido con atención las explicaciones que has dado para eliminar la línea amarilla de la siguiente pagina.
Mi problema es el siguiente, cuando le doy a crear pdf todo correcto, pero cuando lo abro en Acrobat los textos de la parte de la derecha parecen ensancharse y acaban cortados. Esto me ocurre por ej. Con la maquetación (-Estilo Dungeon Master Guideusuario de reddit u/AeronDrake)
Como lo puedo solucionar?.
Mil gracias y salud2.

 

[quimar0]

Buenas y gracias por el trabajo que has realizado, he sí Guido con atención las explicaciones que has dado para eliminar la línea amarilla de la siguiente pagina.
Mi problema es el siguiente, cuando le doy a crear pdf todo correcto, pero cuando lo abro en Acrobat los textos de la parte de la derecha parecen ensancharse y acaban cortados. Esto me ocurre por ej. Con la maquetación (-Estilo Dungeon Master Guideusuario de reddit u/AeronDrake)
Como lo puedo solucionar?.
Mil gracias y salud2.

Buenas y de nada .

Si tienes problemas con el PDF puede deberse a varias cosas. ¿Al imprimir usas Chrome como tu navegador? Otra cosa, al crear el PDF ¿qué tamaño de página pones para imprimir? Por defecto creo que pone el tamaño americano Letter, pero hay muchos más.

Sin ver el código es todo lo que se me ocurre, no me importa repasar el documento si no das con la tecla,  me lo puedes pasar en un txt y lo miro a ver si hay más problemas.

Un saludo!

Enviado desde mi Nexus 5X mediante Tapatalk

 

[Bullpaint]

:drinks: En primer lugar darte las gracias por tu interés.
Verás, mi manera de proceder es la siguiente.
-doy a la pestaña GET PDF se abre un Pdf sin problema, ( trabajo a través de una iPad con la ultima actualización).
-como no quiero imprimir en papel físico tengo 2 opciones.
  -Abrir en Acrobat reader.
  -Abrir en la aplicación nativa IBOOKS.
En ambos caso el resultado es el mismo, como indicaba en el texto anterior y se puede apreciar en la imagen.
En ningún momento puedo modificar el tamaño a un A4 o cualquier otro formato.
De nuevo mil gracias.
Salu2.

 

[quimar0]

:drinks: En primer lugar darte las gracias por tu interés.
Verás, mi manera de proceder es la siguiente.
-doy a la pestaña GET PDF se abre un Pdf sin problema, ( trabajo a través de una iPad con la ultima actualización).
-como no quiero imprimir en papel físico tengo 2 opciones.
  -Abrir en Acrobat reader.
  -Abrir en la aplicación nativa IBOOKS.
En ambos caso el resultado es el mismo, como indicaba en el texto anterior y se puede apreciar en la imagen.
En ningún momento puedo modificar el tamaño a un A4 o cualquier otro formato.
De nuevo mil gracias.
Salu2.

¿Entonces usas safari (el navegador por defecto en iPad), o Chrome? ¿Has probado a crear el PDF desde pc o Mac?

La aplicación web está diseñada para funciónar en Google Chrome, y yo me encontrado fallos incluso entre versiones antiguas y nuevas de Chrome al crear el PDF.

Edito para adjuntar una captura de la página de creación de PDF de Homebrewery a través de Chrome para que veas lo que te comento sobre las opciones. Te recomiendo que instales instales el navegador de google desde la appstore o te asegures de que tienes la última versión en tu ipad a ver si así se soluciona .

Enviado desde mi Nexus 5X mediante Tapatalk

 

[Bullpaint]

Ok, instalo chrome y pruebo a ver.
Te comentaré el resultado.
Salu2 y gracias de nuevo. :drinks:

 

[Gofeone]

Hola buenas,ante todo muchas gracias por el aporte,ya me manejaba con el homebrewery pero tu post me a ayudado mucho. Unicamente tengo una duda,¿como se puede poner una imagen que ocupe toda la página.
Muchas gracias por adelantado. Un saludo

 

[Cain]

Buenos días

[member=3020]quimar0[/member] Muchas gracias por la guía llevaba un tiempo queriendo maquetar para después imprimir algunas aventuras y artículos, no sabes cuando te agradezco este post  :drinks: :drinks: :drinks:

 

[Diegherkum]

Hay por ahí también un manual en español de homebrewery, es más básico creo yo, y no incluye cosas de ERDD pero lo dejo aquí para quien le sirva:

http://www.davidmonedero.com/blog/manual-de-homebrewery/

 

[mascogo]

Es una pasada, me encanta... ahora, me gustaría poder hacer lo mismo con otros estilos.

Conozco algo de la "teoría" de las .CSS (pero muy poca práctica). Me gustaría ver cómo es esa .css para que resulte en ese formato.

He visto que hay diferentes estilos, ¿sabéis cómo hacer un estilo propio?

 

[quimar0]

¿Con estilos propios a qué te refieres concretamente?  Si buscas algo dentro del estilo similar a D&D, de dos columnas, con tablas y demás, te diría que miraras el código de cualquiera de los estilos del primer post, lo copiaras en un archivo nuevo y probaras a cambiarle la imagen de fondo, los colores de las tablas y notas en el código. Además puedes buscar o diseñar elementos, como el pié de página (footer), y subirlos a un servidor de imágenes tipo imgr o Pinterest, para enlazarlos desde allí al documento que estés creando en homebrewery.

Te pongo ejemplos de cosas muy locas que se pueden hacer con homebrewery, tocando el código se puede conseguir casi cualquier cosa.

Enviado desde mi Redmi Note 9 Pro mediante Tapatalk