How to create a timeline for your setting?

Maesenko
Maesenko
edited February 2015 in Campaign Portal Building
So, this has been plaguing my mind for some time now. I have this world in my head, and some of it is here on the Portal (I know not enough is, but I'm planning on overhauling it all soon).
The problem is, I have no idea how to build the timeline for it. I know what the current year is, and I have a vague idea about events which happened in the past (some of which is meant to be DM-only until PCs discover it). I just don't know how to actually put it to the page, especially the private parts.

I guess what I'm asking here is, how have you built timelines for your games? Do you have a way of making them responsive? What tools do you use? And so on.

_~Mae_

~Mae

CotM Selection Committee

«1

Comments

  • Unknown
    This is actually something I have been considering adding to my own Campaign page, and as a result I have looked at a series of Timelines people have setup here on OP to see if I could gather up any inspiration on how to go about it. In this quest I have found that the vast majority of pages that seem to include timelines do them in the most basic way possible. Simply a rather long list of years and events without any real particular stylization being done in most instances. I have rarely even seen any kind of navigation mechanic built for these pages, and they tend to come across rather bland unfortunately (something that even as a player in a Campaign I would be hard pressed to find engaging).

    Now, the one example I can think of off the top of my head that actually has a bit more design principle for it is on "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com/wikis/current-timeline where they have actually made the timeline have some flow to it (it actually looks like a timeline). They have broken it into sections it looks like as well to help keep the length of any given page of the timeline down. When I think about it for my own Campaign I think of something that is more along these lines for it. Perhaps killervp can shed some extra light on the design of that.

    I have been doing some research on this, and there are some interesting examples of "CSS timelines":https://www.google.com/search?q=css+timeline that you can check out that might help you get something unique squared up for you site. Obviously avoid anything that doesn't run through pure CSS since we can't rock out slick JS or jQuery stuff here.

    DM only stuff is where it could get a little tricky. I suppose if you break the timeline down into sections like they do on AGR then you could simply make a GM only portion of the timeline too that is just detached and in that hidden section. It wouldn't give you seamless flow really, but it might be the best way to approach it for what we have available here on OP. That is just my two cents on the matter, haven't dug in to make one yet myself but it is on my list and being randomly looked into.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • Unknown
    I was looking into this some more, and I see a nice and spiffy timeline CSS3 example online at "Codepen":http://codepen.io/P233/pen/lGewF that might fit the bill for you. To get the CSS as opposed to Sass you want to click the eye icon on that column. You can modify properties ahead of time, but you have to do it in the Saas modes which isn't terrible. Finally, sometimes OP does not agree with some design techniques, so test this first.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    The code I use, and it actually came from the awesome "Pils":https://www.obsidianportal.com/profile/Pils
    ==

    ==
    Etc, etc....

    Just trying to help out.

  • ikabodo
    ikabodo
    Posts: 39 edited February 2015
    I've been fiddling around with some code.

    Comments?

    "link to the page":https://a-tale-of-blood-and-honour.obsidianportal.com/wikis/testing-timeline-2
    Post edited by ikabodo on

    Oath of Crows

  • Unknown
    I really like it, personally. The one thing I would suggest, and I suggest this anytime you get a page that is getting longer, kick a quick menu at the top of it. For a time line I would think a quick jump to each particular year in the line would be good (pretty common feature to find on timelines). Curious, what kind of control do you have of where on the line an item will get placed? Is it just based on the amount of text in the boxes that come before it (essentially they are just trying to line up on the left and right side but get offset because the content boxes do not come out as the same size)? Or do you have the ability to control the offset of the placement?

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • ikabodo
    ikabodo
    Posts: 39
    Thanks for the advice. I put a "way to link to years now":https://a-tale-of-blood-and-honour.obsidianportal.com/wikis/testing-timeline-2#503 . Looks like it works, the styling is not complete though.

    As you say they are basically more of a "list" than a time-line actually. Since they just come one after another "left right left right left right" and if one box is filled with a lot of text, it just takes longer for the next box to show up. That suited me great... it's actually kind of based on the visual look of an old facebook time-line. To make the timeline ACTUALLY show the time I think I'd have to use javascript or some advanced css to make popups or hovers and some way to meassure time on the line. Also.. on some of my time-lines it would just show up as fivethousand pages of nothing. then one event.... :D

    Oath of Crows

  • ikabodo
    ikabodo
    Posts: 39
    The html is pretty easy though, so it's easier to mainain:

    @


    496
    Countess [[:lady-ellen-of-salisbury | Ellen's]] [[Court]] is held at [[Sarum Rock]]
    Countess Ellen takes temporay control over Salisbury, because [[:robert | Robert]] is to young to claim his title
    Countess Ellen pays tribute to Prince [[Aescwine]]
    Adventure of meeting of King [[:cerdic | Cerdic]]
    Adventure of the Golden Deer
    497

    @

    So basically I just add @some text@ for each new box. and @496@ for each new year.

    Oath of Crows

  • saethone
    saethone
    Posts: 153
    That looks really nice!
  • Bortas
    Bortas
    Posts: 645
    That looks great, Ikabodo! I'm especially impressed with your minimalist approach to the HTML, well done. I would love to see what your CSS looks like!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • Unknown
    Very nice stuff here, very nice stuff indeed. The year selector works great, and some nice style on it as well. I might suggest some kind of hover effect on the options to better denote which one you are about to select, but all in all it is a fantastic creation.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Nicely done! Thanks for sharing!
    killervp
    "A God...Rebuilt":https://a-god-rebuilt.obsidianportal.com
    "OP's COTM April 2012":http://blog.obsidianportal.com/a-god-rebuilt-aprils-cotm/
    350 Fans, and Looking for More!

    Just trying to help out.

  • ikabodo
    ikabodo
    Posts: 39
    I'll post the css one I've cleaned it up!

    Oath of Crows

  • Unknown
    Good stuff, more great resources for the community. I'll be honest though, I have already ripped what you have going right now and started tweaking it for my own purposes since I am aware of how to go about doing so. Hope that isn't an issue at all, but I really liked a few things you did in there and wanted to get to using/tweaking it.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • ikabodo
    ikabodo
    Posts: 39
    You are welcome to do so. Sharing is caring.

    Oath of Crows

  • billy_blackerby
    billy_blackerby
    Posts: 12
    Make sure that you wrap those anchors in a paragraph or the nth child float left and right logic fails. :)

    -billy
    "Egron":https://egron-1.obsidianportal.com/wikis/home-page
  • MachineGunHarry
    MachineGunHarry
    Posts: 115 edited February 2015
    You know what might be cool, and I forget who displayed this code before, but boxes that expand when you hover over them. Essentially, they look like headings then the containers expand. I was trying to do the same concept for a character sheet at one point. Mae, if you are interested in something like that, shoot me a message, and I'll invest sometime looking up that code again.
    Post edited by MachineGunHarry on
  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    Ikabodo, that timeline is quite nice! Very slick and streamlined. Great job.
  • Bortas
    Bortas
    Posts: 645
    I certainly would love to see your expanding boxes! I've been fiddling with a variety of solutions, but I've been struggling!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com/
  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    Hey bort, sorry it took me forever...I had to go back through and find it again. Luckily, I left myself a breadcrumb to follow. Well, anyway, belrathius here on OP shared this code. Here is his CSS and HTML:
    "Here":https://high-fantasy.obsidianportal.com/wikis/sample-collapsible-menus
  • Bortas
    Bortas
    Posts: 645
    That is a fantastic looking page, and the HTML is really simple. Unfortunately, my struggle is the CSS. I'm going to send a PM to Belrathius and see if he can offer some pointers. Thanks for your help!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • Belrathius
    Belrathius
    Posts: 206 edited February 2015
    Wow, timing is everything. I haven't looked at the forums for several days and yet randomly I look at this one and BAM, it seems that I am needed.

    So the real CSS thing is to use the :hover behind the class name in CSS.

    .BasicBox {
    max-height:43px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

    .BasicBox:hover {
    max-height:3000px;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    }

    The max-height is used instead of height so that it can adjust as big as needed. If you want consistency of look for the timeline, you could replace max-height with height to ensure a consistent size box. The transition lines (all four) simply determine the speed of expansion or retraction. If you remove them, the change will be immediate rather than a smooth slide. All four are needed for different browser support evidently.

    I hope this helps, but if you still need more, you (or anyone) are always more than welcome to PM me and I will help if I can - though more extensive work may get delayed.

    Speaking of which, I need to send someone an apology...

    Bel
    "Experiments in Space":https://gurpsspace.obsidianportal.com
    Post edited by Belrathius on
  • Bortas
    Bortas
    Posts: 645
    That's awesome! I was able to adapt that for myself, love it!

    -bort
    "Morwindl":http://morwindl.obsidianportal.com
  • GamingMegaverse
    GamingMegaverse
    Posts: 2,998
    Belrathius, your input is always valuable- thanks!!

    Just trying to help out.

  • Dungeon_Master_Loki
    Dungeon_Master_Loki
    Posts: 358
    Hmmm. So where would I put the CSS? (I'm an html guy myself)

    Game Designer, Pro GM, multiple ENnie Award winner

    GM of Planejammer: The Spelljoined (Pathfinder 1e) Campaign of the Year 2011 and still going strong!

    GM of The Planewalker's Guild (Pathfinder 1e) 

    Need a GM? Book me today!

  • Unknown
    The CSS would go into your Custom CSS (requires Ascendant), and should really be able to be placed anywhere in there without much an issue.

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • ketherian
    ketherian
    Posts: 203
    I'm trying to make this work.
    So far, I've got this: "Test page":https://swtwc.obsidianportal.com/wikis/test-page

    It's not quite right. The line isn't contiguous. I suspect I'll have to somehow make it a background image to stop it from appearing to break.
    But it's at least in the right vein.
    Any advice is appreciated.

    Here's my CSS:

    /* Original source: http://codepen.io/manabox/pen/BqtLA */
    /* By: http://codepen.io/manabox */
    .timeline { list-style: none; }
    .tl {margin-bottom: 3px;}

    @media ( min-width : 640px ){
    .tl { overflow: hidden; margin: 0px; position: relative; }
    .timeline-date { width: 90px; float: left; margin-top: 0px; }
    .timeline-content { width: 75%; float: left; border-left: 3px #800000 solid; padding-left: 30px; }
    .timeline-content:before { content: ''; width: 12px; height: 12px; background: #800000; position: absolute; left: 86px; top: 5px; border-radius: 100%; }
    }

    /* By: Belrathius in the OP forums. */
    .BasicBox { max-height:20px; overflow: hidden; }
    .BasicBox:hover { max-height:3000px; }
  • Unknown
    You shouldn't need to actually, but you probably need the full CSS for the timeline which it looks like you are missing. This is what I have cobbled together on it so far (well, I have excluded some bits that should not be needed specifically to get the main build working). I am curious to see if it does work with the expanding details that you have in place (I think it should). Anyways, this is the CSS for the timeline that Ikabodo cobbled up:

    /* TIMELINE FORMAT TEST */
    .timelinecontainer{
    position: relative;
    overflow: hidden;
    }

    .timelinemargin{
    height: 100%;
    position: absolute;
    left: 50%;
    width: 2px;
    background: #b52020;
    bottom: 10px;
    margin-left: -1px;
    z-index: 87;
    }

    ul.timeline{
    width:100%;
    position: relative;
    list-style: none;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    }

    .timeline li{
    width: 48%;
    background: rgba(246,234,213,0.7);
    border-radius:4px;
    margin: 10px 0 10px 0;
    padding: 0 10px 0 10px;
    position: relative;
    }

    .timeline div.age{
    font-family:Fondamento;
    font-size:125%;
    margin-left: calc( 50% - 45px );
    font-weight:bold;
    display: inline-block;
    background: #b52020;
    color:white;
    border-radius:50px;
    padding: 0 10px 0 10px;
    position: relative;
    z-index:88;
    width:90px;
    text-align:center;
    }

    .timeline div.year{
    font-family:Fondamento;
    font-size:125%;
    margin-left: calc( 50% - 35px );
    font-weight:bold;
    display: inline-block;
    background: #b52020;
    color:white;
    border-radius:50px;
    padding: 0 10px 0 10px;
    position: relative;
    z-index:88;
    width:70px;
    text-align:center;
    }

    .timeline li:before{
    border: 7px solid;
    content: '';
    display: block;
    position: absolute;
    }

    .timeline li:nth-child(even){
    float:right;
    clear:right;
    }
    .timeline li:nth-child(odd){
    float:left;
    clear:left;
    }

    .timeline li:nth-child(even):before{
    border-color: transparent rgba(246,234,213,0.7) transparent transparent;
    right: 100%;
    top: 10px;
    }

    .timeline li:nth-child(odd):before{
    border-color: transparent transparent transparent rgba(246,234,213,0.7);
    left: 100%;
    top: 10px;
    }
    /* END TIMELINE FORMAT TEST */

    --
    Alex
    "Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
  • Belrathius
    Belrathius
    Posts: 206
    Just a style recommendation, but I would nest the whole timeline in a container div with a height that encompasses all the max-heights plus the difference of the largest box that you get from the entries. This way the parchment remains static and doesn't resize when the mouse moves (which can be visually distracting), but it would also provide the opportunity for a background line since it appears (I could be wrong) that the line bit has the same margin settings that the blurb boxes do.

    Just a suggestion.
  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    Ketherian, maybe use some subtle borders or transparent background colors (using rgba) to bring out a particular open box. You could also change the font color or size instead, too. It hard to tell which ones are opened and which are closed. Good work, btw.
  • MachineGunHarry
    MachineGunHarry
    Posts: 115
    Also a note, when I was using Belrathius' code, I could use it inside a , and it would be a little bit different than a .
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