Building a fantasy calendar into a wiki page

Frak_Lou_Elmo
Frak_Lou_Elmo

One of my players has gotten lyncanthrope so suddenly moon phases have become relevant :) My CSS skills are non-existant but I am very good at copy/paste and can figure out a bit of html.



I would like to build in a calender with moonphases. Looking around the net there are some pages which do this quite nicely:

https://donjon.bin.sh/fantasy/calendar/

http://www.d20srd.org/fantasy/calendar/

I punched some numbers and date names to make it Faerun accurate (see textblock at the bottom of this post for the .json contet for Faerun circa 1488 that can by copy/pasted into either link above) and i hoped that inspecting the source I could just see a bunch of html and copy/paste it into a wiki to replicate the calendar.

Lo and behold, it did not work! (what was I thinking?)

So I figure that CSS is required to make this work, but I cannot identify what. I was hoping someone here could help me out with that because I am guess that the two links above must use the same or similar CSS to get results which look almost identical but for the background. 

Ideally, I would prefer rather than the links above to have something more interactive like this creation: 

https://www.worldanvil.com/w/forgotten-realms-28d26d5th29-lethann/a/calendar-of-harptos-article

has anyone done this before in Obsidian Portal? Can anyone help me out in finding the CSS that I could copy/paste from those calender generators, or am I just thinking completely in the wrong direction on how this works?

thanks in advance!

Frak

 

 

calender text block, which is also saved as .json:

{"year_len":365,"events":1,"n_months":17,"months":["Hammer: Deepwinter","Midwinter Festival","Alturiak: The Claw of Winter","Ches: The Claw of the Sunsets","Tarsakh: The Claw of the Storms","Greengrass: Festival","Mirtul: The Melting","Kythorn: The Time of Flowers","Flamerule: Summertide","Midsummer Festival","Eleasis: Highsun","Eleint: The Fading","Highharvestide Festival","Marpenoth: Leaffall","Uktar: The Rotting","Feast of the Moon Festival","Nightal: The Drawing Down"],"month_len":{"Hammer: Deepwinter":30,"Midwinter Festival":1,"Alturiak: The Claw of Winter":30,"Ches: The Claw of the Sunsets":30,"Tarsakh: The Claw of the Storms":30,"Greengrass: Festival":1,"Mirtul: The Melting":30,"Kythorn: The Time of Flowers":30,"Flamerule: Summertide":30,"Midsummer Festival":1,"Eleasis: Highsun":30,"Eleint: The Fading":30,"Highharvestide Festival":1,"Marpenoth: Leaffall":30,"Uktar: The Rotting":30,"Feast of the Moon Festival":1,"Nightal: The Drawing Down":30},"week_len":10,"weekdays":["Firstday","Secondday","Thirdday","Fourthday","Fifthday","Sixthday","Seventhday","Eighthday","Ninthday","Tenthday"],"n_moons":1,"moons":["Selune"],"lunar_cyc":{"Selune":30.4375},"lunar_shf":{"Selune":6},"year":1488,"first_day":0,"notes":{"1488-1-1":"","1488-1-3":"","1488-1-5":"","1488-1-8":"","1488-1-11":"","1488-1-12":"","1488-1-15":"","1488-1-17":"","1488-1-18":"","1488-1-20":"","1488-1-22":"","1488-1-24":"","1488-1-26":"","1488-1-29":"","1488-3-7":"","1488-3-9":"","1488-3-13":"","1488-3-15":"","1488-3-16":"","1488-3-17":"","1488-3-20":"","1488-3-21":"","1488-3-22":"","1488-3-27":"","1488-4-2":"","1488-4-5":"","1488-4-9":"","1488-4-17":"","1488-4-18":"","1488-4-19":"Spring Equinox","1488-4-23":"","1488-4-25":"","1488-4-26":"","1488-5-4":"","1488-5-6":"","1488-5-7":"","1488-5-9":"","1488-5-11":"","1488-5-12":"","1488-5-14":"","1488-5-15":"","1488-5-19":"","1488-5-23":"","1488-7-7":"","1488-7-10":"","1488-7-16":"","1488-7-18":"","1488-7-20":"","1488-7-21":"","1488-7-23":"","1488-7-24":"","1488-7-25":"","1488-7-26":"","1488-7-29":"","1488-7-30":"","1488-8-4":"","1488-8-8":"","1488-8-10":"","1488-8-11":"","1488-8-14":"","1488-8-17":"","1488-8-24":"","1488-8-27":"","1488-8-29":"","1488-8-30":"","1488-9-2":"","1488-9-6":"","1488-9-11":"","1488-9-16":"","1488-9-18":"","1488-9-19":"","1488-9-21":"","1488-9-22":"","1488-9-26":"","1488-9-27":"","1488-10-1":"","1488-11-1":"","1488-11-4":"","1488-11-10":"","1488-11-14":"","1488-11-18":"","1488-11-24":"","1488-11-28":"","1488-12-4":"","1488-12-12":"","1488-12-14":"","1488-12-19":"","1488-12-21":"Autumn Equinox","1488-12-24":"","1488-12-25":"","1488-12-26":"","1488-13-1":"","1488-14-5":"","1488-14-6":"","1488-14-7":"","1488-14-15":"","1488-14-21":"","1488-14-25":"","1488-14-28":"","1488-14-30":"","1488-15-19":"","1488-15-21":"","1488-15-22":"","1488-15-23":"","1488-15-11":"","1488-15-27":"","1488-15-15":"","1488-15-16":"","1488-15-25":"","1488-15-26":"","1488-15-5":"","1488-17-4":"","1488-17-8":"","1488-17-16":"","1488-17-18":"","1488-17-21":"","1488-17-23":"","1488-17-25":"","1488-17-27":"","1488-17-20":"Winter Solstice","1488-8-20":"Summer Solstice"}}



twitter: @Frak_Lou_Elmo

Comments

  • thaen
    thaen
    Posts: 940

    The CSS from the site is copyrighted, but you can use it as a jumping off point for crafting your own.

    For the d20srd one, you can grab the HTML of the table.  Then go to the "Sources" tab in Chrome developer tools (the panel that opens when you Inspect something), and click on the "style.css".  That has all of the CSS to make the HTML look right.  So you'd then copy that to your Custom CSS to see how it looks.  The moons won't show up because the CSS is using a relative url for the png of the moons.  So you'll need to change that url to be the full url, for example:

    background: url('/fantasy/calendar/ma_moonsprite32_32c1r.png');

    becomes ...

    background: url('http://www.d20srd.org/fantasy/calendar/ma_moonsprite32_32c1r.png';);

     

    At that point you should have something close to what you see on the original site, and can tweak/alter/change from there.

    Feel free to ask if you have any questions or I'm not making sense.

     

    There was a discussion of in game calendars a bit back that might also be helpful:

    https://forums.obsidianportal.com/discussion/comment/45550/

     

     

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 170

    thanks! I guess now begins the painful journey of becoming an amateur programmer! lol



    twitter: @Frak_Lou_Elmo

  • thaen
    thaen
    Posts: 940

    Ha!  Feel free to post here for help.  Always happy to help!

    Obsidian Portal Developer

  • nuadaria
    nuadaria
    Posts: 27

    @Frak_Lou_Elmo If you're in the discord, I have some voodoo that might help you with some calendar magics.

  • Keryth987
    Keryth987
    Posts: 992

    @Nuardaria...dont get in trouble spreading that voodoo you do around :)

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 170

    If anyone is curious about the further adventures of calendaring, i chickened out of learning css and just made the navigation menu go to a wiki page were i shamelessly plonked down a picture



    twitter: @Frak_Lou_Elmo

  • thaen
    thaen
    Posts: 940

    Nice solution!

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 992

    Heres my version of a calendar

    The CSS for it and the entire site is available on the campaigns main page too

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 170

    damn that's nice! I think I will steal that for my Maztica timeline.

    (Also love the chianmail babes blush )



    twitter: @Frak_Lou_Elmo

  • GamingMegaverse
    GamingMegaverse
    Posts: 2,957

    As usual @keryth987 you have hit this out of the park- nice work!

    Just trying to help out.

  • twiggyleaf
    twiggyleaf
    Posts: 1,900

    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

Sign In or Register to comment.

July 2022
Signs and Portends

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