Formatting on the Homebrewery

Here are some things I use in my brews to give them a better design. The easiest way to understand this guide is to copy the code and paste it on a new brew, so you can see the coding on the left and the result on the right. If you want to see the code of this brew, click on the source button or here: https://docs.google.com/document/d/1_cl1KhzIztSsFyja0WGq2snjTob_g4D8u08J_KR496Y/edit Spacing text Normal text Text 1 Text 2 Text 3 Text 4 Text 5 "___" (3 underlines) Text 1 (underlines below this) Text 2 Text 3 Text 4 (underlines below this) Text 5 Uses used in the spells description, just under the level and spell type line (see example below) Your Amazing Spell Name 7th-level illusion (underlines below this) Casting Time: 1 action

1 action Range: 30 feet

30 feet Components: M (a small doll)

M (a small doll) Duration: 1 hour The magnificent description of your balanced spell. "< br >" (without the spaces) Text 1 (br under this line of text)

Text 2 (2 br under this line)



Text 3 (3 br under this line)





Text 4 (4 br under this line)







Text 5 This is also used to "force" spacing (see the example using this and an image in the last page) Vertical Spacing You can also create some spacing between texts using the vertical spacing found in the editor. To modify the spacing, change the margin-top pixels. For example: margin-top:40px Text 1 (markdown below this line, margin-top at 40px) Tabbing text "& nbsp ;" (without the spaces) Text 2 Text 1 Text 2 Text 3 (1 " " before the text) Text 4 (2 " " before the text) Text 5 (3 " " before the text) Also works on tables (used for listing ammunitions and the arcane focuses) Item Cost Weight Abacus 40 gp 2 lb. Acid (vial) 20 gp 1 lb. Alchemist's fire (flask) 50 gp 1 lb. Ammunition Arrows (20) 1 gp 1 lb. Blowgun needles (50) 1 gp 1 lb. Crossbow bolts (20) 1 gp 1½ lb. Sling bullets (20) 4 cp 1½ lb. Antitoxin (vial) 50 gp ─ Arcane focus Crystal 10 gp 1 lb. Orb 20 gp 3 lb. Rod 10 gp 2 lb. Staff 5 gp 4 lb. Wand 10 gp 1 lb. Backpack 10 gp ─

Images Things to add to style Position: absolute; This allows you to put the image on any part of the page. You control the position and size adding the following lines: For Y axis, use top:Xpx; or bottom:Xpx; . For example: top:40px;

or . For example: For X axis, use left:Xpx; or right:Xpx; . For example: right:-220px;

or . For example: For setting the image size, use width:Xpx;. For example: width:510px; For the X and Y axis lines, you can use negative values too, and for the image size, you can use "%" instead "px". For example, the image code using those markdowns would be something like this: style='position:absolute;top:-40px;right:20px;width:800px;' mix-blend-mode:X; This allows to add any blending mode to an image. In most of the cases, if you use a image with a white background you can use the blend mode multiply to remove the white. This is not 100% accurate, but it works great if you don't know how to use photoshop or any other editing software. Here're a list of various blend modes that works with the images. multiply: the element is multiplied by the background and replaces the background color. The resulting color is always as dark as the background. screen: multiplies the background and the content then complements the result. This will result in content which is brighter than the background-color. overlay: multiplies or screens the content depending on the background color. This is the inverse of the hard-light blend mode. darken: the background is replaced with the content where the content is darker, otherwise it is left as it was. lighten: the background is replaced with the content where the content is lighter. color-dodge: this attribute brightens the background color to reflect the color of the content. color-burn: this darkens the background to reflect the content’s natural color. hard-light: depending on the color of the content this attribute will screen or multiply it. soft-light: depending on the color of the content this will darken or lighten it. difference: this subtracts the darker of the two colors from the lightest color. exclusion: similar to difference but with lower contrast. hue: creates a color with the hue of the content combined with the saturation and luminosity of the background. saturation: creates a color with saturation of the content combined with the hue and luminosity of the background. color: creates a color with the hue and saturation of the content and the luminosity of the background. luminosity: creates a color with the luminosity of the content and the hue and saturation of the background. This is the inverse of the color attribute. This information was found on the following page: https://css-tricks.com/almanac/properties/m/mix-blend-mode/ Example Using a Blending Mode: Original: "Agail Enthess" by rhineville With multiply as blending mode: (see the source code!)

Example using < br > and an image Weapons Your class grants proficiency in certain weapons, reflecting both the class’s focus and the tools you are most likely to use. Whether you favor a longsword or a longbow, your weapon and your ability to wield it effectively can mean the difference between life and death while adventuring. The Weapons table shows the most common

weapons used in the fantasy gaming worlds, their price

and weight, the damage they deal when they hit, and

any special properties they possess. Every weapon

is classified as either melee or ranged. A melee

weapon is used to attack a target within 5

feet of you, whereas a ranged weapon is

used to attack a target at a distance. Weapon Proficiency Your race, class, and feats can

grant you proficiency with certain

weapons or categories of weapons.

The two categories are simple

and martial. Most people can use

simple weapons with proficiency.

These weapons include clubs,

maces, and other weapons often

found in the hands of commoners.

Martial weapons, including swords,

axes, and polearms, require more

specialized training to use effectively.

Most warriors use martial weapons

because these weapons put their fighting

style and training to best use. Proficiency with a weapon allows you to add

your proficiency bonus to the attack roll for

any attack you make with that

weapon. If you make an attack roll

using a weapon with which you

lack proficiency, you do not add

your proficiency bonus to the attack

roll.



















Using the "BRs" I've wrapped the text arround the image borders. It might be a bit tedious to do on the code, but the result is amazing. Image used: "Dark Elf Warlord (1st iteration)" by Tanorax

Blending Images While you can easily remove the white background for images using the blend modes, some other images can be blended with a bit more of work. This clever idea was created originally by /u/QalarValar, and you can see his amazing resource in the following link: https://www.reddit.com/r/UnearthedArcana/comments/5nw1ou/watercolor_your_own_images_in_homebrewery/ How It Works I'll be using the QalarValar image resources (There you can find a lot of stains images): http://imgur.com/a/TW79K and the amazing piece of art called "Adventurers", created by Sandara (Deviantart). The process is pretty simple: you need to put the image you want to blend and then you just put the stains images at top of it. Here's the original image Here's the original image with some stains images on top of it (if you see the code, the stains images are below the original) 'The images below this text are the stains!'

Here're another examples of using the same method of blending images. In this case I created some new brushes for this. You can found them here: http://imgur.com/a/SKmRN Random Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec. Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque 'Top image' 'Bottom image'

Blending: New Method Here's another metod, more simple and

quicker, but its limited by the images you use.

In this case, I took the background image

used in the homebrewery and the Player's

Handbook and edited it, so the top right side of the

page is completely erased, allowing to show some image under it with better stains and a nicer look. With this method, you need to make sure the edited backgrounds you use for blending are at least 816 pixels width, so it covers the whole background image. I think this is the best way to have a nice blending look for images, and it's great for everyone who doesn't know how to use photoshop or any other editing software. The only "problem" of this metod is the limited flexibility for moving the image and adapting it. Test (Random text) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis erat vel quam pharetra condimentum. Phasellus sed dapibus lacus, vitae pulvinar nisl. Nullam nec erat eget nisi viverra semper rhoncus vel tortor. Nullam dictum tellus elementum, egestas mi sit amet, molestie neque. Vivamus vel blandit ligula, et placerat lorem. Aliquam consequat suscipit nisl, at gravida ante auctor mollis. Nulla quis sapien et neque luctus convallis. Cras feugiat dolor nibh, non vulputate arcu venenatis nec. Test text Morbi scelerisque suscipit ligula, id consectetur tortor scelerisque id. Cras imperdiet orci ac diam mollis, ac hendrerit velit cursus. Phasellus fermentum finibus blandit. Duis non dignissim mauris, quis rutrum odio. Suspendisse potenti. Donec aliquet in metus eget interdum. Pellentesque convallis euismod risus sit amet semper. Aliquam convallis lacinia dui. Cookie Tastiness Tastiness Cookie Type -5 Raisin 8th Chocolate Chip 11th 2 or lower 14th 3 or lower 17th 4 or lower Nunc blandit consectetur lorem, vel fringilla nisl accumsan vel. Morbi tempor enim sed sodales rhoncus. Aliquam vel venenatis turpis. Sed felis turpis, dignissim id purus at, iaculis pulvinar metus. Ut consectetur lectus at lectus dictum scelerisque. Phasellus vitae egestas metus. Nunc consequat, metus lobortis egestas varius, nunc nisl facilisis lorem, a fringilla orci lorem a odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce egestas, nisl ac faucibus finibus, dui risus fermentum erat, hendrerit aliquet dolor diam eget est. Ut nec faucibus dui. A Bit More of Randomness Etiam ante lectus, dictum sit amet dui nec,

euismod pulvinar mi. Sed elementum justo

eget nisl condimentum, nec pulvinar ligula semper. Nullam vitae risus sit amet lectus consequat tincidunt vitae in lorem. Cras egestas justo sit amet purus molestie consectetur. Aliquam scelerisque nibh dolor, sed dapibus erat hendrerit et. Duis id lacus dui. In placerat tortor sed nisi mollis, eu congue quam aliquam. Ut elementum maximus dolor. Duis egestas lorem quis leo elementum, et hendrerit sapien imperdiet. Sed et erat quis turpis malesuada vehicula eget vel lorem. Suspendisse efficitur lorem ac nulla pellentesque pellentesque in non enim. Sed egestas bibendum sodales. Morbi posuere augue purus, vel blandit lorem efficitur vitae. Curabitur at nisi vitae nulla ultrices finibus. Fusce ut dui eleifend, porta orci et, aliquet diam. Nunc at metus aliquam tellus facilisis fermentum. Vestibulum et ornare eros. Nunc eu pharetra urna. Heal Bad Hygene 5th-level transmutation Casting Time: 1 action

1 action Range: 30 feet

30 feet Components: S

S Duration: Concentration, up to 10 minutes A flame, equivalent in brightness to a torch, springs from from an object that you touch. The effect look like a regular flame, but it creates no heat and doesn't use oxygen. A continual flame can be covered or hidden but not smothered or quenched. Special Tip About this Method The backgrounds images I've created are in the same link you can find on the 5th page of this guide! If you missed it: http://imgur.com/a/SKmRN Also, this images for blending are a bit bigger (1275x1650), so you can resize them from 816px to a bigger size, and then moving it to fit the images and text you're using. 'Make sure the background image below is at 816 pixels width'