Featured item link and icon features

[lore927]

Hi,

-1- I would like to lower the icon in featured item so that it overlaps the  image below. I need to replicate the appearance of a video thumbnail.

I tried to add this to the page css:

.feature-icon {

position: relative;

top: 40px;

}

but the icon won’t move, what propriety shall I edit in css?

-2- When I click on the image of featured item I would like that the linked page is displayed without a 1 second delay showing the picture in a lightbox. Is it possible to change that?

(If I click the text below the image or the icon, the page is opened without displaying the image, good!)

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, is it to play video posts? Because using Essential Grid plugin its very easy to make grids like that 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

hi, I really don’t want to use Essential grid. It looks very nice, there are a gazillion of options, but then all the test I did there is always something not totally right with it (YT parameters, lightobx settings)…plus it is heavy.

The page would be really great using “featured item” it looks and works great minus the 2 issues I pointed out in the question, and I would be finally done with that gallery 🙂

Can you pls suggest what CSS I need to edit in the page, if possible?

[Laura]

Hello, sure i can help you with the css , can you share access? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

can you please include the css code for the page here instead? It might be useful for other people after me. And I need to complete the project. Thank you very much 🙂

[lore927]

any update, please?

[Laura]

Hello, i can’t see the website that is why i asked for access 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

The question is about “featured item”, it has nothing to do with my website in particular.
https://seventhqueen.com/themes/kleo/feature-items/

Sorry to say, but as much as I love Kleo and this is the 3rd licence I bought, you are bouncing messages for 5 days, not providing useful support to a specific CSS question. If you are not able to help: just say so. 🙁

[Laura]

Hello, at our featured items there is no picture with the play button above, i need to see it to create a css code that adjust to it, what you sent me ( at the first post) is a screenshot of your website? our featured items page does not show that.

What i am trying to say that i need to see what you sent at the first post, so i can work with it to create the css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

This reply has been set as private.

[Laura]

Hello, please add this to style.css of child theme or at Appearance > Edit

COPY CODE

span.feature-icon.el-appear {
    background: transparent !important;
    margin-top: 19% !important;
    position: absolute !important;
    margin-left: 30%;
}
.icon-youtube-play:before {
    content: '\e96f';
    font-size: 40px !important;
}
.icon-play-circled:before {
    content: '\e8c5';
    font-size: 40px !important;
}
.icon-play-round-circled:before {
    content: '\e8c6';
    font-size: 40px !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

thank you very much! I added it to the page CSS, as I use featured item elsewhere in the “regular way” it is not working perfectly, but now I can see which are the propriety you tweaked and try it out 🙂

I also was wondering if:

-2- When I click on the image of featured item I would like that the linked page is displayed without a 1 second delay showing the picture in a lightbox. Is it possible to change that?

(If I click the text below the image or the icon, the page is opened without displaying the image, good!)

Any suggestion for that one?

[Laura]

Hello, about that one, it would require more changes than just css so i can’t do much about that sadly

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[lore927]

Thanks, for anybody else that would like to recreate a youtube-like gallery using featured item (fast loading and still fancy) this is precisely the CSS I used:

span.feature-icon.el-appear {
background: transparent !important;
margin-top: 21% !important;
margin-left: 42% !important;
position: absolute !important;
}

.icon-youtube-play:before {
content: ‘\e96f’;
font-size: 60px !important;
}

-Laura: can you pls suggest which PHP functions if not CSS is in charge of the 1″ image preview? My priority is loading video gallery fast, which it does now. if I can get rid of that lightbox preview would be super cool. 🙂

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

I’ve added this CSS instead.

COPY CODE

.feature-text a img {
    display: list-item;
}

.kleo-block.feature-item.list-el-animated.big-icons-size.center-icons.kleo-open-href.start-animation {
    position: relative !important;
}

.icon-youtube-play:before {position:absolute;width: 100%;height: 100%;top: 30%;font-size:50px;}

Adjust it for your needs and add it to rest of the pages where you need.

https://www.backupcircle.com/video_backup/

related to this

-Laura: can you pls suggest which PHP functions if not CSS is in charge of the 1″ image preview? My priority is loading video gallery fast, which it does now. if I can get rid of that lightbox preview would be super cool. ?

Can you show me a screenshot or a video about the image preview and the lightbox preview, please ?

Cheers
R

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lore927]

This reply has been set as private.

[lore927]

This reply has been set as private.

[Radu]

Hi,

Please try to use this css instead for the new page that you have provided. I’m not sure if it was cache and or CloudFlare the problem, it could be.

COPY CODE

.kleo-block.feature-item .feature-text {
    position: relative !important;
}

.kleo-block.feature-item span.feature-icon {
    position:absolute !important;
    left: 50% !important;
    top: 50% !important;
    z-index:111;
    background:transparent !important;
    margin: -50px 0 0 -25px !important;
}

.kleo-block.feature-item.list-el-animated.big-icons-size.center-icons.kleo-open-href.start-animation {
    position: relative;
}

@media(max-width:991px){


    .kleo-block.feature-item .feature-text {
        position: relative !important;
    }

    .kleo-block.feature-item span.feature-icon {
        position:absolute !important;
        left: 50% !important;
        top: 45% !important;
        z-index:111;
        background:transparent !important;
        margin: -50px 0 0 -35px !important;
    }

    .kleo-block.feature-item.list-el-animated.big-icons-size.center-icons.kleo-open-href.start-animation {
        position: relative;
    }
    
}

This is how will look

3. I cannot see the pop-up looking at the https://www.backupcircle.com/video_backup-3/

4. I’ve removed the css from visual composer concerning the styling of the icons over videos and I’ve replaced with mine… in the previous post.

It should be ok now.

Let me know

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lore927]

This reply has been set as private.

[Radu]

Hi,

I’ve figured out, there was a link over the img src, see the next screenshot you will figure out, I’ve done only for the first featured item, do for the rest, by removing the a href tag

COPY CODE

<A href="http://image.com/img.jpg"><img src="http://image.com/img.jpg"></a>

becomes

COPY CODE

<img src="http://image.com/img.jpg">

That’s it

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[lore927]

thank you! Don’t know how I missed to notice that href.

[Radu]

No problem

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts