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
Save 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
Once this is complete choose the Add at the bottom to add it to the page and it will now look like this
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.
Now the post has been pinned it will show up in the page instance you added the module to like this
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 )
So 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
Replies
thank you very much, I've been waiting for this
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
By the way I can't see your custom code section so couldn't check that
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 codesThis 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.
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.
-
1
-
2
-
3
of 3 Next