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

For some reason we do not seem to have a header above our Upcoming events list with a count for them ? Not quite sure why this is but it makes the page look un-balanced. Yes we get one when you do a date search but then it goes away. Maybe that's something that could be added by Ning but for now here is a way to create one.

Demo

Here you can see it, it gets added to all events pages: http://bizzssite.ning.com/events

BEFORE

AFTER

So how it works is that if the member selects a date range the header is replaced by that and shows as normal, the same for any of the other tabs you click on including categories. It's just the initial Upcoming Events list it get's added to.

First we add a touch of custom code ( goes in your site&pages custom code end of page section )

<script>
// Add class to the event list page to create a header
x$(document).ready(function(){
x$('.eventListPage').addClass('myEventListHeader');
x$('.eventListPage .module-header').closest('.eventListPage').removeClass('myEventListHeader');
});
</script>

Next a little CSS to design our header ( this goes in your design studio custom css section )

TIP: If you know how to use the inspect option in your browser then if you right click on a module header you can just copy out the values then adjust the css below.

You can replace the text for the content if you like to read something else, just change the wording between " " in the content section

The background colour and the padding you can get these values from your Design Studio > Page > Modules > Title Padding and you can also copy out your modules heading background colour. You will notice I changed my first figure to 13px in the padding as it just wasn't deep enough to look the same as the other module headings. Again the font size, color and whether bold or not these are settings you can find in your design studio or just adjust the css until you get it looking the same as your others. Border radius again you may have to play around with to fit your site settings, if you do not have any curved corners on your modules then you can just remove that complete line.

The margin I will explain, you will notice two minus values at the start ( -20px ) these two figures are to get the header to move up by 20px and also stretch out to the right by 20px. The middle one which is normal is just the padding normal and the last one -20px will stretch the header to the left.

The 20px amount is the amount shown in your content padding next to the title padding. If we did not have the minus values then the header would not fill the width of the page.

/** Adding A Module Header To The UpComing Events List **/

.eventListPage.myEventListHeader .module-body:before{content:"All Upcoming Events";display:block;
    background-color: #00a6eb;
    border-radius: 7px 7px 0 0;
    padding: 13px 10px 10px 10px;
    margin: -20px -20px 20px -20px;
    font-size: 20px; color:white;font-weight:bold;
}

Enjoy

John :-)

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

Steve Ewing replied to Steve Ewing's discussion
CSS "transparent" background is now grey
"Oops, I didn't post the whole script. here is the rest:.groupList-group.matrix-itemFluid…"
7 hours ago
Steve Ewing posted a discussion
A while back I believe Bizz helped me out with some custom CSS code. Here it is:/*Fixes Groups size…
7 hours ago
Paul Corona replied to Paul Corona's discussion
Trial NING 3 Site Today
"update: two days in....summary: what a royal pain in the A** to get formating correct.  NING 3…"
21 hours ago
Paul Corona posted a discussion
First thought about the "migration"- horrible.  Amount of info that is not migrated is…
yesterday
Annabel Gregory replied to Annabel Gregory's discussion
Reset Password fails
"Yes, our problem continues, similarly! Lack of email notification when somebody posts something or…"
Wednesday
Marly replied to Annabel Gregory's discussion
Reset Password fails
"Just nercoing this because I've had this issue since July. My members don't receive any emails or…"
Wednesday
Aurora and Alex - Rosas † Negras are now friends
NC for Hire
Nov 29
⚡JFarrow⌁ shared their discussion on Facebook
Nov 29
Steve C replied to Bizz's discussion
Seeing as we have Albums for photos might as well change the look a bit
" That is CLEAN! Great job."
Nov 28
Alex - Rosas † Negras replied to Renato Gelforte's discussion
Date of articles
"The ning Team can't do your job, it's up to you to add the categories and enable the view counter…"
Nov 26
Renato Gelforte replied to Renato Gelforte's discussion
Date of articles
"Thanks a Lot Alex, but I repeat: the Ning support has already answer:The date of the articles is…"
Nov 23
Alex - Rosas † Negras replied to Bizz's discussion
Seeing as we have Albums for photos might as well change the look a bit
"it's strange in mine I don't see differences and they are centered, looking at your member on the…"
Nov 17
More…

Meanwhile, you can check our social media channels