[Resolved] Layout Design Like SiteLibrary (Charge)

Home Forums Support Layout Design Like SiteLibrary (Charge)

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1473895
    sanu kumar

    Hey

    Can I create the same like this: https://www.loom.com/share/15bca21675164b4e9ba333b76b28b6fe
    from Site Library.

    I want to give this in an archive section.

    #1473907
    Elvin
    Staff
    Customer Support

    Yes you can definitely replicate this.

    Can you link us to the site you’re trying to apply this?

    Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1473911
    sanu kumar
    #1473988
    Elvin
    Staff
    Customer Support

    Can you specify which part of the site do you want this applied?

    If its on the “Most recommended posts”, you can try this CSS code:

    article.elementor-post.elementor-grid-item {
        background-color: rgba(0,0,0,0.02);
        transform: scale(1);
        box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
        transition: all 0.1s ease-in;
    }
    
    article.elementor-post.elementor-grid-item:hover {
        transform: scale(1.01);
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1473992
    sanu kumar

    I want to apply in the archive section like someone clicks on my blogging category, it shows layout like that here: on my blog page https://www.masteryblogging.com/blog/.

    #1473995
    Elvin
    Staff
    Customer Support

    Try this out.

    .uagb-block-4849a8de .uagb-post__items article {
        background-color: rgba(0,0,0,0.02);
        transform: scale(1);
        box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
        transition: all 0.1s ease-in;
    }
    
    .uagb-block-4849a8de .uagb-post__items article:hover {
        transform: scale(1.01);
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1474004
    Leo
    Staff
    Customer Support

    Hey Sanu,

    Can you check with the plugin support (Elementor and UAGB) if Elvin’s code above doesn’t work?

    Please be mindful that the questions here should be directly related to the GeneratePress theme or GP Premium plugin:
    https://www.screencast.com/t/W7vOHMRsn

    We appreciate your understanding πŸ™‚

    #1475609
    sanu kumar

    Hmmm, my bad.

    I didn’t check when I posted a question.

    I have removed UAGB and elementor, now is there any chance to make like this: https://www.loom.com/share/15bca21675164b4e9ba333b76b28b6fe

    I found it from site-library of GP.

    I want to achieve it only on Archive Section like, in this page: https://www.masteryblogging.com/

    or if someone searches or go to my category wise page….can we make it?

    #1475616
    Leo
    Staff
    Customer Support

    The content from that page is all coming from Elementor.

    Am I missing something?

    #1475639
    sanu kumar

    ohh again sorry, it was the homepage….πŸ™

    Here it is: https://www.masteryblogging.com/blogging/

    This link is only of Blogging category,,,I want in all category pages (don’t know archive page and category both are same)

    #1475669
    Elvin
    Staff
    Customer Support

    Hi,

    You can try this out.

    .generate-columns-container > article > .inside-article {
        background-color: rgba(0,0,0,0.02);
        transform: scale(1);
        box-shadow: 0px 0px 0px 1px rgba(214,218,222,1);
        transition: all 0.1s ease-in;
    }
    
    .generate-columns-container > article:hover > .inside-article:hover {
        transform: scale(1.01);
        box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.3);
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1475683
    sanu kumar

    thanks, Elvin

    It worked but the only thing I need is could you help me to fix the text, means the text is touching the border so I need to give padding left and right.. how to make this

    #1475722
    Elvin
    Staff
    Customer Support

    You can try this CSS.

    .generate-columns-container > article > .inside-article > .entry-header, .entry-summary, .entry-meta {
        padding-left: 20px;
        padding-right: 20px;
    }

    Just change the px value to your preference.

    A wise man once said:
    "Have you cleared your cache?"

    #1475755
    sanu kumar

    it helped.

    #1477227
    Elvin
    Staff
    Customer Support

    Nice one. Feel free to open a new topic if you have any other concerns.

    Cheers. πŸ˜€

    A wise man once said:
    "Have you cleared your cache?"

Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.