<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" style="display:none;"> P {margin-top:0;margin-bottom:0;} </style>
</head>
<body dir="ltr">
<div style="font-family: Calibri, Arial, Helvetica, sans-serif; font-size: 12pt; color: rgb(0, 0, 0);">
<span style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">Hi Jörg</span>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
It isn't no, but you can always write your own css to do so. </div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<a href="https://hp-theme.gbif-staging.org/styling#add-custom-css" target="_blank" rel="noopener noreferrer" data-auth="NotApplicable" style="margin:0px">https://hp-theme.gbif-staging.org/styling#add-custom-css</a><br>
</div>
<div style="margin:0px;font-size:15px;font-family:"Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, system-ui, Roboto, "Helvetica Neue", sans-serif;color:rgb(32, 31, 30);background-color:rgb(255, 255, 255)">
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
Something along adding below to <span style="margin:0px;font-size:14px;font-family:monospace;color:rgb(241, 70, 104);background-color:whitesmoke">_sass/_main.scss</span></div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">.boxHero .</span><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">feature-content
{</span></div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black"> opacity: 0.9;</span></div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">}</span></div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
I just tried it, in my opinion it looks a bit odd, but perhaps there is a variation that works better.</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
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.</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
so instead something along</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">.boxHero .feature-content {</span>
<div style="margin:0px"><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black"> </span><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">background:
#ffffffee;</span></div>
<div style="margin:0px"><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black"> </span><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">border:
1px solid #88888822;</span></div>
<div style="margin:0px"><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black"> </span><span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">margin-bottom:
2rem;</span></div>
<span style="margin:0px;font-size:10pt;font-family:Consolas, Courier, monospace;color:white;background-color:black">}</span><br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
<br>
</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
Hope that helps</div>
<div style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">
Best</div>
<span style="margin:0px;font-size:12pt;color:black;background-color:rgb(255, 255, 255)">Morten</span><br>
</div>
<div id="appendonsend"></div>
<hr style="display:inline-block;width:98%" tabindex="-1">
<div id="divRplyFwdMsg" dir="ltr"><font face="Calibri, sans-serif" style="font-size:11pt" color="#000000"><b>From:</b> Hosted-Portals <hosted-portals-bounces@lists.gbif.org> on behalf of Holetschek, Jörg <J.Holetschek@bgbm.org><br>
<b>Sent:</b> Friday, April 9, 2021 12:21 PM<br>
<b>To:</b> Helpdesk, discussion and announcements for the GBIF hosted portals <hosted-portals@lists.gbif.org><br>
<b>Subject:</b> [Hosted-Portals] Semi-transparent text block in page layout?</font>
<div> </div>
</div>
<style>
<!--
@font-face
{font-family:"Cambria Math"}
@font-face
{font-family:Calibri}
p.x_MsoNormal, li.x_MsoNormal, div.x_MsoNormal
{margin:0cm;
margin-bottom:.0001pt;
font-size:11.0pt;
font-family:"Calibri",sans-serif}
a:link, span.x_MsoHyperlink
{color:#0563C1;
text-decoration:underline}
a:visited, span.x_MsoHyperlinkFollowed
{color:#954F72;
text-decoration:underline}
p.x_msonormal0, li.x_msonormal0, div.x_msonormal0
{margin-right:0cm;
margin-left:0cm;
font-size:11.0pt;
font-family:"Calibri",sans-serif}
span.x_E-MailFormatvorlage18
{font-family:"Calibri",sans-serif;
color:windowtext}
span.x_E-MailFormatvorlage20
{font-family:"Calibri",sans-serif;
color:windowtext}
.x_MsoChpDefault
{font-size:10.0pt}
@page WordSection1
{margin:72.0pt 72.0pt 72.0pt 72.0pt}
div.x_WordSection1
{}
-->
</style>
<div lang="DE" link="#0563C1" vlink="#954F72">
<div class="x_WordSection1">
<p class="x_MsoNormal"><span style="color:black">Dear Morten,</span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style=""> </span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style="">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?</span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style=""><a href="https://hp-theme.gbif-staging.org/layout/page">https://hp-theme.gbif-staging.org/layout/page</a></span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style=""> </span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style="">Thanks and cheers,</span></p>
<p class="x_MsoNormal"><span lang="EN-ZA" style="">Jörg</span></p>
<p class="x_MsoNormal"><span lang="EN-ZA"> </span></p>
</div>
</div>
</body>
</html>