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

Bart posted a discussion
You can map your own domain to your Ning site at the "Domain Mapping" page of your admin pages.…
3 hours ago
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"Yes done that as well

 "
5 hours ago
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"thank you so much ! is it also possible for groups?"
6 hours ago
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"Managed to get it like this for you
The Evanescence image looks a little lower which is because…"
17 hours ago
CJ Coster and ⚡JFarrow⌁ are now friends
NC for Hire
yesterday
⚡JFarrow⌁ posted a discussion
Way back in 2018, I shared this with you.  Tip: How to Add an Easy to Manage News TickerToday, I'm…
yesterday
⚡JFarrow⌁ replied to CJ Coster's discussion
Looking to Hire an Experienced Ning Developer
"Ill send you my contact info.. happy to help.."
yesterday
Rosas † Negras posted a discussion
/*cursor*/body, a, a:hover {cursor:url(HTML,BODY{cursor: url(HTML,BODY{cursor:…
Friday
Debbie Goode-Jones, Ted Harge, Donation Ngobeni and 17 more joined Ning Creators Social Network
Friday
CJ Coster posted a discussion
Hello, Believe it or not, we started when Ning, was just formed. We are back now and want to hack…
Friday
Rosas † Negras replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"possible to fix it this way? is an example of a 2.0 site"
Thursday
Bizz replied to Rosas † Negras's discussion
How can I fix this Ning 2.0
"There is an error in the code, sorry about that it should be like this
.xg_list_video_main .tb…"
Thursday
More…

Meanwhile, you can check our social media channels