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

As you may or may not be aware the cover photos for the groups headers are cropped to a height of 160px so here is a bit of code to remove the crop so you can have a bigger sized picture, also some css which helps make them responsive.

First we add some code to our Social Site Builder > Custom Code > End Of Page to remove the crop

<script>
// Remove group header crop
x$(document).ready(function() {
x$('.groupHeader.groupHeader-coverPhoto').each(function() {
var removegroupHeaderCrop = x$(this).css('background-image');
x$(this).css('background-image', removegroupHeaderCrop.replace(/\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));
});
});
</script>

Next we add some css to our design studio custom css, the Padding Bottom of 25% is what controls the height so you can adjust that to smaller or bigger depending on how big you want them

.groupHeader-coverPhoto {
padding-bottom: 25%!important;
height: 0!important;
position:relative
}

Extra tip

If you only want to change a particular group you can do so just by adding the page name at the start, so for instance my groups are called Groups and the page I want to change is Demo so the could would look like this and the part in bold is the part added

.page-groups-demo .groupHeader-coverPhoto {
padding-bottom: 25%!important;
height: 0!important;
position:relative
}

 

Hope you find it useful

Bizz :-)

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 –

Replies

  • Thank you very much I have applied it to my website and now it is much better

  • NC for Hire

    Wow..  cool idea!   I may try this.     Wonder if the same could be done for the funny crop of member profiles...thanks Bizz

     

This reply was deleted.
 

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 ⚡JFarrow⌁'s discussion
Ning3: How to Create a Combined Feed of All Forums Inside Groups
"i am glad you found it useful.  how is your migration coming along?  happy 4th buddy!"
13 hours ago
⚡JFarrow⌁ shared their discussion on Facebook
13 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
TIP: How to Automagically Change Text Locations into Maps
"How many of you are using this?"
13 hours ago
⚡JFarrow⌁ replied to ⚡JFarrow⌁'s discussion
Amazing Tool to Automate Your Content Discovery, RSS and Sharing Community Content
"Tons of new features added to RSSGround this week.. too many to list.."
13 hours ago
⚡JFarrow⌁ replied to David Shaw's discussion
Wiki
"Here's an idea which piggybacks on Alex's suggestion.   You could build a spreadsheet driven app us…"
13 hours ago
Kinga Incze replied to Anastasia_Ning_Support's discussion
Activity feed update
"It's great!
The Discussion group changes are not displayed in the feed, why it that?
 "
17 hours ago
David Shaw replied to David Shaw's discussion
Wiki
"Hi Alex,
Thanks for your reply. I considered the option you presented - a google sheet or google do…"
18 hours ago
Kathleen (SunKat) and Jonathan Peebles are now friends
18 hours ago
Oriel updated their profile photo
yesterday
Oriel updated their profile
yesterday
Oriel and Jonathan Peebles are now friends
yesterday
Jonathan Peebles and Tavolo Ornitologico are now friends
yesterday
More…

Meanwhile, you can check our social media channels