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

     

  • thank you so much !!!!!!!! amazing is perfect you are a genius

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

Suzie Nielsen replied to J.Ayvar's discussion
69 Tips for your Ning 3 thanks to John Bizley
"WOW! Thanks, John Bizley and thanks for posting all of these wonderful tips!
 "
5 hours ago
Ian knight liked Ana Massien's profile
19 hours ago
Garfield Archivist replied to ⚡JFarrow⌁'s discussion
Silly Simple Solutions #5: Inject Youtube Subscribe Button under Videos in Ning
"JFarrow, you're the best. Here is a pic to honor your generosity. I simply used div.left-panel on…"
yesterday
Ana Massien updated their profile photo
Saturday
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Could you share the code you added so I can take a look, ive sent a friend request in case you…"
Friday
Antonio Tarricone replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"yep, tried as per your tip and also double checked that the image was available at the link…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Well poo!  Sometimes it does not work.  I get "There are currently no logged-in members." and I…"
Friday
Cindy Dean Mccoy replied to Anastasia_Ning_Support's discussion
Members online feature
"Thank you! Thank you! Thank you!  We really need this feature."
Friday
J.Ayvar posted a discussion
 Some time ago Mr. John Bizley   kindly shared some amazing tips and every time I start a new…
Thursday
Bizz replied to Bizz's discussion
Tip: Change + Custom Achievement Badges: UPDATED 15-06-20 WITH CODE + CUSTOM IMAGES
"Did you copy the image into your file manager and then copy the link from the file manager for the…"
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"I should add that we love the ability to add additiona forums to support conferences."
Thursday
Diane Chojnowski commented on Karen Hardy's blog post Terrified about 3.0 upgrade
"We had no problem migrating to Ning 3.0 and are happy about enhanceed features. We had total…"
Thursday
More…

Meanwhile, you can check our social media channels