HTML SIdebar Help (paging gnunn)

AnonymousOne
AnonymousOne
edited April 2012 in Campaign Portal Building
Hey HTML gurus!

I'm looking for some help here.

We're just getting our campaign put up on Obsidian Portal and somehow it's fallen to me to clean things up and do all the HTML to make it look more awesome. Since as of a week ago I didn't know jack about HTML or CSS this has been quite interesting.

I followed gnunn's guide to building a sidebar and I've tweaked things to suit our needs, but I'm having a problem inserting an image into the sidebar to function as the sidebar background. I've checked various HTML and CSS help sites and either I'm too dense to see what I'm missing ... or I don't know.

Here's the code that I'm working with:



INDEX




"*Home*":http://www.obsidianportal.com/campaigns/the-lost-continenta

*[[Main Page | Wiki ]]*

"*Our Adventures*":http://www.obsidianportal.com/campaign/the-lost-continenta/adventure-log


+*REFERENCES*+
*People*
* [[The Party | Players]]
* [[People-Sidebar | NPCs]]

*Countries*
* [[Areen]]
* [[Garic Federation]]
* [[Isle of Manse]]
* [[Lumen]]
* [[Skarl]]
* [[Talarian Empire]]
* [[Wistron]]

*Religions*
* [[Pelor]]
* [[Saint Cuthbert | St. Cuthbert]]





I assume that my problem lies somewhere in the third command. I have tried to modify the code to

Here is the image I am trying to insert: http://i.imgur.com/dzbGI.jpg

Any help from the html gods around here?

Comments

  • RaseCidraen
    RaseCidraen
    Posts: 890
    'llo there!

    I think if you can cull through this text, you'll find what you're looking for - side scrollable sidebar, sits outside the frame.

    You just need to insert a background image into the innermost div, and you can fiddle with repeats, disabling and enabling them as you like.




    Main Page
    Timeline
    House Rules
    Legends
    Quotes
    REFERENCES
    People
    * Cast
    * Groups
    * Factions


    Places
    * Sigil
    * Planes
    ** Outer
    ** Inner


    Weaponry
    * Planar Weapons
    * Artifacts
  • AnonymousOne
    AnonymousOne
    Posts: 20
    When you say sits outside the frame you are referring to which part of the page? How does this sidebar act differently than a normal fixed sidebar?
  • RaseCidraen
    RaseCidraen
    Posts: 890
    Ah - sorry, my language is no good when I'm frazzled. It hangs off the left side of the wiki page - like "here":http://www.obsidianportal.com/campaign/planescape-campaign/wikis/gameplay
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Holy crap ... that's awesome. I guess the next question is:

    Does code like this have to be put into every page or is there a background page that needs to be edited.

    Sorry to pester you with questions Rase, I've never really done any HTML/CSS and I am just kind of stumbling my way through the coding while our DM gets the Wiki and Adventure log caught up.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    No worries - it's what I'm here for: to answer questions.

    That code will have to be put into every page (I wish there were a background page, but no dice).

    Make sure it's how you want it before you implement it - going back and changing a wiki's worth of pages is no fun. Any code/image questions you've got I'd be glad to help with if I have the time.
  • AnonymousOne
    AnonymousOne
    Posts: 20
    "going back and changing a wiki’s worth of pages is no fun."

    Yeah, I've already done that once. Not looking forward to it again, but this floating sidebar is much much easier to use than the fixed sidebar. Thanks much for you help. Oh and BTW I'll be pirating a portion of your photobucket bandwidth until I get the background image for my bar finished this afternoon.

    "Any code/image questions you’ve got I’d be glad to help with if I have the time."

    Thanks much! As far as inserting a background image on something like the home page that's just going to be a

    command line right? I suppose the devil is in the details of making sure that your image is the right size for the content portion of the page.
  • RaseCidraen
    RaseCidraen
    Posts: 890
    That's about right. If you have any specific code questions, I have a ton of examples across two of my campaign sites, probably fancier than you want to even consider doing (I actually took a year off of running a campaign just to get the interface to run the campaign right. Also, laziness)

    I'd wait until you got the image right to go about posting through everything - it's a lot easier to do things once than twice. But it depends. I don't mind, either way.

    With background images, you want to make sure you define your div widths and similar functions. You can turn off or force repeats in X, Y, you can add scrollbars, you can have the background image static while text scrolls over it - there's a large number of things you can get away with. It just takes some lateral thinking and creativity.
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Nothing that fancy.

    I took a look at your planescape setup and I like some of what I see. I won't be trying to replicate your scrollbars. I'm just going to try and get a nice homepage, make sure the sidebar is set up properly and then Once I'm happy with the general template go back to just photoshopping city maps and helping the DM flesh out the world.

    Off Topic, but I've found that I work really well with collaborative world-building. He and I both bring really unique perspectives and this is a 2.0 version of a campaign world I built back in college so it's really cool to see it evolve. Thanks for all your help Rase!
  • RaseCidraen
    RaseCidraen
    Posts: 890
    The scrollbars are great sometimes, but not others. If you want to get fancy with maps, I have code examples for using markers on them as well. You're an awesome player to go about helping your DM that way - most DMs would be lucky to have players like you!
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Here you go Rase, Here's a look at the final product after much wailing and bitching about padding etc.

    http://www.obsidianportal.com/campaign/the-lost-continenta/wikis/sidebar-test-page

    Thoughts?

    As far as helping him out. I built the 1.0 version of the damn world ... I'm not gonna let the DM totally screw it up! :D
  • RaseCidraen
    RaseCidraen
    Posts: 890
    That's pretty swanky. If you want to change the font, you can do that in the divs as well. I have it set to Exocet, which looks awesome, but only if you have the font installed.

    Padding is terrible. But it's better than manually locating divs on a page. THAT gets tiresome. See "Example":http://www.obsidianportal.com/campaign/the-dark-queen-of-the-west/wikis/december-2010

    All of those links were located by hand, using HTML. Wow, that gave me nightmares for a week. But at least the propagation of links was easy. I honestly think that's the best work I've ever done.
  • AnonymousOne
    AnonymousOne
    Posts: 20
    Thanks for letting me piggy-back off your work. I don't have exocet installed and I can't find a list of the default font settings for html. Or more appropriately I can't find one that I like more than the "normal" font. This has to be cross platform, some of our group have macs, ipads, etc so I need it to be as "normal" as possible.
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Rase is awesome!! Thanks, as always, for helping out! I know that my side buttons were also from you, through others...
    killervp
    "A God...Rebuilt":http://www.obsidianportal.com/campaigns/a-god-rebuilt
    "Duskreign's First Ever COTM":http://www.obsidianportal.com/campaigns/wyrmshadow/wiki_pages/112011
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/

    Just trying to help out.

  • AnonymousOne
    AnonymousOne
    Posts: 20
    Hey Killervp, congrats on campaign of the month. My DM and I just started this up recently and it's a real inspiration seeing those of you that really make all this work and give awesome ideas and help up out as we create our own worlds.

    For those of you that want to kind of see what we've got so far:

    "The Lost Continent":http://www.obsidianportal.com/campaigns/the-lost-continenta

    It's only going to get better and more in depth from here. Thanks for the help and I'm sure I'll be back with more questions in the future.
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