Maesenko
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
Comments
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/
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
==
==
Etc, etc....
Just trying to help out.
Comments?
"link to the page":https://a-tale-of-blood-and-honour.obsidianportal.com/wikis/testing-timeline-2
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
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
@
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.
Age of the Dragons - Homebrew Fantasy | Edurance of Hope - Age of Rebellion
Nominate a Campaign for Campaign of the Month!
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
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.
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
-billy
"Egron":https://egron-1.obsidianportal.com/wikis/home-page
-bort
"Morwindl":http://morwindl.obsidianportal.com/
Campaign of the Year - 2018
"Here":https://high-fantasy.obsidianportal.com/wikis/sample-collapsible-menus
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
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
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
Just trying to help out.
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!
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
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; }
Signs & Portends, Dwarves of Lost Koldukar, In a certain realm
/* 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/
Just a suggestion.