GM Binder and Genesys

By CitizenKeen, in Genesys

Thats crazy theReplicant! I didn't think others could alter your code when it was shared, I thought they'd only be able to view it?? If they can thats a huge security hole that they'll need to fix asap for sure.

15 minutes ago, themensch said:

Not just my documents - darn near everything I've opened has weird formatting pushing things off the right side of the page. I figured it was just my browser, since I recently switched to using Safari instead of Chrome for better or worse. However, the same errors cropped up in safe-mode chrome with no plugins, so... \_(ツ)_/

Ah. That sounds like it's a wrapping issue with how the html and css render the code because I have that happen too. My issue is that it's that the data I entered is literally missing as well as having that Cover Page block of code randomly inserted (as if I went into the Insert Code menu and selected Cover Page at odd places). The Genesys Layout code block was also inserted multiple times in several documents in a similar fashion that the Cover Page was. That was all I really noticed. There could have been other random code inserts made, but I didn't notice any.

10 minutes ago, saethone said:

Thats crazy theReplicant! I didn't think others could alter your code when it was shared, I thought they'd only be able to view it?? If they can thats a huge security hole that they'll need to fix asap for sure.

Yeah, I hope to get a response soon. If it isn't a security problem, then I wonder if it's a database error on the backend. I'm confident it wasn't user error in this case, and I have no problem admitting it if I really had screwed up. I know there are people out there who are quick to blame others but I am not one of them.

So again, I could be wrong about a malicious person sabotaging pages and I hope I am.

2 minutes ago, theReplicant said:

Ah. That sounds like it's a wrapping issue with how the html and css render the code because I have that happen too. My issue is that it's that the data I entered is literally missing as well as having that Cover Page block of code randomly inserted (as if I went into the Insert Code menu and selected Cover Page at odd places). The Genesys Layout code block was also inserted multiple times in several documents in a similar fashion that the Cover Page was. That was all I really noticed. There could have been other random code inserts made, but I didn't notice any.

That's definitely weird and not cool. It sounds vaguely related to what I was seeing but maybe not. I didn't dig in too far because fancy front-end stuff isn't my forte and I figured someone more knowledgeable would post fixes eventually.

I posted this over on the reddit, but thought I would post here too for completeness. :)

I love the way the first letter is a drop cap for normal characters. It looks very good. :)

/* Makes the bigger 'first letter' in paragraphs under H1 and H2*/
.phb h1 + p:first-letter, .phb h2 + p:first-letter  {
    font-family: 'Crimson Text';
    color: #326DA1;
    font-size:32pt;    
    line-height:95%;
    margin-bottom:-9px;
    margin-right:2px;
    margin-top:-5px;
    float:left;
}

However, if I apply an italic or bold to the word/sentence, then the -5px in the margin-top: portion of the style causes some of the top of the drop cap to be cut off.

Is there a way to change this for only italic or bold characters to have a margin-top:-1px; instead (or add an additional padding-top:5px entry as well)?

2 hours ago, TCArknight said:

I posted this over on the reddit, but thought I would post here too for completeness. :)

I love the way the first letter is a drop cap for normal characters. It looks very good. :)


/* Makes the bigger 'first letter' in paragraphs under H1 and H2*/
.phb h1 + p:first-letter, .phb h2 + p:first-letter  {
    font-family: 'Crimson Text';
    color: #326DA1;
    font-size:32pt;    
    line-height:95%;
    margin-bottom:-9px;
    margin-right:2px;
    margin-top:-5px;
    float:left;
}

However, if I apply an italic or bold to the word/sentence, then the -5px in the margin-top: portion of the style causes some of the top of the drop cap to be cut off.

Is there a way to change this for only italic or bold characters to have a margin-top:-1px; instead (or add an additional padding-top:5px entry as well)?

You just need to add this code block right underneath the one you quoted:

Sorry, didn't see that you had also requested bold characters too.

/*  This Will Format the Drop Caps properly when either italicized or bolded  */
.phb h1 + p:first-letter, .phb h2 + p:first-letter  {
    font-family: 'Crimson Text';
    font-type: 'italic';
    font-type: 'bold';
    color: #326DA1;
    font-size:32pt;    
    line-height:95%;
    margin-bottom:-9px;
    margin-right:2px;
    margin-top:0px;
    float:left;
}

And it'll work as you want.

Edited by theReplicant
8 minutes ago, theReplicant said:

And it'll work as you want

Perfect! Thank you so much!

As a note, I did notice that it works if you are using the * for Italics, and not wrapping the words using the html <i> element. I'm assuming it would work the same if added one with the font-type: 'bold'. What if wanted italic+bold? (sorry, not too familiar with CSS stuff, I'm more of a mainframe Cobol programmer.. LOL )

11 minutes ago, TCArknight said:

Perfect! Thank you so much!

As a note, I did notice that it works if you are using the * for Italics, and not wrapping the words using the html <i> element. I'm assuming it would work the same if added one with the font-type: 'bold'. What if wanted italic+bold? (sorry, not too familiar with CSS stuff, I'm more of a mainframe Cobol programmer.. LOL )

I just used the <i> element because I frankly forgot about using the asterisks. Using both italic and bold won't matter in this case because they're using the same padding; however, I did notice that italic letters could have the padding at -1 as you initially suggested but bold needs padding 0 so I decided to just set both to 0 as it won't hurt the italics any to have slightly more padding.

Oh! And you're perfectly welcome! I'm glad to help!

Edited by theReplicant

How do I center an image? Every time I insert one, it places it to the left.

Here is my image script.

<img class="non-blended" style="width:300px" src=(image link goes here)>

Edited by Jedifish
3 hours ago, Jedifish said:

How do I center an image? Every time I insert one, it places it to the left.

Here is my image script.

<img class="non-blended" style="width:300px" src=(image link goes here)>

My understanding is you have to use the

<div class="wide">

tags around the picture you want centered. Since you've already set the picture size, then it should be no problem. It will affect the entire document from that point forward if you don't close it, as a reminder in case you are unfamiliar.

In other words,

<div class="wide"><img class="non-blended" style="width:300px" src=(link)></div>

Edited by theReplicant
On 4/12/2018 at 8:56 AM, theReplicant said:

My understanding is you have to use the

<div class="wide">

tags around the picture you want centered. Since you've already set the picture size, then it should be no problem. It will affect the entire document from that point forward if you don't close it, as a reminder in case you are unfamiliar.

In other words,

<div class="wide"><img class="non-blended" style="width:300px" src=(link)></div>

Does not work for me when I try this.

1 hour ago, Jedifish said:

Does not work for me when I try this.

Okay. I'll need more information then. Maybe someone with more experience can figure it out with what you've provided, but personally, I'll need to see your document in order to figure it out. Up to you if you're willing to share or perhaps wait. I'm okay with whatever you decide.

the image tag and the non-blended style are not centered by default, as they should be sized to fit the whole width. 300 px is a good size for a single column image, for a wide image you probably want to use a width of 625px or so. Im not sure exactly, my work browser is kind of locked down from using chrome's inspect feature :P

if your image is stretching too much and you don't want it to fill the whole width of the page, but still want to center it, you can change you can change "width:300px" to "width:300px;align:center;" while putting it inside the wide div like theReplicant showed, though thus far I don't think any of the actual genesys stuff has been formatted that way so its not really standard

Anyone know of anyway to replicate Terrinoth style in GMBinder?

12 hours ago, Khoram said:

Anyone know of anyway to replicate Terrinoth style in GMBinder?

Someone will have to make on. The Genesys formatting was done by a fan, so until a fan steps up to make a Terrinoth CSS doc, it won't happen.

2 hours ago, CitizenKeen said:

Someone will have to make on. The Genesys formatting was done by a fan, so until a fan steps up to make a Terrinoth CSS doc, it won't happen.

I've already got one that's roughly ready but it's significantly more complex than the first book due to the way the note blocks are styled. if anybody's interested in testing it out i can give you the code

2 minutes ago, saethone said:

I've already got one that's roughly ready but it's significantly more complex than the first book due to the way the note blocks are styled. if anybody's interested in testing it out i can give you the code

I for one would definitely love to see it. I’ve been trying to come up with one myself, but not making it too far at the moment.... :(

I would like to check it out as well.

https://www.gmbinder.com/share/-LAd3GBwVpsjlo3MsYeB

Here is the current version - there are still some tweaks that need to be made here and there but it is mostly finished. i'm not planning to run a game in terrinoth at the moment so it hasn't been a high priority - if anybody else wants to finish up what I started you're welcome to

you'll need to download the fonts "ESL Ancient" and "Bolton" for it to appear correctly - those are free fonts available online. the other two fonts the genesys book uses are not free so i imported similar looking fonts from google web fonts for those. if it gets finished and you want to have iveld add it as a theme in genesys he should be able to upload esl ancient and bolton to his server so everybody doesn't have to download it

also note a lot of the text in the document is not relevant 'cause i just modified the original genesys one without updating the actual content lol. there are for example, tables and bulleted lists inside of notes which the genesys book does not use, and the statblock instructions don't match up for how i had to rework them

Edited by saethone

Thanks saethone! I'll give it a look.

For anyone else playing along, you want JSL Ancient not ESL Ancient :)

23 minutes ago, Khoram said:

Thanks saethone! I'll give it a look.

For anyone else playing along, you want JSL Ancient not ESL Ancient :)

lmao. brain is fried, sorry

Well I'm not expert enough at CSS and markdown and whatnot to know what's missing, but it looks great to me! I did up the default font size to 11.5 though, but that's just cause my eyes are old.

Thanks again for the work!

Here's the current version of my doc using your theme.

44 minutes ago, Khoram said:

Well I'm not expert enough at CSS and markdown and whatnot to know what's missing, but it looks great to me! I did up the default font size to 11.5 though, but that's just cause my eyes are old.

Thanks again for the work!

Here's the current version of my doc using your theme.

holy ****, that looks awesome!

One thing to note, the formatting for the archetype stats changed a little - take a look at my sample example and you'll see that the code doesn't match up with the instructions below it...you basically just need to add a section in for the Brawn, Agility, Willpower etc labels underneath

Oh man, lol I didn't even notice those were missing! Thank you :)

Updated doc .

Edited by Khoram

Your work looks awesome @Khoram , I can't wait to see it finished! So well done.