[Hosted-Portals] Semi-transparent text block in page layout?

Morten Høfft mhoefft at gbif.org
Sat Apr 10 05:36:02 UTC 2021


Hi Jörg

It isn't no, but you can always write your own css to do so.
https://hp-theme.gbif-staging.org/styling#add-custom-css

Something along adding below to _sass/_main.scss

.boxHero .feature-content {
  opacity: 0.9;
}

I just tried it, in my opinion it looks a bit odd, but perhaps there is a variation that works better.
Visually I find it annoying because it touches the bottom. If you added bottom margin as well, then it would seem more like a floating transparent block. Just making the whole thing transparent looks like a mistake. And then I would opt for only making the paper transparent, not the text.

so instead something along

.boxHero .feature-content {
  background: #ffffffee;
  border: 1px solid #88888822;
  margin-bottom: 2rem;
}

Hope that helps
Best
Morten
________________________________
From: Hosted-Portals <hosted-portals-bounces at lists.gbif.org> on behalf of Holetschek, Jörg <J.Holetschek at bgbm.org>
Sent: Friday, April 9, 2021 12:21 PM
To: Helpdesk, discussion and announcements for the GBIF hosted portals <hosted-portals at lists.gbif.org>
Subject: [Hosted-Portals] Semi-transparent text block in page layout?


Dear Morten,



We use the Page layout for our portals. Is it possible to set transparency for the part of the text that overlaps the image, usually the title and subtitle?

https://hp-theme.gbif-staging.org/layout/page



Thanks and cheers,

Jörg


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.gbif.org/pipermail/hosted-portals/attachments/20210410/ea99aa51/attachment.html>


More information about the Hosted-Portals mailing list