Possible to add announcement banner to publication cover?

[zsofiaj]

Has anyone had experience adding a banner to the top of a publication cover page? We would like to add a banner to the top of our cover/index page here to announce the publication of a print volume related to this digital catalogue:

https://publications.artgallery.yale.edu/italian-paintings/

I would be grateful for any tips or advice on how to do this if you are willing to share! Thank you!

[Erin-Cecele]

Hi @zsofiaj we add a forthcoming banner to some publications. It looks like this:

If something like this would work for your needs, let us know, and we can provide the CSS. This is the easiest option, although I recognize it may be too small for your needs.

Adding a banner at the top of the page is not recommended as it affects a number of different navigation elements. If anything, we recommend a banner at the bottom. However, that is still a complicated process to implement. You would need to create a new element in the layout template and then use CSS to fix the position/style it.

We invite others in the community to share their potential solutions/code suggestions as well.

[zsofiaj]

Thanks so much, @Erin-Cecele. I think something like the triangle overlay at bottom right might work, but is it possible to make it a little larger? And to add a link? We'd like a banner to announce the publication of a related print volume, and we would link to that publication page on our website. I was originally thinking of something like the announcement banner that is at the top of the main Getty website today, so that it pushes down the entire digital pub, including the navigation elements:

[Erin-Cecele]

Hi @zsofiaj, unfortunately, the banner does not support hyperlink capabilities and, after further reviewing the CSS, would be tricky to widen. Here it is, in case you'd like to experiment with it.

/* Temporary "UNCORRECTED PROOF" Banner */
@media screen {
  .quire::before,
  .quire::after {
    color: black;
    font-weight: 700;
    position: fixed;
    width: 230px;
    height: 230px;
    z-index: 4000;
    transform: rotate(-45deg);
    text-align: center;
    padding-top: 1rem;
  }
  .quire::before {
    content: "FINAL TEAM";
    background-color: cyan;
    bottom: -115px;
    right: -115px;
  }
  .quire::after {
    content: "PAGES";
    bottom: -130px;
    right: -130px;
  }
}

Anything that resembles what Getty has on their homepage or what we have at the bottom of the Quire documentation (which is created with v0 otherwise I would share the code) is created by adding a new element in the layout template and then using CSS to fix the position/style it. This is something that really requires developer support.

[Erin-Cecele]

@daniel-keller and @mpopke thank you both for your generous help on discussion #1072. Do you have suggestions for @zsofiaj for getting a banner on her project? Thank you again for your support of the community!