Boxed featured image slider for Activello WordPress teme

Hi,

I have two questions today :slight_smile:

  1. I would like to have a boxed slider instead of a full-screen slider. Can I achieve this by using a custom CSS or do I need to install a plug-in? If so, which one do you recommend? I like the style of Activello slider and would like to keep it, apart from the width.

  2. On the home page, instead of displaying 2 most recent posts full-width, followed by the rest of the posts in the 2-column layout, I would like to display all recent posts in 2-column layout. I would also like to have a “Read more” link under each post in the 2-column layout instead of […]. How can I achieve this?

Thank you for you help,
Olya

Hi, again!

Additionally, I now have the following issue with the slider: some of my posts have more than one category assigned to them. The slider displays up both category names and, as the result, post title and “Read more” link shift down, partially covering slider dots (see the attachment). How can this be solved?

Thank you,
Olya

Hi Olya,

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

1) I would like to have a boxed slider instead of a full-screen slider. Can I achieve this by using a custom CSS or do I need to install a plug-in? If so, which one do you recommend? I like the style of Activello slider and would like to keep it, apart from the width.

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

#content .flexslider {
    max-width: 1060px;
    margin: 0 auto;
}
2) On the home page, instead of displaying 2 most recent posts full-width, followed by the rest of the posts in the 2-column layout, I would like to display all recent posts in 2-column layout. I would also like to have a “Read more” link under each post in the 2-column layout instead of […]. How can I achieve this?

To achieve this try using the below CSS code.

@media (min-width: 768px){
.blog.home .page-1 article.post:first-child,
.blog.home .page-1 article.post:nth-child(2) {
    width: 50% !important;
    padding-right: 10px !important;    
}
.blog.home .page-1 article.post:first-child .post-inner-content,
.blog.home .page-1 article.post:nth-child(2) .post-inner-content {
  border-bottom: 0;
}
body.blog.home article.post:nth-child(odd) {
    clear: left !important;
    padding-right: 25px !important;
}
}

The Read More link already display for the post on home page as displayed here https://colorlib.com/activello/

Additionally, I now have the following issue with the slider: some of my posts have more than one category assigned to them. The slider displays up both category names and, as the result, post title and “Read more” link shift down, partially covering slider dots (see the attachment). How can this be solved?

You can try using the solution posted in the following reply to resolve it.

https://colorlibsupport.com/t/slideshow-display/#post-43119

Best Regards,
Movin

Hello, Movin!

Many thanks for you help.

Solutions 1 and 3 worked perfectly and fully resolved my issues. I am having a bit of trouble with solution 2, however.

On the home page, instead of displaying 2 most recent posts full-width, followed by the rest of the posts in the 2-column layout, I would like to display all recent posts in 2-column layout.

I paste your suggested code and the posts are now indeed displayed in a 2-column layout, however, one block is higher than the other - see “screenshot 1” attached. Where can I fix the height?

The Read More link already display for the post on home page as displayed here https://colorlib.com/activello/

“Read more” link is only displayed for the top-2 recent posts, and is not displayed for any older posts (see “screenshot 2” from my homepage). How can I make the link appear for all posts?

Thank you and have a great day,
Olya

I paste your suggested code and the posts are now indeed displayed in a 2-column layout, however, one block is higher than the other – see “screenshot 1” attached. Where can I fix the height?

You can resolve this issue by using the following CSS code replacing the previously provided code.

@media (min-width: 768px){
.blog.home .page-1 article.post:first-child,
.blog.home .page-1 article.post:nth-child(2) {
    width: 50% !important;
    padding-right: 10px !important;    
}
.blog.home .page-1 article.post:first-child .post-inner-content,
.blog.home .page-1 article.post:nth-child(2) .post-inner-content {
  border-bottom: 0;
  padding-top: 0;
}
body.blog.home article.post:nth-child(odd) {
    clear: left !important;
    padding-right: 25px !important;
}
}
“Read more” link is only displayed for the top-2 recent posts, and is not displayed for any older posts (see “screenshot 2” from my homepage). How can I make the link appear for all posts?

You can display them also by using the below CSS code.

body.blog.home article.post .read-more {
    display: block;
}

Movin,

Thank you, they are now of the same height and the “Read more” link is displayed for all.

However, the gap between two text columns & photos is different for the 1st and 2nd rows (see the attachment). Which element padding should I play around with?

Best,
Olya

You can add the padding to it using the following CSS code instead of above.

@media (min-width: 768px){
.blog.home .page-1 article.post:first-child {
    padding-right: 25px !important;
}
.blog.home .page-1 article.post:nth-child(2)  {
    padding-left: 25px !important;
}
.blog.home .page-1 article.post:first-child,
.blog.home .page-1 article.post:nth-child(2) {
    width: 50% !important;
}
.blog.home .page-1 article.post:first-child .post-inner-content,
.blog.home .page-1 article.post:nth-child(2) .post-inner-content {
  border-bottom: 0;
  padding-top: 0;
}
body.blog.home article.post:nth-child(odd) {
    clear: left !important;
    padding-right: 25px !important;
}
}

Movin,

Thank you, all is neat now! :slight_smile:

You are most welcome here :slight_smile: