Timeline

Bobloblah
Bobloblah
edited July 1 in Campaign Portal Building

Is it possible to build a "timeline," similar in structure to how the Adventure Log is presented, but with topics off both sides of the vertical ruler? I would want this on a Wiki page. Has anyone done this, and could I get the code for doing so?

Post edited by Bobloblah on

Comments

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 489

    I can picture this in my head. I think it'd be pretty straightforward to construct a timeline like that using a Table, but it'd be time-consuming.


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • Bobloblah
    Bobloblah
    Posts: 5

    Hmmm...I'm not sure how you'd get everything hanging off a central "ruler" by using a table...

  • UselessTriviaMan
    UselessTriviaMan
    Posts: 489

    I was picturing something like this.


    Ptolus, City by the Spire - 2016 Campaign of the Year

    "Please pay attention very carefully, because this is the truest thing a stranger will ever say to you: In the face of such hopelessness as our eventual, unavoidable death, there is little sense in not at least TRYING to accomplish all your wildest dreams in life."  - - Kevin Smith

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,877

    Hey Franz, Duck!  Busted up on that.

    Just trying to help out.  Changed name from killervp to Gaming Megaverse to match other sites.

  • DungeonMasterLoki
    DungeonMasterLoki
    Posts: 297

    I would love to be able to convert this insanity ( https://planejammerpanopticon.obsidianportal.com/wikis/timelines)

    into a timeline like that. 

    I vote yea on this! 

    Planejammer Panopticon: Central Hub for the Planejammer Campaign Series

    Current Active Games:

    Planejammer: Catch My Drift! (Starfinder RPG)

    Planejammer: The Spelljoined (Pathfinder RPG) Campaign of the Year 2011

     

  • Keryth987
    Keryth987
    Posts: 875

    Well, I have this on a site i'm developing HERE

    The format though is not my original idea...I got it from the forums here, but I forget where (probably in that HUGE  First or second topic.)

  • thaen
    thaen
    Posts: 362 edited July 27

    Wow @Keryth987, that looks really sharp!

    Post edited by thaen on

    Obsidian Portal Developer

  • Conan_Lybarian
    Conan_Lybarian
    Posts: 229

    @Keryth987 fhe whole aesthetic of the Portal is great. I looked all over for the favorite button only to realize I'm already a fan!

  • DungeonMasterLoki
    DungeonMasterLoki
    Posts: 297

    Wow @keryth987 favorited and going to dig through when I have some time. Love the timeline, hell I love the whole campaign! Very cool stuff.

    So how are you implementing that timeline at the code level?  

    Planejammer Panopticon: Central Hub for the Planejammer Campaign Series

    Current Active Games:

    Planejammer: Catch My Drift! (Starfinder RPG)

    Planejammer: The Spelljoined (Pathfinder RPG) Campaign of the Year 2011

     

  • Keryth987
    Keryth987
    Posts: 875

    </p>
    <div class="timelinecontainer">
    <div class="timelinemargin">
    </div>
    <ul class="timeline">
    <div class="year">Over 50 Million Years Ago</div><p><a class="anchor" name="ancient"></a></p>
    <li><strong>» Emergence of the Alterans ▾</strong>
    <br>The Ancients were originally known as the Altera who lived in one society with those known as the Ori in a distant galaxy (what Terran’s call The Black Eye Galaxy).</li>
    <div class="year">50 Million Years Ago</div><p><a class="anchor" name="50Mil"></a></p>
    <li><strong>»Settlement of Milky Way ▾</strong>
    <br>The Altera settle in the Milky Way Galaxy and become known as the Ancients, and build the network of Stargates, which they called "Astria Porta". </li>
    <li><strong>» Ancient Colonies ▾</strong>
    <br>The first landing place for the Alteran starship in the Milky Way was on the planet Dakara. Other early settlements of the Ancients in the Milky Way included Earth, which the Ancients called "Terra" (and which might be the site of the galaxy's first Stargate), Praclarush Taonas, and Kobol.</li>
    <div class="year">30 Million Years Ago</div><p><a class="anchor" name="30Mil"></a></p>
    <li><strong>»Expansion▾</strong>
    <br>The Ancients continue to populate and explore the Milky Way. Atlantian city-ships (which might have also been called "Lantian cities") exist on Earth in the area now known as Antarctica, on Kobol, and possibly on Praclarush Taonas. Each Outpost had a ring transporter platform and was powered by a device the Ancients called a "Potentia", which is called a "Zero Point Module" (ZPM) by modern-day Terrans. Other early settlements were Taoth Vaclarush, Valos Cor, and Verus Gen Bree. </li>
    <div class="year">5 to 10 Million Years Ago</div><p><a class="anchor" name="510mil"></a></p>
    <li><strong>» Plague ▾</strong>
    <br>A plague sweeps through the Milky Way Galaxy; During this time, the Ancients who survived the plague either ascended or leave the galaxy. At about the same time, the Ori were also ascending and created a second generation of humanity in their home galaxy. The ascended Ori added to (or if it didn't exist, created) The Book of Origin about worshiping them as gods because they discovered that they could gain more power in the ascended planes through man's relinquishing of his free will (this generation of humanity was most likely created solely to empower the ascended Ori). The Ori promised to help their followers to ascend, since these humans couldn't ascend on their own because they are not advanced enough in their evolution, but this promise was a lie since the Ori did not intend to share their power. </li>
    <li><strong>» Departure ▾</strong>
    <br>Ancients leave Earth in the city-ship Atlantis for the Pegasus Galaxy, leaving behind clues to their departure, as well as a defensive platform on Earth.</li>
    <li><strong>» Second Evolution▾</strong>
    <br>The Ancients (it is unknown which group) used the device on Dakara to seed the galaxy with new life, thus creating the second evolution of humanity in the galaxy. This creation was done only to Kobol and Earth, and destroys almost the entire Lantian Ctiy-Ship on Kobol. From Kobol the 13 Tribes of Mankind evolved, eventually spreading to the Colonies and Earth (formerly Terra). The Ancients in the Pegasus Galaxy from the city-ship Atlantis seeded the galaxy with humanity and unwittingly created their future rival, the Wraith. The Wraith were the result of the blending of the DNA of the iratus bug and humans. This blending resulted in the Wraith's need to feed on humans for their own survival. The ascended Altera/Ancients joined in a collective called "The Others" that used their combined power to shield the existence of humanity in the Milky Way and Pegasus galaxies so that the Ori didn't know that they existed or where to find them.</li>
    </ul>
    </div>

     

  • Keryth987
    Keryth987
    Posts: 875

    /* Campaign Timeline */
    .timeline div.year{ font-family:Audiowide; font-size:100%; margin-left: calc( 50% - 50px ); font-weight:bold; display: inline-block; background: RoyalBlue; color: white; border-radius:30px; padding: 0 10px 0 10px; position: relative; top: 10px; z-index:88; text-align:center!Important; box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5); }
    .timelinecontainer{ position: relative; overflow: hidden; }
    .timelinemargin{ height: 98%; position: absolute; left: 51%; width: 2px; background: RoyalBlue; bottom: 10px; margin-left: -1px; z-index: 87; }
    ul.timeline{ position: relative; list-style: none; overflow: hidden; padding: 0px; margin: 0px; }
    .timeline li:hover{ border: 2px solid rgba(50,50,50,0.8); background: rgba(200,200,200,0.3); max-height:3000px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; }
    .timeline li{ margin: 5px; width: 48%; box-shadow: 0px 5px 2px rgba(30, 24, 21, 0.5); background: rgba(200,200,200,0.2); border: 2px solid rgba(50,50,50,0.4); border-radius:6px; padding: 5px 2px 0px 5px; display:inline-block; vertical-align:top; overflow:hidden; max-height:35px; transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; text-align: justify; } .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(50,50,50,0.6) transparent transparent; right: 100%; top: 10px; }
    .timeline li:nth-child(odd):before{ border-color: transparent transparent transparent rgba(50,50,50,0.6); left: 100%; top: 10px; }

     

  • Keryth987
    Keryth987
    Posts: 875

    Top is the HTML (abbreviated).

    Second post is the CSS

    I CANNOT take credit for this. It comes from these very forums and I believe is hidden in the massice assitance topic which really, @KAllak and @thaen the valuable stuff in there should be taken out and placed somewhere easier to access.

  • thaen
    thaen
    Posts: 362

    @Keryth987, this, where it is right now, actually looks like a pretty good spot for it.  The topic name is "Timeline".  So anyone that asks about Timelines, we'll just point them to this thread.

    Obsidian Portal Developer

  • twiggyleaf
    twiggyleaf
    Posts: 1,731

    Hey @Keryth987 , I am loving the timeline of yours with the groovy cursor and expanding sections.  smiley

    "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

  • DungeonMasterLoki
    DungeonMasterLoki
    Posts: 297

    Almost getting to the point of playing with this. Thanks a lot for the code. I've got pages and pages of timeline stuff to convert once I get the hang of it. 

    Planejammer Panopticon: Central Hub for the Planejammer Campaign Series

    Current Active Games:

    Planejammer: Catch My Drift! (Starfinder RPG)

    Planejammer: The Spelljoined (Pathfinder RPG) Campaign of the Year 2011

     

  • thaen
    thaen
    Posts: 362

    @Keryth987, @Kallak just created a new "subforum" for posting threads or topics related to specific CSS and HTML implementations, like this Timeline code.

    https://forums.obsidianportal.com/categories/custom-css-discussions

    Kallak moved a couple threads over there to get it started, but if you or anyone else see other forum topics that should be relocated, just let us know.  Or if there are specific parts of the "assistance topic" that should be pulled out into their own threads, feel free to create topics for those in the new subforum.

     

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 875 edited August 10
    I'll start wading through it i suppose.

    @thaen and @Kallak. OK. The FAQ in the Help Topic is currently broken, and there is a lot of good stuff there. None of the links to the proper places in the topic work properly. I know those pages are still there as i manually access them from places elsewhere in the discussion, but have to go through every page. There a way we can get that fixed? or better yet, get each of those as its own topic in the CSS discussion. ALot of those tricks still work even post Reforge
    Post edited by Keryth987 on
  • thaen
    thaen
    Posts: 362

    @Keryth987, can you give an example of a url that's broken and the corresponding url that is working?

    I'm trying not to turn this into a project for the dev team as it will mean we have less resources to devote to features and bug fixes.  Whereas this is something that can be done by the community if it's wanted.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 875

    Easier to just say the first page. Currently those were all links to topics in the entire thread. None of those work anymore. But if you go through the individual entries in the thread and use the link, the links there work. The links though on Page 1, intended to keep people from having to wade through page after page of talking, no longer work

  • thaen
    thaen
    Posts: 362 edited August 11

    It looks like those urls are from a previous way of formatting the urls.  To get to the topics, you can take the broken url, for example:

    http://forums.obsidianportal.com/comments.php?DiscussionID=2779

    And append the "DiscussionID" number to the end of "https://forums.obsidianportal.com/discussion/", so it looks like:

    https://forums.obsidianportal.com/discussion/2779

    And then it should take you to the correct topic.

    Post edited by thaen on

    Obsidian Portal Developer

Sign In or Register to comment.

Stand against the Overlords with November's Campaign of the Month, Hazard Pay!

Read the feature post on the blog!
Or 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