Current status of the Ning Platform is always available on the Ning Status Blog.

NC for Hire

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.

hero image tip for Ning communities

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:

3822790979?profile=RESIZE_710x

 

If you have trouble, let me know.  If you need help with your community, let me know.  Happy to help.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

kostasgr replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"Bizz !! .. some code for a larger group cover ???? "
5 hours ago
Jen updated their profile
yesterday
Jen replied to Ning Support's discussion
The Star Rating Feature Is out Now
"Great feature. Thanks Ning!"
yesterday
Marly replied to Le Lynn's discussion
Trouble Loading My Profile Page
"The pages are fixed, however, on this same site we are now having the same issues but with Inbox."
yesterday
⚡JFarrow⌁ replied to Bizz's discussion
Tip: Adding add content links to your activity feed
"wow... that is looking very useful... ill try it out tonight!"
yesterday
Bizz posted a discussion
This tip will allow you to add some add content links below your status box on the activity feed to…
yesterday
Tony19 replied to Tony19's discussion
Add audio playlists
"Grazie Anastasia!"
yesterday
Anastasia_Ning_Support replied to Tony19's discussion
Add audio playlists
"Hello Tony!
We haven't planned to release such feature yet, but I agree it would be very convenient…"
yesterday
Anastasia_Ning_Support replied to Le Lynn's discussion
Trouble Loading My Profile Page
" Hi there!
Thank you for the alert!
Today our developers have fixed the issue that might be related…"
yesterday
Sean Fitzpatrick and Mark Hibbs joined Ning Creators Social Network
yesterday
Le Lynn posted a discussion
When clicking to go to my page or another persons' profile it will show this:
yesterday
Castleforte updated their profile
yesterday
More…

Meanwhile, you can check our social media channels