Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 29, 2018 at 11:33 pm #963981
    alard

    Hi,

    I just created a new website with Enfold and my first page with a very simple portfolio.

    1- When clicking on one image from the portfolio grid, a bigger image pops up in a lightbox but from there, I cannot navigate to the next or previous image. Navigation arrows and close button don’t show up. Can you help me fixing this (it used to work for another website I created a while ago with Enfold)?

    2- I would like to customize the appearance of the image overlay:
    – change the color of the orange circle and make it smaller
    – change the title background in white and display the title in an other color such as grey.
    can you also help me for implementing those changes?

    Many thanks.

    May 29, 2018 at 11:37 pm #963984
    alard

    Hi,
    I have fixed the first issue by myself but the second remains!
    Many thanks,

    May 31, 2018 at 11:06 pm #965001
    alard

    Hi,
    I would like to customize the appearance of the image overlay:
    – change the color and opacity of the orange circle and make it smaller
    – change the title background in white and display the title in an other color such as grey.
    Can you also help me for implementing those changes?
    Many thanks

    June 1, 2018 at 11:48 am #965230
    Ismael

    Hi,

    Thank you for using Enfold.

    1.) Glad that you figured this out! :)

    2.) Use the following css codes to change the color, opacity and size of the overlay.

    #top .main_color .image-overlay .image-overlay-inside:before {
    background-color: red;
    color: blue;
    border-color: green;
}

.image-overlay .image-overlay-inside:before {
    border-radius: 50px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    margin: -20px 0 0 -20px;
}

    3.) And use this for the grid content container.

    .main_color .grid-content {
    background-color: #ffffff;
    color: #cccccc;
}

.main_color .grid-entry-title {
    background-color: #ffffff;
    color: red;
}

    Best regards,
    Ismael

    June 2, 2018 at 10:49 pm #965982
    alard

    Hi Ismael,

    Thank you very much!
    3- It works quite perfectly! But the grid entry title color can’t be change with this code…
    Is it possible to hide the title in the grid portfolio and show it only in the lightbox ?

    Regards,
    Valérie.

    June 3, 2018 at 2:58 am #966018
    Jordan Shannon

    Hi,

    To hide the title add this to quick css:

    
h3.grid-entry-title.entry-title{
display:none!important;
}

    Best regards,
    Jordan Shannon

    June 5, 2018 at 11:40 am #967164
    alard

    Hi,

    1- Finally, I would like to display the entry title! But I can’t change the color with this css code…
    .main_color .grid-entry-title {
    background-color: #141414;
    color: #cccccc;
    font-size: 1.05em !important;
    }

    2- Is it possible to add small spaces between the images in the portfolio grid? Or small black border? The images are too close some of the others.

    Many thanks.
    Valérie.

    June 5, 2018 at 5:11 pm #967318
    Jordan Shannon

    Hi,

    Did the first bit of code I gave work out for you?

    Best regards,
    Jordan Shannon

    June 5, 2018 at 8:22 pm #967442
    alard

    Hi,

    Yes, this code works:
    h3.grid-entry-title.entry-title{
    display:none!important;
    }

    Finally, I want to display the title. And I can’t change the color with the code Ismael gave to me.

    Then, could you tell me if it is possible to add spacer between the images in the portfolio grid? The images are too close to each other.

    Many thanks,
    Valérie.

    June 8, 2018 at 12:46 am #969880
    Ismael

    Hi,

    Thanks for the update.

    Use this css code to change the color of the title. The previous one is being overridden by the advanced styling options.

    #top #wrap_all .main_color .grid-entry-title {
    color: #cccccc;
}

    And use this css code to create more space between the portfolio items.

    #top .isotope-item {
    padding: 20px;
}

    Adjust the value as needed.

    Best regards,
    Ismael

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