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

  • All I can find is adding is a group image.  Where is it you can add a group cover?  Is ti the huge white space under the group image?

    • Hi Cindy,

      Please, make sure that this checkbox is enabled for the Group Hub in your Social Site Manager - Site & Pages
      Screenshot - https://take.ms/fv7I0

      Then, you'd be able to add a cover photo to your group while editing the group - https://take.ms/DtVgG

      Hope this helps!

      Kind regards,
      The Ning Team

      https://monosnap.com/file/MqiPr4sUeJTBx4gEBftc20iT3CMEuU
      Monosnap provides secure content management and scalable solutions for your business.
      • Thank you! Thank you! Thank you!  I knew that dead space at the top was for something.  I just could not figure out for what.  Now I can have pretty covers on my groups!

         

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

Bizz replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Friends Module
"Sometimes this happens because it's still in the cache of the browser, if you go to that friends…"
55 minutes ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ shared their discussion on Facebook
9 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion Friends Module
9 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion
Friends module is not updating when a friend is removed or suspended from the network. In the admin…
9 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ shared their discussion on Facebook
17 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ liked ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion Groups on Creators
17 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion
I made a group for my themes, but its still in pending approval can someone please allow or…
17 hours ago
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted photos in Everyday Themes
Wednesday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ posted a discussion in Everyday Themes
Specify what themes you are looking for and get themes for free.Let us help you find a graphic or…
Wednesday
Rosas † Negras posted a discussion
 textarea.input-full { border: 2px groove #FFF;padding:border: 0px solid rgba(100, 100, 100, 1);…
Tuesday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I got my buttons coding going and changed on most layouts now. I like it when things glow lol "
Tuesday
⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜ replied to ⚜ 𝔏𝔲𝔠𝔦𝔞 𝔖𝔱 𝔊𝔢𝔯𝔪𝔞𝔦𝔫𝔢 ⚜'s discussion
Need help with CSS and HTML / CSS Code for layout
"I thought you may be an NC for Hire as well? My bad. You could probably be one tho if you wanted to…"
Tuesday
More…

Meanwhile, you can check our social media channels