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 :-)
Replies