I've been creating topics pages inside my community and if you are doing something similar, having a different Hero style header (example). In brief, topics pages aggregates photos by tag or category, discussions by tag or category,videos by tag or category, etc.
Embedded here is the pen for you to fork and play around with for your community, but i will save you some time if you wanna try it out.
See the Pen Hero Section with Text Overlay by JFarrow (@JFarrow) on CodePen.
The time saver. Simply copy and paste the following code into a notepad to alter it before installing it. Replace the underlined image URL with your own image URL and change the text for title and subtitle.
<style>.hero {
background: linear-gradient(#0006, #0006), url(https://storage.ning.com/topology/rest/1.0/file/get/3822778870?profile=RESIZE_1200x);
background-position: bottom;
background-size: cover;
background-repeat: no-repeat;
height: 70vh;
/* background-color: #eee; */
display: flex;
justify-content: center;
align-items: center;
}
.hero-inner {
/* text-align: center; */
padding: 0 1.5rem;
}
.hero-headline {
margin: 0;
color: #fff;
font-weight: 400;
}
h2 {
margin: 0;
color: #fff;
font-weight: 400;
font-size: 1.2rem;
}
</style>
<header class="hero">
<div class="hero-inner">
<h1 style="font-size:2em;"class="hero-headline">Your Title</h1>
<h2>A curated collection of blah blah blah.</h2>
</div>
</header>
Once you have it the way you want it, simply copy and paste it inside a Below Header HTML module like so:
If you have trouble, let me know. If you need help with your community, let me know. Happy to help.
Replies