How to have Pinned Post feature?

Have you tried marking the posts as ‘sticky’ in Dashboard>Posts>Quick Edit?

You can then style them using something like:

.sticky .tc-content {
  background-color:  blue;
}

Thats excellent! ??

I was not aware of that… !

Do I have to create a Category called sticky?

Nope. Just use the Category’s that you want to use. The QE sticky will add a class=”sticky” which gives you a selector to style.

What do you mean by ‘QE’?

Do I need to add the word “STICKY’ in the Sticky post Title?

And If I want a slide show of all my sticky posts, then? Can I display my sticky posts like that?

Sorry to confuse you.

QE=Quick Edit

By marking the post as Sticky, there’s nothing more to do. Certainly no need to add the word to the Post Title. As I said above, you may want to style the post in some way to make it stand out eg using a background-color, bold fonts etc

Having a slideshow of sticky posts – start a new topic. I don’t see a way to do that but someone else might help.

Please mark this as [resolved] if you’re happy it’s done.

In my WordPress Post Panel there is no option called Sticky under Quick edit.

Is that a plugin which adds this option to Quick edit?

Yes Found the option. ?? Finally.

But If I make a post sticky it only fix a background to the text and the featured image is left alone in its circle.

How do I fix a background to the entire excerpt?
One more question: Can I show a “Pin” icon just before this sticky post to style it?

I am sorry for so many questions.

Do you have a link to your site?

Try this:

.post.sticky  {background-color:  blue;}
.post .round-div {border-color:blue;}
.featurette-divider {display:none;}

Change blue to the color you want.

rdell: https://www.rhododendron.in/

Changing the icon is explained in this snippet

.post .round-div {border-color:blue;} Causes a huge problem

It fixes up a back ground to all the round-div on the page.

And when I use `.post.sticky {background-color: blue;}
.featurette-divider {display:none;}`

it doesnt fix a background to round-div

Either way it looks messy.

Another thing I need to ask. I have gone through the snippet you provided.
But if I place a custom icon with this snippet it will fix an icon to all my posts on the specific page. How do I display a custom icon before the sticky post only.

Thanks in advance. And sorry for asking so many questions at a time.

Paul, the class .sticky is what you’re looking for to differentiate.
rdell told you.
So round-div problem?

.post.sticky .round-div {border-color:blue;}

again about the icon:

.post.sticky .format-icon:before {
     content='HERE_THE_GENERICON_FONT_CODE';
}

Aha! thats where it differentiate. Gotcha !

Thanks a lot! ?? I’ll implement and let you guys know how it goes.

Everything is working fine except the entypo icons.

I have used this

.post.sticky .format-icon:before {
    content: "\1F517"
    font-size: 3em;
    line-height: 0;
    position: relative;
    top: 14px;
}
.post.sticky .format-icon:before {
    font-family: 'entypo';
    font-size: 1.2em;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    opacity: 0.2;
    padding-right: 10px;
    position: relative;
    text-transform: none;
    top: 8px;
}