My High Fantasy Theme (Custom CSS)

BakaPenguin
BakaPenguin
edited January 2016 in Campaign Portal Building
Hello, everyone! I just finished working on a theme for an upcoming game my group is about to start. This is the first extensive modification I've done to a campaign, so any feedback is welcome.

"High Fantasy Theme":https://high-fantasy-theme.obsidianportal.com/

"Jump right to my custom CSS here":https://high-fantasy-theme.obsidianportal.com/wikis/get-the-css-here

Comments

  • Kallak
    Kallak
    Posts: 1,090
    Looks like a pretty solid start. Simple and straightforward. The only thing I don't see mocked up is artwork containment (assuming there will be some). My one "gripe" is that with the secondary column not displayed, you might end up needing to dedicate some space to displaying things that were there (such as campaign game system, players/party, etc..). It also sort of forces you to use a DST in order to have character portraits on the character pages. Not that such is a bad thing, but if your system doesn't have a DST, you might have minor issues.
    All the best,
    - Kallak
  • BakaPenguin
    BakaPenguin
    Posts: 8
    Thank you for the comment, that's just the kind of feedback I was looking for.

    Yeah, when I said finished, I really just meant the skeleton of the design. I'm still working on typography and other assets for laying out and navigating wiki pages on our actual campaign. I'll bring some of that to the mock-up campaign, eventually.

    The default sidebar is rather ugly, in my opinion, and isn't important for our needs. However, I appreciate that it is probably a good thing to keep. I'm going to see about adjusting some things to bring it back and make it look consistent with the rest of the design. I'm also looking into styling the Adventure Log which I removed altogether in my campaign.

    I hadn't noticed that the portraits only show up on the list. I'll have to look into styling the character pages, too.
  • Lxcharon
    Lxcharon
    Posts: 189
    I like it! Definitely has a high fantasy vibe. I would add texture to the scroll background. make it a little more believable.
  • BakaPenguin
    BakaPenguin
    Posts: 8
    Thank you, I'm glad you like it! I was finally able to make a texture I'm happy with for the parchment pages, so I updated the mock-up campaign.
  • Lxcharon
    Lxcharon
    Posts: 189
    That really completes the look! Well done!
  • Maesenko
    Maesenko
    Posts: 325
    I'm getting "pirates" vibe from it. I think it's the planks.

    It's definitely a good start, though. I'm curious to see a detailed example of a wiki page.

    As Always,
    _~Mae_

    ~Mae

    CotM Selection Committee

  • twiggyleaf
    twiggyleaf
    Posts: 2,006
    Hi BakaPenguin

    I agree with Maesenko about the "pirates" vibe - not that there is anything wrong with that though, but those planks do divert the mind to ships and pirates.
    I like your fonts in the Left Navigation Bar but I would watch out for some of the Headings being too small. In my opinion it looks mighty weird for the titles and subtitles to be smaller than the actual text.

    twiggyleaf
    CURRENT CAMPAIGN: "Mysteria":http://www.obsidianportal.com/campaigns/mysteria - set in Wolfgang Baur’s MIDGARD.
    Previous CotM Aug 2012: "Shimring":http://www.obsidianportal.com/campaigns/shimring

    "I met a traveller from an antique land....."

    CotM May 2016: Mysteria: set in Wolfgang Baur’s MIDGARD.

    Previous CotM Aug 2012: Shimring: High Level Multiplanar Campaign

    Inner Council Member

  • Keryth987
    Keryth987
    Posts: 1,047
    Looks like a good start, though I too must agree with the Pirates vibe. Definitely the planks

    Also, not to sound too critical, but, the bubble writing doesn't really seem fantasy to me. Might just be me but it just doesn't seem right. Also makes the menu on the side overflow and hard to read.

    A good start though. Much better than my initial efforts were

    As a suggestion take a look at Wolfhound's awesome Tutorials. Even the ones he lists as outdated (due to the reforge of OP) are helpful in a great many ways. You can find them "HERE":https://dfd.obsidianportal.com/wikis/main-page
    They're on the bottom of the page

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • BakaPenguin
    BakaPenguin
    Posts: 8 edited January 2016
    Thanks for the comments! I completely see what y'all mean about planks giving a ship deck/pirate feel to the theme. The campaign I'm making it for, while set in a high fantasy world, actually revolves around the PCs being mercenaries, so I was going for a sort of "job/quest" board feel. That was just a texture I had found online a long time ago and it worked, more or less. I've got more coming that I haven't added to the demo, yet, too.

    twiggyleaf: I'm still trying to work out the typography. I agree about the headings, my players have made the same comments.

    Thanks for the resource Keryth, alway good to have more tutorials and tools. Don't worry, I don't mind criticism so long as it's constructive. Obviously, I'm going for a hand written look. Some of my players have complained that the headings are hard to read. I'm looking to change them to a more legible hand writting-like typeface.
    Post edited by BakaPenguin on
  • Maesenko
    Maesenko
    Posts: 325
    I _thought_ you might be going for "job board" with that, but I wasn't sure. Maybe if you could put some pins or knives or something through the scrolls/papers, as a way to hold up the "messages"?

    Ooh, and I just had a thought -- character pages could be done up like Wanted posters!

    ~Mae

    CotM Selection Committee

  • Lxcharon
    Lxcharon
    Posts: 189
    I second Mae's opinion
  • Basileus
    Basileus
    Posts: 585
    You may be able to simplify the parchment background down to a single line of CSS (and no HTML on the pages themselves) by using the border-image property to slice an image and tile/stretch it appropriately in each direction.

    And some fantasy-esque fonts from Google Fonts that I've used:
    IM Fell English SC
    Bilbo Swash Caps
    Eagle Lake
  • BakaPenguin
    BakaPenguin
    Posts: 8
    Mae: I had originally envisioned a knife stabbing the parchment. Since you suggested it, I think I'll try a few different things securing the parchment to the board.

    I like the wanted poster idea. I haven't started tackling the Character pages, yet. My idea was to make them look sort of like dossiers if and when I got around to working on it.

    Basileus: Wow. I can't believe I didn't know about this. Thank you for the heads up. Absolutely going to be doing that.
  • Basileus
    Basileus
    Posts: 585
    If you run into difficulties with it (it can be a bit finicky getting it to work just right), let me know and I'll be glad to help.
  • BakaPenguin
    BakaPenguin
    Posts: 8
    Ok, I've made some significant asset changes to refine the design and reflect some of the feedback I've been given.

    * Thanks to Basileus for the tip using the border-image property, the overall design now looks more unified. Also, this allowed me to bring the sidebar back and not look out of place.
    * On Mae's suggestion almost every element is now nailed to the background with copper nails.
    * The Adventure Log has now been styled to reflect the design. I bit of refinement still to go, though.
    * Decided to remove the text from the menu to get a little extra space for content.

    Thanks again everyone for the feedback and help!
  • Keryth987
    Keryth987
    Posts: 1,047
    That looks much, much better Baka. Good job

    Keelah Se'lai,
    Keryth
    "Shadows Over New York":http://www.obsidianportal.com/campaigns/shadows-over-new-york
    "2013 Campaign of The Year":http://blog.obsidianportal.com/2013-coty-shadows-over-new-york/
    "Campaign of the Month July 2013":http://blog.obsidianportal.com/shadows-over-new-york-julys-campaign-of-the-month/

  • Basileus
    Basileus
    Posts: 585
    Looking good!
  • Kallak
    Kallak
    Posts: 1,090
    Upgraded parchment looks sweet.
    All the best,
    - Kallak
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions