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

Votes: 0
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

⚡JFarrow⌁ replied to Barney Lodge's discussion
Group Creation by Script
"Yes you can if you don't mind wrestling with the API...  ill send you my contact info... i have a…"
3 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
A Simple Way to Move Navigation Up Into Account Bar
"any ideas on how to get the logo up into the bar as well before the navigation?"
9 hours ago
Barney Lodge updated their profile
yesterday
Barney Lodge updated their profile photo
yesterday
ψψ ⚜ LuciStG ⚜ψψ updated their profile
yesterday
ψψ ⚜ LuciStG ⚜ψψ replied to Annabel Gregory's discussion
Email address capture
"You could ask members a profile question. I do this as well just go into settings > members >…"
yesterday
ψψ ⚜ LuciStG ⚜ψψ replied to Barney Lodge's discussion
Group Creation by Script
"As far as I Know you can not create groups on ning using a script. You have to create them one at a…"
yesterday
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
A Simple Way to Move Navigation Up Into Account Bar
"yes it is now perfect and with the added bonus of a sticky navigation when fixing the account bar…"
Saturday
⚡JFarrow⌁ and Amit Sinh are now friends
Friday
⚡JFarrow⌁ updated their profile photo
Mar 16
Annabel Gregory posted a discussion
Is there a simple way to achieve this? Thanks. 
Mar 15
Barney Lodge posted a discussion
My project is attemting to create a very large number of groups, each one asscated with a house…
Mar 13
More…

Meanwhile, you can check our social media channels