Jump to content



Photo

EOTE styles for Obsidian Portal


  • Please log in to reply
26 replies to this topic

#1 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 19 August 2014 - 03:29 PM

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.


  • FuzzyLog1cZA, Agatheron, OggDude and 3 others like this

EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#2 SavagePanda

SavagePanda

    Member

  • Members
  • 141 posts

Posted 19 August 2014 - 03:34 PM

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


PLEASE . . . Don't anger the Wookie.

 

 

my groups Obsidianportal campaign https://Shadows-On-t...idianportal.com


#3 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 19 August 2014 - 03:40 PM

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.dropboxus...621012/dice.zip


  • bradknowles likes this

EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#4 R2builder

R2builder

    Member

  • Members
  • 437 posts

Posted 19 August 2014 - 05:18 PM

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

 

:P


  • progressions likes this

Please check out our group and leave comments at: https://edge-of-the-...dianportal.com/


#5 SavagePanda

SavagePanda

    Member

  • Members
  • 141 posts

Posted 21 August 2014 - 09:37 AM

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


PLEASE . . . Don't anger the Wookie.

 

 

my groups Obsidianportal campaign https://Shadows-On-t...idianportal.com


#6 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 21 August 2014 - 10:01 AM

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.


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#7 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 22 August 2014 - 12:44 PM

I've updated my "How to" guide for my Obsidian Portal dice symbols, Star Wars crawl, and EOTE styles:

 

https://explorers-on...is/dice-symbols


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#8 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 30 August 2014 - 12:16 PM

I've updated the EOTE styles a bit to improve the blockquotes and add in colored drop-caps.

 

https://explorers-on...is/dice-symbols

 

You can see examples here:

 

https://explorers-on...to-the-ziggurat


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#9 DarthGM

DarthGM

    Member

  • Members
  • 205 posts

Posted 30 August 2014 - 04:38 PM

Ooooooohh I am totally using this resource.

Well done, chief!
  • progressions likes this

a.k.a. "GM Phil"
Co-Host of The Order 66 Podcast on D20 Radio
Gaming and Costuming Blogger: Fragments From the Rim - UPDATED (almost) EVERY THURSDAY ;)
Member of "Squadron 66"


#10 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 30 August 2014 - 05:11 PM

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.


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#11 DarthGM

DarthGM

    Member

  • Members
  • 205 posts

Posted 30 August 2014 - 05:49 PM

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?


a.k.a. "GM Phil"
Co-Host of The Order 66 Podcast on D20 Radio
Gaming and Costuming Blogger: Fragments From the Rim - UPDATED (almost) EVERY THURSDAY ;)
Member of "Squadron 66"


#12 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 30 August 2014 - 06:31 PM

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-an...dianportal.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-image: url("https://dl.dropboxus...e/EOTE-Page.jpg") !important;
  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-image: url("https://dl.dropboxus.../ability.gif");
  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.dropboxus...ice/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, 31 August 2014 - 01:23 PM.

EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#13 DarthGM

DarthGM

    Member

  • Members
  • 205 posts

Posted 30 August 2014 - 09:25 PM

Hmmmm; seems to be working...

Thanks!
  • progressions and kaosoe like this

a.k.a. "GM Phil"
Co-Host of The Order 66 Podcast on D20 Radio
Gaming and Costuming Blogger: Fragments From the Rim - UPDATED (almost) EVERY THURSDAY ;)
Member of "Squadron 66"


#14 Massus

Massus

    Member

  • Members
  • 1 posts

Posted 06 September 2014 - 10:48 AM

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


  • progressions likes this

#15 DarthGM

DarthGM

    Member

  • Members
  • 205 posts

Posted 06 September 2014 - 12:10 PM

Nuts, and now it's not working again.

 

This is what I have.  Any ideas?

 

i.ability {
  background-image: url("https://lh6.googleus.../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, 06 September 2014 - 12:11 PM.

a.k.a. "GM Phil"
Co-Host of The Order 66 Podcast on D20 Radio
Gaming and Costuming Blogger: Fragments From the Rim - UPDATED (almost) EVERY THURSDAY ;)
Member of "Squadron 66"


#16 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 06 September 2014 - 03:47 PM

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


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#17 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 06 September 2014 - 03:49 PM

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

EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#18 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 06 September 2014 - 09:10 PM

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...is/dice-symbols

 

Enjoy!


EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge


#19 Dramar

Dramar

    Member

  • Members
  • 14 posts

Posted 07 September 2014 - 10:02 AM

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-sk...dianportal.com/



#20 progressions

progressions

    Member

  • Members
  • 1,711 posts

Posted 07 September 2014 - 01:37 PM

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

EOTE Styles and Dice Symbols for Obsidian Portal

Our group's EOTE Obsidian Portal: Explorers on the Edge





© 2013 Fantasy Flight Publishing, Inc. Fantasy Flight Games and the FFG logo are ® of Fantasy Flight Publishing, Inc.  All rights reserved.
Privacy Policy | Terms of Use | Contact | User Support | Rules Questions | Help | RSS