Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 13, 2018 at 7:27 pm #926207
    Kamakshi

    Hi,

    I am looking to change the design of our guide and reports page. We are currently using a masonry grid layout that display a big image and small text below it. I was wondering:
    1) if there is a way to display the text on the image ( instead of under the image) in form of bold typography.

    2) is there a way to create a background overlay on the images?

    Link to our guide and report page is below.
    I look forward to hearing back from you.

    Thanks

    March 15, 2018 at 1:22 pm #927291
    Ismael

    Hey Kamakshi,

    Thank you for using Enfold.

    You can start with the following css codes.

    .grid-content {
    padding: 20px;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,.5) !important;
}

.grid-content .entry-content-header .grid-entry-title {
    display: block;
    background: transparent !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1000;
}

    It may require a few adjustments.

    Best regards,
    Ismael

    April 1, 2018 at 3:57 pm #935784
    Kamakshi

    Hi,

    Thanks for getting back to me on this. The code worked well on our guides and reports page.

    However, I also wanted to link these guides and reports to our home page. When I do so, the text displayed is of default size which is very large for the front page. I just want to display one or two guide reports for quick access and wondered if I can reduce the text size and display it below the image. Is there a way to do this?

    Will greatly appreciate your help as always.

    Many thanks

    April 3, 2018 at 2:51 am #936260
    Ismael

    Hi,

    Thank you for the update. Please provide a screenshot of the issue. I can’t find the masonry element in the home page.

    if I can reduce the text size and display it below the image

    Which image?

    Best regards,
    Ismael

    April 3, 2018 at 11:06 am #936461
    Kamakshi

    Hi Ismael,

    Thanks for getting back to me. I did not use the Masonry element to display guides & reports on the home page purely because the text size was imitating the original one as on the guides and report page. The huge text size made the homepage look disorganised, so I avoided using it. However, the guides/reports are key content pieces that our company produces and I would like to show these on the home page. Is there a way I can automate this? or do I have to insert content manually?

    I look forward to your reply.

    Thanks

    April 3, 2018 at 11:10 am #936464
    Kamakshi

    Another query,

    On our existing guides/report page ( link below) can I create a blue/theme colour image overly on hover? I am already using a black permanent overlay at this stage.

    April 4, 2018 at 3:34 am #936890
    Ismael

    Hi,

    or do I have to insert content manually?

    You have to insert the content manually same way it was added in the “guides-and-papers” page. You can also prepend the id of the “guides-and-papers” page to the css modification above and it won’t affect the home page. 

    .page-id-2486 .grid-content {
    padding: 20px;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,255,255,.5) !important;
}

.page-id-2486 .grid-content .entry-content-header .grid-entry-title {
    display: block;
    background: transparent !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1000;
}

    Best regards,
    Ismael

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