Number of sticky posts displayed on front page

Activello
1

When i can change number of sticky posts displayed on front page or when i can change number of posts which have expanded format on front page? By defalut its only 2.

2

Hi @jakozo,

I hope you are well today and thank you for your questions.

When i can change number of sticky posts displayed on front page

By default all sticky posts are displayed on front page because this is the reason the posts are made sticky but if you want to control number of sticky posts displayed on front page then you have to develop custom code to achieve it.

or when i can change number of posts which have expanded format on front page? By defalut its only

We can change it by developing custom CSS code.

Could you please tell me how many number of posts you want to display as expanded so that i can help you to achieve it?

Kind Regards,
Movin

3

I just want to attach this class:

.single-featured {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
display: block;
margin: auto;
width: 60%;
height: auto;
}

only to first two posts on my front page. And other post attach to:

.single-featured2 {
-webkit-transition: opacity 0.3s linear;
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
display: block;
margin: auto;
width: 100%;
height: auto;
}

I was trying nth-of-type selector but it doesnt work.

4
I just want to attach this class:

only to first two posts on my front page. And other post attach to:

Why do you want to do that?

Could you please tell me how many number of posts you want to display as expanded so that i can help you to achieve it?

5

I want to have only two first posts expanded with .single-featured width: 60%; and the rest posts with .single-featured width:100%.

6

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Activello Options -> Other -> Custom CSS

@media (min-width: 768px) {
    body.blog.home article.post {
        width: 100%;
        clear: none;
        float: none;
        border-bottom: 1px solid #dedede;
        margin-top: 50px;
    }
    body.blog.home .page-1 article.post .post-inner-content{
      padding: 0 0 50px;
    }
    body.blog.home .page-1 article.post .read-more{
       display: block;
    }
    body.blog.home .page-1 article.post:first-child, 
    body.blog.home .page-1 article.post:nth-child(2) {
        width: 50%;
        float: left;
        margin-top: 0;
    }
    body.blog.home .page-1 article.post:first-child{
      padding-right: 25px !important;
    }
    body.blog.home .page-1 article.post:nth-child(2) {
      padding-left: 25px !important; 
    }
    body.blog.home .page-1 article.post:first-child .post-inner-content, body.blog.home .page-1 article.post:nth-child(2) .post-inner-content{
        border-bottom: 0;
    }
    body.blog.home .page-1 article.post:nth-child(2) .post-inner-content,
    body.blog.home .page-1 article.post:first-child .post-inner-content{
        padding: 0;
    }

}