Sign in to follow this  
Followers 0
progressions

EOTE styles for Obsidian Portal

27 posts in this topic

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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;".

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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!

Dramar likes this

Share this post


Link to post
Share on other sites

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).

progressions likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0