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
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@lists.gbif.org on behalf of Holetschek, Jörg J.Holetschek@bgbm.org Sent: Friday, April 9, 2021 12:21 PM To: Helpdesk, discussion and announcements for the GBIF hosted portals hosted-portals@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
Dear Morten,
yes - that's what I was looking for!
Thanks and Cheers, Jörg
Von: Hosted-Portals hosted-portals-bounces@lists.gbif.org Im Auftrag von Morten Høfft Gesendet: Samstag, 10. April 2021 07:36 An: Helpdesk, discussion and announcements for the GBIF hosted portals hosted-portals@lists.gbif.org Betreff: Re: [Hosted-Portals] Semi-transparent text block in page layout?
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@lists.gbif.orgmailto:hosted-portals-bounces@lists.gbif.org> on behalf of Holetschek, Jörg <J.Holetschek@bgbm.orgmailto:J.Holetschek@bgbm.org> Sent: Friday, April 9, 2021 12:21 PM To: Helpdesk, discussion and announcements for the GBIF hosted portals <hosted-portals@lists.gbif.orgmailto:hosted-portals@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
participants (2)
-
Holetschek, Jörg
-
Morten Høfft