banner links to somewhere

Frak_Lou_Elmo
Frak_Lou_Elmo

My GM has magicked the banner to link to the front page: https://inovertheirheads.obsidianportal.com/



He said that it wasn't even possible with CSS and required custom js. This surprised me as it seems like a simple and standard thing, but I have not seen any other campaigns have it. Anyone seen this before? 



twitter: @Frak_Lou_Elmo

Comments

  • Abersade
    Abersade
    Posts: 279

    Hmm. I am sure that it's possible with CSS, though it's not intuitive. Using the banner image section of the site would make it not be possible with CSS, but if you attached the target banner image to the bottom of the page and wrapped it in an address tag, then used position: absolute; top: Xpx; left: Xpx to stick it where the banner displays it should work. At least it did in my testing. You may need to use just a transparent banner image in the banner section to fill in the banner area so that the banner image that you position: absolute has a place to go.

    That said, I've always thought it was a bit odd that the banner didn't dump you back at the home page by default.

  • Abersade
    Abersade
    Posts: 279

    Verified working on my test site. Create a banner image that is the right size and place it on your page tagged like so:


    <div class=bannerwut>[[Home Page | [[File:1256698 | class=media-item-align-none | coollogo_com-2036665.png]]]]</div>

    And here's the code for the backend:


    /* Clickable Banner Silliness */
    .bannerwut {position: absolute; top: -344px; left: -251px; width: 1570px;}
    div.bannerwut > a > img {width: 1570px;}

    You may have to adjust the width based on the width of your content but it should work, as seen here: https://abersade-testbed.obsidianportal.com/wikis/home-page

     

  • Abersade
    Abersade
    Posts: 279 edited May 17

    Just noticed that the comment above has broken code in it courtesy of the terrible TERRIBLE terrible parsing of code snippets on the forums. XD

     

    Replace the >'s with greater-than signs and replace the <'s with less-than signs to make it work. 

    Post edited by Abersade on
  • thaen
    thaen
    Posts: 940

    @Abersade, the parsing of the code snippets should be fixed now.  I added some JavaScript a while back to fix the parsing ... but I had only targeted it at code snippets for HTML and JavaScript.  I changed it just now to be for all "code" tags.

    Instead of putting the banner element in the page, could you do something similar but put the element in the Custom Navigation?  That way the element would exist on every page, and you wouldn't have to add it to each page.

    Obsidian Portal Developer

  • Abersade
    Abersade
    Posts: 279

    @thaen, Thanks for fixing that. As for the custom navigation, I don't know. Initial testing seemed spotty, the link and image can be attached that way but the image size was bound to the banner box width in my testing. That leads me to think that it's likely possible, I just didn't have enough time to look into it properly.

  • Abersade
    Abersade
    Posts: 279

    You know... having to include the banner on each page isn't always a bad thing. I'm now picturing a deep horror Call of Cthulu style game where the banner is different depending on what page you are on. Heck, technically speaking there is nothing stopping you from recreating the entire navigation menu that way and making it change and shift with the horror content of the site. Also, targeting/replacing the banner like this should allow for transition effects too via CSS, so banners that shimmer when moused over as an example.

  • thaen
    thaen
    Posts: 940

    Shimmer effects ... cool!

    Obsidian Portal Developer

  • JayDoubleA
    JayDoubleA
    Posts: 9 edited May 21

    I am said GM and, through my two hours of trying to overlay the default banner with something that would be a link and resize nicely with it whilst keeping position, it never even occurred to me to just kill the default banner and create my own.

    Too deep down the rabbit hole that evening, for sure!

    With apologies for the image size there. I assumed it would auto resize because css.
    Post edited by JayDoubleA on

  • thaen
    thaen
    Posts: 940

    Definitely know what its like to head down rabbit holes.  Looks good.

    Obsidian Portal Developer

  • Abersade
    Abersade
    Posts: 279 edited May 23

    Just as a note, it's not strictly neccessary to kill the existing banner outright, though it's possibly preferred. I say that because in my testing leaving the old banner up didn't really cause any problems since the CSS, once fully applied, would move the clickable banner to cover the existing one. This effect can sometimes be seen on my test site on the slower reloads, the original banner is briefly visble before the test banner appears.

    Post edited by Abersade on
  • Abersade
    Abersade
    Posts: 279 edited May 23

    Secondary Note: One benefit of leaving a banner up would be to retain the look of the banner on your biography page and to retain the banner image in the campaign search page.

    It could be sort of neat if those were actually separate images instead, but since this is a very niche scenario I won't even make that suggestion.

    That said, I personally think it would be pretty great if the banner image just linked back to the campaign home site if you are viewing the front end, and back to the dashboard if you are viewing the back end.
    Post edited by Abersade on
  • thaen
    thaen
    Posts: 940 edited May 24

    That said, I personally think it would be pretty great if the banner image just linked back to the campaign home site if you are viewing the front end, and back to the dashboard if you are viewing the back end.

    @Abersade, I looked into this idea ...

    For the "front end", the standard way to do this would be to wrap the banner in an "a" tag, and make it a link itself.  But adding an "a" tag around the banner risks messing up someone's already crafted CSS.  (They might have a CSS path that assumes no "a" tag in it.)  So, the alternative is to put the "a" tag inside of the banner and expand it to fully fill the same space as the banner.  I couldn't find reliable CSS for doing that.  But many of you are way better at CSS than I am, so if someone has some CSS to make that work out, then I'll make that part happen.  (I just used the Inspect on my browser, and manually added the "a" tag into the banner, and then started applying CSS rules right there to try and make it work.  The closest I got was setting the "a" tag to be "display: block" and then setting an explicit height and width ... but those need to size to match the banner, not be explicitly set.)

    For the "back end" ... can you do a screenshot and circle which part you're saying should link back to the Dashboard?  I'm not sure I totally follow.

     

    Post edited by thaen on

    Obsidian Portal Developer

  • JayDoubleA
    JayDoubleA
    Posts: 9

    But adding an "a" tag around the banner risks messing up someone's already crafted CSS.

    Add a checkbox to turn this on in the advanced settings? That way, it's totally under the GM's control, and no one's CSS gets messed up unless they opt in. 

  • thaen
    thaen
    Posts: 940

    @JayDoubleA, thanks for that suggestion.  We've done the "just add a checkbox on the Advanced Settings tab" thing for a few features ... but I think it clutters up the UI, and I don't really want to keep adding more and more checkboxes for these kinds of features.  The Custom JavaScript feature was created specifically for these situations where there's a feature that someone might really want, but other members don't care so much about.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 940

    @Abersade, I played with this a little more and I think I have CSS that will work now.  And I think I know what you were referring to with the "back end" part.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 940

    @Abersade, @JayDoubleA, the banners should now be linked as Abersade suggested ... banner image links back to the campaign home site if you are viewing the front end, and back to the dashboard if you are viewing the back end.  Let me know if you see any issues.

    Obsidian Portal Developer

  • JayDoubleA
    JayDoubleA
    Posts: 9

    Awesome, thank you!

    I will remove my custom JS, and not scare casual visitors with the message.

  • Abersade
    Abersade
    Posts: 279

    Ooh, nicely done Thaen. Thanks.

  • thaen
    thaen
    Posts: 940

    Happy to!

    Obsidian Portal Developer

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