2 guests
0 members
0 Anonymous Members
0 members
0 Anonymous Members
- Groups legend
- Top Members
2 user(s) online
Tags
- ADnD (1)
- Carnevale (1)
- Carnevale Blogghereccio (8)
- contest (1)
- COSMO (1)
- d&d (2)
- dnd (12)
- dungeons_and_dragons (19)
- dungeons & dragon (1)
- fkr (1)
- Glog (2)
- #GobinWeek (1)
- #Goblinweek2020 (1)
- Magic (4)
- Monsters (5)
- old school (3)
- One Page Dungeon (2)
- one page dungeon contest (1)
- osr (25)
- parley30 (1)
- PBTA (2)
- roleplaying_game (20)
- rpg (20)
- #RpgADay2020 (2)
- Table (2)
- Tabletop RPG (32)
- ttrpg (5)
- Vancian System (1)
- VCB (10)
- Vecchio Carnevale Bloggereccio (11)
Statistics
Ruling With Archangels have:
35 articles, 20 comments
35 articles, 20 comments
, 12 members,
22,219 total visits, 101 monthly visits,
85º in Top Blog
22,219 total visits, 101 monthly visits,
85º in Top Blog
Most users ever online was 721 on 16/1/2023, 02:50
Blog Roll
-
Easy layout with Homebrewery
Take advantage of the very useful NaturalCrit tool without 5e style + BonusIn the Telegram @osrItalia group I promised a guide to take advantage of Homebrewery, an excellent tool (which you can find for free HERE) to quickly layout your material without having to get involved in
learning more complex tools (even if more complete).
I state that to take full advantage of the guide and customize the layout style as much as possible, a certain basic knowledge of HTML and CSS is required. For all the others who don't have time or don't want to learn this markdown style it will be enough to copy the basic style that I will insert at the end of the article. Let's start!
Homebrewery uses HTML Markdown to generate a stylized page in real time. The basic markdown on the page was created to resemble an official 5th edition manual as closely as possible, but that's not our target.
To start, just insert the styling tag at the top of the editing pageCITAZIONE<style>
</style>
Everything we are going to put in there will be applied as a style sheet within the preview page.
Going inside the DevTools (F12 on Chrome), it will be immediately possible to notice how every single element in the preview page already has some kind of class inside it, for example the main container is marked as <div class = "phb "id =" p1 ">
Within the style tag we can then make our first changeCITAZIONE.phb{ background : white; color:black }
This simple code snippet removes the parchment image from the background and gives us the freedom to insert any background we want to our page.
The "phb" class is very important, because it is the one that contains all the other tags that you are going to insert on the page, so it is advisable, when making a change, to put it before any tag to which we want to apply some style.
It is possible to write your own custom CSS classes and apply them within the text simply by inserting them in the Style tag with the nomenclature .className and then apply it to a fragment of text via a divCITAZIONE<style>
.example{
color:red
}
</style>
< div class="example" >
I want this text red
< /div >
It is also possible to insert custom fonts as long as they are obtainable via URL, by inserting the LINK above the Style tag, for exampleCITAZIONE<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Sofia">
and then apply it to the parts of the text we want to change, for example paragraphs.
IMPORTANT: in order for the font to be applied, the tags to which the font must be applied must be inserted one by one. I still haven't been able to find out why inserting the font-family in the body doesn't add it to all child tags.CITAZIONE<style>
p {
font-family: 'Sofia';
}
</style>
Throughout this Homebrewery provides a basic two column layout with intuitive tools for inserting breaks, tables, stat blocks etc.
Below you will find a default style for pagination in black and white, great for having something readable in a short time in pure old school styleCITAZIONE<style>
.phb{ background : white; color:black }
.phb img{display: block;
margin-left: auto;
margin-right: auto;}
.phb hr+blockquote {background : white;}
.phb h1 { color:black; border-bottom: 2px solid black;}
.phb h2 { color:black;}
.phb h3 { color:black; border-bottom: 2px solid black;}
.phb h4 { color:black;}
.phb h5 { color:black;}
.phb table { border:1px solid black;}
.phb table thead th {
color:black;
}
.phb table tbody tr:nth-child(odd){
background-color: #cecece;
color: black;
}
.phb .footnote {
color: black;
}
.phb:after {
filter:grayscale(100%);
}
.phb .pageNumber {
color:black;
}
.phb .classTable {
filter: grayscale(100%);
}
.phb hr+blockquote {
filter: grayscale(100%);
}
.phb hr+blockquote hr {
filter: grayscale(100%);
}
.phb hr+blockquote hr+ul {
color: black;
}
.phb blockquote {
filter: grayscale(100%);
margin:10px;
}
.phb .descriptive {
filter: grayscale(100%);
background-color:#cecece;
}
.right{
float:right;
}
</style>
<style>
.phb#p1:after{ display:none; }
</style>
An example created quickly for this guide gives an idea of the possible result obtainable in a few minutes:
And this is the simple source code (obtainable via the upper buttons quickly and easily)CITAZIONE> ## The Dervish Blade
>*Greatsword*
> ___
> - **Damage **: 2d6 Slashing
> - **Magic Aura**: Abjuration
> - **Range**: 5 foot
> - **Weight**: 6 lb.
> - **Value** 350 gp
> ___
> ***Description.***: The Dervish Blade is a two-handed blade with a leather handle embellished with ornamental grooves depicting dance scenes. It is so called as it usually accompanies the war dance of these incredible desert warriors. When moved correctly, the rings on the back rhythmically strike the blade, allowing you to generate a melody simply by waving and striking it in the right way.
> ### Effect
> If the creature wielding this weapon has moved at least 10 feet this turn, it can make attacks using Charisma as a stat for hit and damage roll instead of Strength. Provides extra daily use of any features gained through Bard levels.
>
>
<img
src='https://i.imgur.com/JsmNUT0.png'
style='width:325px'>
Best of all? As written on the main page:
The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery.../master/license). Which means you are free to use The Homebrewery is any way that you want, except for claiming that you made it yourself.
If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
Last comments