EOTE styles for Obsidian Portal

By progressions, in Star Wars: Edge of the Empire RPG

It is still a work in progress, but I've done up a set of Edge of the Empire styles for my Obsidian Portal page. I've also got dice symbols .

You can check it out in my signature.

I like what you have done here.

I have been contemplating the use of obsidian portal, and have been wondering how to work the symbols. hope you don't mind a little borrowing.

SP

Not at all. The images themselves are hosted on my Dropbox. I only wish Obsidian Portal supported inline images in CSS, then the images could be encoded into the CSS itself.

I've made a ZIP containing the dice images and the page background:

https://dl.dropboxusercontent.com/u/16621012/dice.zip

Eh, it's ok if your into that kind of thing.

:P

I have sean that some people have developed some nice Character pages. How do you do that?

That's a good question, I don't know about the development of those "Dynamic Style Sheets" for Obsidian Portal.

Players in my D&D campaign use them and they definitely exist for Edge of the Empire too.

Ooooooohh I am totally using this resource.

Well done, chief!

Thanks Phil!

Some stuff I'd like to do but haven't gotten to yet:

* The "sidebar" type of block text with the grey background. It wouldn't function as an actual sidebar on Obsidian Portal but you'd at least be able to create blocks that feel like that.

I haven't worked out how to do yet:

* Use Google Fonts to see if there are any typefaces closer to those used by the Edge of the Empire books. So far I'm only using standard web fonts from the browser.

Hmmm...can't seem to figure out this whole <i class=‘ability’></i> thing...

I've got the images hosted to my own site (google+ photos). I'm just not familiar enough with CSS to know the command to show the images in my wiki pages.

Suggestions?

Hmmm...can't seem to figure out this whole <i class=‘ability’></i> thing...

I've got the images hosted to my own site (google+ photos). I'm just not familiar enough with CSS to know the command to show the images in my wiki pages.

Suggestions?

First up, do you have an Ascendant membership that allows you to add custom CSS to your site?

Looking at https://star-wars-another-longshot.obsidianportal.com/ , it looks like you do.

1. The width of the EOTE background image is set based on the default width. I'd recommend adding "background-size: 100%;" to your CSS in this block:

.adventure-log-teasers .adventure-log-post,
.wiki-page-container,
.adventure-log-show .adventure-log-post-container,
#character-details {
background-size: 100%;
}
Now, for the dice symbols...
Obsidian Portal lets us use a lot of regular HTML in the wiki pages. So when you are editing your wiki, if you type:
"The ability pool for this check will be <i class='ability'></i>."
That should be enough to get you a green polygon symbol for Ability dice.
In your custom CSS you should have some code like this:
i.ability {
background-repeat: repeat-x;
background-size: 0.8em;
display: inline-block;
height: 1.1em;
width: 0.8em;
position: relative;
top: 0.2em;
}
where, instead of " https://dl.dropboxusercontent.com/u/16621012/dice/ability.gif " you've got the link to "ability.gif" from within your Google images.

Let me know if that's the case. If you can share the link to the ability.gif image from within your Google images, I can see if I can help further.

Edited by progressions

Hmmmm; seems to be working...

Thanks!

These look great! I will definitely be using these for my first campaign. Thanks so much

Nuts, and now it's not working again.

This is what I have. Any ideas?

i.ability {
background-image: url(" https://lh6.googleusercontent.com/-RCRVaRP3JmY/VAJXVrRNZRI/AAAAAAAALPA/yMjSrRIVwjI/w37-h49-no/ability.gif");
background-repeat: repeat-x;
background-size: 0.8em;
display: inline-block;
height: 1.1em;
width: 0.8em;
position: relative;
top: 0.2em;
}
i.ability.x2 {
width: 1.6em;
}
i.ability.x3 {
width: 2.36em;
}
i.ability.x4 {
width: 3.16em;
}
i.ability.x5 {
width: 3.96em;
}

Edited by DarthGM

Phil, would you be able to share with me a page where you've got the code?

BTW Phil I had some overlapping styles with the Star Wars crawl styling and the EOTE "blockquote" styles, which is why your crawl has italic text here:

https://star-wars-another-longshot.obsidianportal.com/

If you make the first block of Star Wars crawl styles like this it should fix it:

/* Opening Crawl */
blockquote.crawl {
background-color: black;
font-style: normal;
padding: 1.25em;
}
This adds "font-style: normal;".

I've updated my dice symbols and EOTE styles for Obsidian Portal.

I added the Sidebar and Example style of blockquotes, and added dice symbols designed for viewing on dark backgrounds, such as in blockquotes or sidebars.

https://explorers-on-the-edge.obsidianportal.com/wikis/dice-symbols

Enjoy!

Hi Prog,

First I'd like to thank you for sharing your beautiful obsidian portal style with the community. Very much appreciated!

I had a question about implementing the various block quotes you used. The only one that I can get to work is the standard blockquote <blockquote>. I guess the problem I am having is figuring out what the code is to call up the other blockquote styles. Coding is not a strong suit of mine. Any help you could provide would be greatly appreciated.

https://star-wars-skewed-universe-the-rise-of-the-fallen.obsidianportal.com/

No problem, I hadn't written up a tutorial about that aspect yet.

Here is how:

<blockquote class='sidebar'>

h3. This is a sidebar

Here is some text inside the sidebar. It will be on a dark background.

</blockquote>

<blockquote class='example'>

h4. Example: Here is an example

And here's some example text. It will be on a light grey background.

</blockquote>

The h3 and h4 in the above examples are the specific styles of header used for the EOTE styles within those blocks, trying to match up as closely as I can to the styles in the books.

Hope this helps!

Perfect. Thank you!

Very cool! I did something similar for my character generator using CSS, but it's not as extensive as what you've done. It did allow me, however, to change the colors of displayed HTML depending on the chosen skin (EotE, AoR, or FaD).

Nice!

One of my future plans is to extend this CSS so you can drop in an EOTE, AOR or F&D style, changing the colors and images where appropriate.

Progressions, first of all, thank you for creating those styles!

I am starting a local campaign, would like to use Obsidian and your styles. I was able to use your CSS code, however the title of the campaign desperately stay in black. Do you know of a way to change its color?

https://star-wars-edge-destiny.obsidianportal.com/