Upcoming Events Block on Front Page

camarilladee
camarilladee
edited June 18 in Campaign Portal Building

Another little thing I made that other people might be wondering how to do.  If someone knows how to do it better, I'd love to see what you did.  Otherwise, enjoy!

What It Is:  A block to advertise your next upcoming event and encourage your players to RSVP right on the front page if you like!

See it in action:  https://csstestinggrounds.obsidianportal.com/

The Code:

<div style="border-style: dotted; padding: 10px;">

h2. Upcoming Game

Visit our "Events Calendar":/calendar to see all the upcoming events.

<table style="border-collapse:collapse;border-spacing:0; border: none; width: 100%;"><tbody>

<tr><td style="background-color:#2b3856;color:#ffffff;font-size:36px;font-weight:bold;text-align:center;vertical-align:bottom; width: 10%; padding: 0px; margin: 0px;"></td><td style="font-family:Impact, Charcoal, sans-serif !important;;text-align:left;vertical-align:middle; width: 5%;">TITLE:</td><td style="font-family: Metamorphous; font-size: 15px;">"Night of the Living Dead"</td></tr>

<tr height="50px"><td style="background-color:#2b3856;color:#ffffff;font-size:36px;font-weight:bold;text-align:center;vertical-align:bottom; width: 10%; padding: 0px; margin: 0px;">23</td><td style="font-family:Impact, Charcoal, sans-serif !important;;text-align:left;vertical-align:middle; width: 5%;">WHEN:</td><td style="text-align:left;vertical-align:middle;">7pm CST</td></tr>

<tr height="40px"><td style="background-color:#2b3856;color:#ffffff;text-align:center;vertical-align:top; padding: 0px; margin: 0px;">JUN</td><td style="font-family:Impact, Charcoal, sans-serif !important;;text-align:left;vertical-align:middle;">WHERE:</td><td style="text-align:left;vertical-align:middle;"><a href="https://discord.gg">Discord</a></td></tr>;

<tr><td style="background-color:#2b3856;color:#ffffff;font-size:36px;font-weight:bold;text-align:center;vertical-align:bottom; width: 10%; padding: 0px; margin: 0px;"></td><td style="font-family:Impact, Charcoal, sans-serif !important;;text-align:left;vertical-align:middle;">ABOUT:</td><td>The Orphans think they got a way to deal with the mages and necromancers in one fell swoop. Meanwhile, things down in Jefferson Parish get thrilling. _Four player spots open.  First come first serve._ </td></tr></tbody></table>

<div style="text-align: center;"><a class="attending-link small button" data-remote="true" data-type="json" href="/calendar_events/130749/rsvp?will_attend=true">Going</a>  <a class="not-attending-link small button" data-remote="true" data-type="json" href="/calendar_events/130749/rsvp?will_attend=false">Not Going</a></div></div>

</div><br />

 

What You Need To Do:  So this code doesn't update all on its own.  Each time you want a new event to appear on the front page you'll need to edit that front page. 



NOTE:  In an ideal world a block would be coded into the right sidebar to display your next upcoming calendar event and offer RSVP options on the front page. Maybe this could be added to the wish list somewhere way down on the bottom of their very long list I know they have?  



But for now... here's how you keep your block up to date.


  1. Edit the obvious text.  Date, time, location, etc.

  2. Visit your calendar page.  Hover your mouse over the "going" and "not going" buttons and look for the event number in the bottom left of your browser.  It'll look something like this:  https://db4sgowjqfwig.cloudfront.net/campaigns/263806/assets/1181175/event_number.png

  3. Plug that number into the going and not going button urls

  4. Save your changes and enjoy!

Post edited by camarilladee on

Comments

  • thaen
    thaen
    Posts: 581

    Ooooh, fancy!  Looks really nice. 

    NOTE:  In an ideal world a block would be coded into the right sidebar to display your next upcoming calendar event and offer RSVP options on the front page. Maybe this could be added to the wish list somewhere way down on the bottom of their very long list I know they have?  

    I think OP already handles that on the Dashboard.  There's an Upcoming Event section on the right hand sidebar.  And the Dashboard is the default landing page of a member of the Campaign.  Visitors are taken to the Front Page.  Does that not cover the scenario you're thinking of?

     

    Obsidian Portal Developer

  • camarilladee
    camarilladee
    Posts: 20 edited June 18

    This is probably something not everyone would want and need.  Of course, I did see the dashboard (I didn't mean to imply it wasn't thought about at all by OP) but for those of us who are running a game where we're trying to attract new players, having our next upcoming event might be nice on our front pages where visitors will land.  Sorry if sharing this implied any insult.  It was not intended.  Obviously, I like OP a great deal, I was just trying to share a snippet I thought someone other than me might search for in the future.  :)

    Post edited by camarilladee on
  • thaen
    thaen
    Posts: 581

    Definitely no insult perceived (and sorry if it seemed like I had)!  Just trying to make sure I fully understood the scenario you were wanting to cover.

    This does sound unusual enough that it wouldn't be something we'd add officially, but I think you might be able to use CSS to position this on the sidebar yourself.  @gastoff's campaign has a CotM "badge" that he created that sticks to the lower right corner, for example:

    https://terroratthrushmoor.obsidianportal.com/

    That said, how would the "Going" and "Not going" buttons work for non-members of the Campaign?  Or does your CSS hide those for non-members?

     

    Obsidian Portal Developer

Sign In or Register to comment.