estrimple
Hey everyone, I have been a member of OP for a few years now, and ran a pretty successful campaign through it spanning 2010-2013. Anyway, my group has started a new campaign a few weeks ago and I am trying to put more effort into the Obsidian Portal site this time around (my co-GM did most of it last time, but he is purely a player now and I am the sole GM). Here is my "campaign":https://wrath-of-the-righteous-shawnee.obsidianportal.com/. The big problem I am running into is with tables. "Heroes Unchained":https://heroesunchained.obsidianportal.com/ is my biggest inspiration for how I want my main page and wiki to look, but things like when I try to create a table and use a header at the top is causes either the table to be made, but the header tag shows up, or vice versa. I'm just wondering how you all do it with the background images, different fonts, etc because I am stumped. This is my first foray into CSS and textile, so any guidance would be much appreciated. Thanks!
Comments
@|_. Column 1 Header| _. Column 2 Header|
|Column 1 Content|Column 2 Content|@
And you can then style what exactly your table headers look like with this code in your campaign CSS (under Settings > Advanced):
@.campaign-public-layout th {}@
Put whatever CSS formatting you want inside the braces. For example, to simply make it slightly bigger and bolded:
@.campaign-public-layout th {font-size: 120%; font-weight: bold;}@
For general table formatting you can use this code in your CSS:
@#content table {}@
Such as:
@#content table {background-color: transparent; border-style: none;}@
Meanwhile back in the Textile for a specific page, to style a whole table, put the styling in braces after "table" followed by a period, for example:
@table{width: 100%; text-align:center;}.
|Content|Content|Content|@
If you want to style a specific cell, put the styling in braces at the beginning of that cell followed by a period, for example:
@table.
|{width:25%}. Content|{width:25%}. Content|{width:50%}. Content|@
Generally any text styling, coloring, fonts, shadows, etc... you can accomplish using CSS and Textile as above. For background images, I believe you would have to do a bit of basic HTML and use tags to create a new object with a background-image, then place the table inside it. But someone else would have to give the specifics as I haven't used tables with background images like that.
Edit: Forgot fonts. Those are easy enough, the code to put inside the braces is "font-family: '_font_';"
Just remember that you will need to either use a common font or else one you have attached to your campaign using either Google Fonts or Typekit (through Settings > Advanced). Google fonts can be found at "Google Fonts":http://www.google.com/fonts, just find the font you like and copy the name over into your campaign settings. Then reference it with the "font-family" code any time you want to use it.