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

Here is a feature that will allow you to add pinned posts to your site,  you can add them anywhere you want as it will be just like adding any other module you add from the add content option of a page. Only admins will be able to choose and add the pinned posts they want to display.

Here is a page I added to show how they all look : PINNED POST DEMOS

Pinned posts are available for all pages that allow categories. Groups pages can have them as well but you cannot display pinned pages outside of the group on the main site but only within it's group.

You can add the modules at anytime ready for pinned posts as the modules will only show up if they have pinned posts, so you can add them ready to use then it's quick and easy to just add the pinned posts to them.

To setup is easy to do, once all the code is added all you will need to do is add the modules then choose the posts you want to pin.

HOW DO YOU PIN A POST ? : As admins we can edit any post so to add a post we simply got to the post, choose edit then add the pinnedPost category to it.

CAN MEMBERS SEE THIS CATEGORY ? : No only admins are able to add posts the category as they only show for them, also only admins will see the pinned posts category in the link nav bar. The modules with the posts of course are vsible to all.

Ok so let's get started

CUSTOM CODE

First of all we just need to add a little custom code so to do that we add this block of code below to : Social Site Manager > Custom Code > End Of Page section

 

<script>
// BY BIZZ 190222 VER1
// Pin by category option
x$(document).ready(function(){
/* Remove catergory from byline*/
if (!x$("body").hasClass("isAdmin")) {
x$('.entry-byline a[href$="pinnedContent"]').remove(); //Remove link from byline for category
}
/* Remove Admin Cat for non admins in category list */
if (!x$("body").hasClass("isAdmin")) {
x$('.categorySelectionList > optgroup:nth-child(1) > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
if (!x$("body").hasClass("isAdmin")) {
x$('.categorySelectionList > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
/* Remove Admin Cat for non admins in mobile select menu */
if (!x$("body").hasClass("isAdmin")) {
x$('select.subnav > option').filter(function(){
return x$.trim(x$(this).text())== 'pinnedContent'}).remove(); // remove pinnedContent cat
}
/* Remove options in nav if NOT admin */
if (!x$("body").hasClass("isAdmin")) {
x$('ul.subnav li a[href$="pinnedContent"]').remove(); // Remove pinnedContent tab from page nav
x$('ul.subnav li:empty').remove(); // Remove the empty list space
}
/* Hide Categories Box if none in it but show the pinned option for admins */
if (x$('.categorySelectionList > optgroup:nth-child(1) > option').length<= 0){
x$('.entryEditPage-categoryContainer').remove();
}
x$('.module-name a[href$="pinnedContent"]').closest('.grid-frame').addClass('pinnedPost-container');
x$('.pinnedPost-container .module-body').closest('.pinnedPost-container').addClass('pinned-hasContent');
x$('.photoDetailPage').closest('.central-content').addClass('is-photoDetailPage');
x$('.videoDetailPage').closest('.central-content').addClass('is-videoDetailPage');
x$('.blogDetailPage').closest('.central-content').addClass('is-blogDetailPage');
x$('.discussionDetailPage').closest('.central-content').addClass('is-forumDetailPage');
x$('.articleDetailPage').closest('.central-content').addClass('is-articleDetailPage');
x$('.eventDetailPage').closest('.central-content').addClass('is-eventDetailPage');
});
</script>

 

NEXT WE ADD CSS

We add this to : Design Studio > Custom CSS

/**** PINNED POSTS BY BIZZ 190222 VER1 ***/
.categorySelectionList{
min-height:25vh;
}
/*Hides the module if nothing is in it*/
.pinnedPost-container:not(.pinnedPost-container.pinned-hasContent){
display:none;
}
.pinnedPost-container .section_header{
margin-bottom:4px;
}
.pinnedPost-container .entry-headline .media-frame{
display:flex;
flex-wrap:wrap;
}
.pinnedPost-container .entry-title{
display:flex;
flex-wrap:wrap;
width:100%;
}
@media only screen and (max-width:979px){
.pinnedPost-container .avatar-frame{
margin-bottom:6px;
}
.pinnedPost-container .media-frame > .media-body{
overflow:visible!important;
}
}
.pinnedPost-container .module-name{
margin:6px!important;
}
.pinnedPost-container .module-name a{
pointer-events:none;
}
.pinnedPost-container .entry-readMore{
margin-top: -13px;
text-align: right;
padding: 10px 10px 0px 0px;
}
.pinnedPost-container .entry:not(:last-of-type),
.pinnedPost-container .media-frame:not(:last-of-type){
margin-bottom:10px;
border-bottom: dashed 1px lightgray;
}
.column-wide .section-eventBundle.pinnedPost-container .entry{
border-bottom:none;
}
.pinnedPost-container .module-body{
border-top: solid 2px rgba(227, 227, 227, 0.56);
padding:5px 0px 5px 0px;
}
.pinnedPost-container .entry-content{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; /* number of lines to show */
-webkit-box-orient: vertical;
}
.pinnedPost-container .media-frame{
margin-top:15px;
}

.pinnedPost-container .matrix{
margin-left:0;
margin-right:0;
}
.pinnedPost-container .matrix .matrix-itemFluid{
position:relative;
}

.is-eventDetailPage .pinnedPost-container,
.is-photoDetailPage .pinnedPost-container,
.is-videoDetailPage .pinnedPost-container,
.is-forumDetailPage .pinnedPost-container,
.is-blogDetailPage .pinnedPost-container,
.pinnedPost-container .videoListPage-metaElapsed,
.pinnedPost-container .entry-footnote,
.pinnedPost-container .entry-commentsCount,
.pinnedPost-container .module-footer,
.pinnedPost-container .entry-tags,
.pinnedPost-container .entry-byline,
.pinnedPost-container .entry-content img,
.pinnedPost-container .image-contain{
display:none!important;
}
.section-videoBundle.pinnedPost-container .module-footer{
display:none;
}
.section-videoBundle.pinnedPost-container .videoListPage-metadata{
display: none;
}
.column-narrow .section-videoBundle.pinnedPost-container .videoListPage-metadata .videoListPage-row{
display:none;
}
.column-narrow .section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a {
font-size:12px;
}

@media only screen and (min-width:979px){
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata{
display: flex;
position:absolute;
top:0;
left:0;
right:0;
background-color:rgba(0,0,0,0.5);
padding:0;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a {
white-space:unset;
overflow:hidden;
display:flex;
background-color:rgba(0,0,0,0.6);
padding:6px;
color:cyan!important;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata a{
color:lightgray;
padding:4px;
}
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metadata a:hover,
.section-videoBundle.pinnedPost-container .matrix-item:hover .videoListPage-metaTitle a:hover{
color:orange!important;
}
.section-groupHub.pinnedPost-container .matrix,
.section-photoBundle.pinnedPost-container .matrix,
.section-videoBundle.pinnedPost-container .video_list{
padding: 0px 0px 10px 0px;
}
.column-wide .section-eventBundle.pinnedPost-container .module-body{
display: inline-flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
flex-wrap:nowrap!important;
justify-content:left;
}
.column-wide .section-eventBundle.pinnedPost-container .entry{
flex:0 0 39%!important;
-webkit-flex: 0 0 39%!important;
}
}

.section-photoBundle.pinnedPost-container .matrix-media-4-3{
box-shadow:none;
background-size:cover;
}
.section-groupHub.pinnedPost-container .matrix,
.section-photoBundle.pinnedPost-container .matrix,
.section-videoBundle.pinnedPost-container .video_list{
display: inline-flex;
overflow-x: auto;
overscroll-behavior-inline: contain;
flex-wrap:nowrap!important;
justify-content:left;
}
.section-groupHub.pinnedPost-container .matrix .matrix-itemFluid,
.section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 39%!important;
-webkit-flex: 0 0 39%!important;
}
.column-narrow .section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.column-narrow .section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 47%!important;
-webkit-flex: 0 0 47%!important;
}
/** Make items bigger under this size for video and photos and groups **/
@media only screen and (max-width:979px){
.section-groupHub.pinnedPost-container .matrix .matrix-itemFluid,
.section-photoBundle.pinnedPost-container .matrix .matrix-itemFluid,
.section-videoBundle.pinnedPost-container .videoListPage .matrix-itemFluid {
flex:0 0 83%!important;
-webkit-flex: 0 0 83%!important;
}
}


/**Pinned Events remove the categories and who added it but leave the description **/
.section-eventBundle.pinnedPost-container .eventPage-detail + .eventPage-detail{
display:none;
}
.section-groupHub.pinnedPost-container .groupHub-groupTitleContainer {
max-height:2em;
min-height:2em;
}
.section-groupHub.pinnedPost-container .groupHub-groupTitle > span {
font-size:1.0em;
}
.isAdmin .groupEditPage .module-body > div:nth-child(1) > div:nth-child(1) > div:nth-child(5)::after,
.isAdmin .entryEditPage-categoryContainer::after{
content:"Admin when adding or removing the pinnedContent category remember to hold down the ctrl key when selecting so you do not remove any other categories if any other categories exist";
font-weight: bold;
font-size:1.1em;
display: block;
padding: 10px 5px 10px 5px;
background-color: red;
color: white;
margin-top: 10px;
line-height:1.2;
margin:10px;
width:100%;
max-width:60%;
}

 

PAGES SET UP

To be able to use the pinned post we need to add the category into the pages we want to use for pinned post, this is easy to do and it's just like adding any other category to a page although this category must be added exactly as shown

ADD THE CATEGORY

NOTE IMPORTANT: If you are using the Contributors must select a category the there must be at least one other category in the Categories List unless it's a page that only admins can add new post to.

First go to your Social Site Manager and from the pages select which you want to add the category to Like a forum etc. Next go down to the categories box and add the pinned category like this:    pinnedContent

10137357301?profile=RESIZE_710xSave the page and now the category has been added.

How To Add The Pinned Modules To A Page

Ok so this is much the same as adding any other module from a page using the add content option.

NOTE: A name MUST be added for the title

10137363292?profile=RESIZE_710x

Once this is complete choose the Add at the bottom to add it to the page and it will now look like this

10137375482?profile=RESIZE_584x

How to pin posts

Now we have the module added we can now at anytime add or remove the post we want to pin simply by going to the post > choose edit > then select the pinnedContent category.

NOTE: When adding or removing the category on a page you MUST hold down the ctrl key when selecting so as to not remove any other categories chosen by the person who created the post in the first place.

10137412061?profile=RESIZE_710x

Now the post has been pinned it will show up in the page instance you added the module to like this

10137419083?profile=RESIZE_710x

That's it all done

BONUS TIP

As the category for pinned content only shows for admins in the byline of the post ( the part which says post by or Started by ) it can leave an 'and' at the end with nothing else after it so we can remove this by jumping into our language editor to remove the 'and' and replace it with a comma.

So go to your Social Site Manager and choose Language Editor then choose edit next to your selected language. In the search box search for

Posted By and Started By

This will then show like this ( this is the one searched for Posted By )

10137422498?profile=RESIZE_710xSo those two little ' and ' words we are going to replace with a comma so remove those ( don't worry the langauge editor saves the original wording on the left ) so the page now looks like this then SAVE PAGE

10137423482?profile=RESIZE_710x

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

  • NC for Hire

    thank you very much, I've been waiting for this

  • NC for Hire

    10137881096?profile=RESIZE_930x 


    10137881687?profile=RESIZE_710x

    10137881873?profile=RESIZE_584x

    from pinned, it doesn't appear to me when I create the table
    • Don't think you have added it all correctly. I can't find the css in your design studio anywhere. You have added it somewhere but you haven't added it correctly as there is code showing up at the bottom of the page. Looks like you didn't add the module to the videos page either. I added the module as per instructions and then added a video to the pinnedContent category and it shows up but because your css is not added correctly it's not showing as it should.

      HERE IS THE ISSUE AT THE BOTTOM OF THE PAGE

      10137946856?profile=RESIZE_584xHERE IS THE VIDEO ADDED TO THE VIDEO PAGE PINNED MODULE I ADDED

      10137947057?profile=RESIZE_930x

      • By the way I can't see your custom code section so couldn't check that

         

        • NC for Hire

          10138033101?profile=RESIZE_400x

          I had everything in the custom code below, now the css are Design Studio> Custom CSS to see if the writing at the bottom went away but remained this way, now I send you a message at least see the codes
          • This is probably coming from another one of your link css pages I expect.

            • Looked at your custom code and you had errors in your own main code, you had random brackets outside of scripts you added.

          • This was to do with errors in your own custom code which I fixed. Also you didn't add your link to the main scrip correctly as you left the Script tags at the top and the bottom.

            When you linked to a script you do not have those in the main code as you are adding them on the link itself. I uploaded a new script into your file manager then replaced the link so it goes to the right one.

        • NC for Hire

          Is it possible to have pinned messages in the main one?

          • You can add the modules anywhere you want, for instance you want to add pinned videos to the main page then just go to your social site manager > choose what page you want to add it to > select add content > then select the options of what you want to add

            Again all this is in the main instructions I added.

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

LEO Mobile App Builder updated their profile
Tuesday
Aase Lillian replied to Aase Lillian's discussion
Community - activity page
"Ok, thank you. Please send me details as I have no idea on how to do it. "
Mar 19
Aase Lillian and ⚡JFarrow⌁ are now friends
NC for Hire
Mar 19
⚡JFarrow⌁ updated their profile photo
Mar 18
⚡JFarrow⌁ replied to Aase Lillian's discussion
Community - activity page
"Yes you can add emojis to your community pretty much anywhere you like.
If you need some help…"
Mar 18
Aase Lillian updated their profile
Mar 18
Aase Lillian posted a discussion
Hi all. Is it possible to add emojis to the community? I also wish the activity page to include…
Mar 18
Donna MacShoe updated their profile photo
Mar 6
Adul Rodri is now friends with ANGE.L LUAR and Margarida Maria Madruga
Feb 14
Shweta Sharma updated their profile
Jan 26
catherine martin updated their profile
Jan 16
Donna MacShoe updated their profile photo
Jan 15
More…

Meanwhile, you can check our social media channels