One and two column posts on the homepage

Sparkling
1

Hi, Movin! I’m trying to customize the home of sparkling theme similar to activello with the css code below, plus pages 2,3,4,5 … repeat the effect.

Please help me.

blog.home #page article.post:nth-of-type(1) .post-inner-content ,
.blog.home #page article.post:nth-of-type(2) .post-inner-content {
    border-bottom: 1px solid #dedede;
        padding: 50px 0;
    margin-bottom: 30px;
}

.blog article.post:nth-child(odd){
        clear: left;
        padding-right: 25px;
    }
    .blog article.post:nth-child(even){
        padding-left: 25px;
        padding-right: 0;
    }
2

Hi, Movin
I hope you’re fine today. I’m sorry for my english!

I installed the Activello theme, but I still prefer the Sparkling theme menu and heading. It is possible ? How do I do this?

Thank you!

3

Hi @vicente,

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

Hi, Movin! I’m trying to customize the home of sparkling theme similar to activello with the css code below, plus pages 2,3,4,5 … repeat the effect.

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

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

@media (min-width: 768px) {
    .article-container {
        overflow: hidden;
    }
    .blog article.post {
        width: 50%;
        margin: 0;
        padding-right: 10px;
        display: inline-block;
        float: left;
    }
    .blog article.post .read-more, .blog article.post .entry-footer {
        display: none;
    }
    .blog article.post .post-inner-content {
        border: 0;
        padding: 15px;
    }
    .blog .site-main article.post:first-child, .blog .site-main article.post:nth-child(2) {
        width: 100%;
        padding: 0!important;
    }
    .blog .site-main article.post:first-child .post-inner-content, .blog .site-main article.post:nth-child(2) .post-inner-content {
        border-bottom: 1px solid #dedede;
    }
    .blog .site-main article.post:first-child .post-inner-content {
        padding: 50px;
    }
    .blog .site-main article.post:nth-child(2) .post-inner-content {
        padding: 50px;
        margin-bottom: 30px;
    }
    .blog .site-main article.post:first-child .read-more, .blog .site-main article.post:nth-child(2) .read-more, 
    .blog .site-main article.post:first-child .entry-footer, .blog .site-main article.post:nth-child(2) .entry-footer {
        display: block;
    }
    .blog article.post:nth-child(odd) {
        clear: left;
        padding-right: 25px;
    }
    .blog article.post:nth-child(even) {
        padding-left: 25px;
        padding-right: 0;
    }
    nav.navigation.pagination {
    clear: both;
}
}

To help us keep support thread separates could you please create new thread for each of your other questions here Sparkling - Colorlib Support Forum instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Best Regards,
Movin

4

Hello, Movin

I wish the effect did not repeat on page pagination.

5

Then just us the below CSS code instead of above.


@media (min-width: 768px) {
    .article-container {
        overflow: hidden;
    }
    .blog:not(.paged) article.post {
      
        width: 50%;
        margin: 0;
        padding-right: 10px;
        display: inline-block;
        float: left;
    }
    .blog:not(.paged) article.post .read-more, .blog:not(.paged) article.post .entry-footer {
        display: none;
    }
    .blog:not(.paged) article.post .post-inner-content {
        border: 0;
        padding: 15px;
    }
    .blog:not(.paged) .site-main article.post:first-child, .blog:not(.paged) .site-main article.post:nth-child(2) {
        width: 100%;
        padding: 0!important;
    }
    .blog:not(.paged) .site-main article.post:first-child .post-inner-content, .blog:not(.paged) .site-main article.post:nth-child(2) .post-inner-content {
        border-bottom: 1px solid #dedede;
    }
    .blog:not(.paged) .site-main article.post:first-child .post-inner-content {
        padding: 50px;
    }
    .blog:not(.paged) .site-main article.post:nth-child(2) .post-inner-content {
        padding: 50px;
        margin-bottom: 30px;
    }
    .blog:not(.paged) .site-main article.post:first-child .read-more, .blog:not(.paged) .site-main article.post:nth-child(2) .read-more, 
    .blog:not(.paged) .site-main article.post:first-child .entry-footer, .blog:not(.paged) .site-main article.post:nth-child(2) .entry-footer {
        display: block;
    }
    .blog:not(.paged) article.post:nth-child(odd) {
        clear: left;
        padding-right: 25px;
    }
    .blog:not(.paged) article.post:nth-child(even) {
        padding-left: 25px;
        padding-right: 0;
    }
    nav.navigation.pagination {
    clear: both;
}
}
6

Perfect! It worked!

Just one more request, Movin! It is possible to remove the sidebar from the number pagination?

7

You are most welcome here :slight_smile:

To help us keep support thread separates could you please create new thread for each of your other questions here https://colorlibsupport.com/c/sparkling/ instead of asking them in your single thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

8

Ok!

Thank you very much for your help!

9

You are always welcome here :slight_smile: