Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 8, 2024 at 12:29 pm #1439490
    frb1

    Hi,

    Been trying to locate css for adjusting the Grid Layout for Blog Posts module, for adjusting column spacing/gap and removal of round corners.
    Could you be so kind to share the CSS to custom style it? Thank you so much!

    Note:
    Could not find above info on: https://kriesi.at/documentation/enfold/blog-post/

    Best,
    Frederik

    • This topic was modified 7 months, 2 weeks ago by frb1.
    • This topic was modified 7 months, 2 weeks ago by frb1.
    • This topic was modified 7 months, 2 weeks ago by frb1.
    April 8, 2024 at 4:08 pm #1439507
    Rikard

    Hey frb1,

    You can remove the border radius with this CSS:

    .avia-content-slider .slide-image {
  border-radius: 0;
}

    I’m not sure what you are looking to alter beyond that though, please try to explain your intentions a bit further or post a screenshot highlighting them.

    Best regards,
    Rikard

    April 9, 2024 at 11:00 am #1439568
    frb1

    Hi Rikard,
    Great, thank you!
    I would like to be able to adjust the gap between the images/columns in the Blog posts grid layout.

    Best,
    Frederik

    April 9, 2024 at 12:15 pm #1439572
    Guenni007

    it depends on how many columns you have choosen in the blog-post alb element
    this is for a 3 column the default setting. Because the first column should have no margin-left – you see how it works ( 100% width – 2 times margin left = 88) so for the columns: 88/3 = 29,3333

    .slide-entry.av_one_third {
  margin-left: 6%;
  width: 29.333333333333332%;
}

    so if you only like to have 3% then it is:

    #top .slide-entry.av_one_third.first {
  margin-left: 0px ;
}

#top .slide-entry.av_one_third {
  margin-left: 3%;
  width: 31.33333%;
}
    April 9, 2024 at 12:29 pm #1439574
    Guenni007

    or maybe this is nicer to handle:
    just change now the wanted value on root setting ;)

    :root {
  --blog-margin-left-value : 2%;
}

#top .slide-entry.av_one_third.first {
  margin-left: 0px ;
}

#top .slide-entry.av_one_third {
  margin-left: var(--blog-margin-left-value);
  width: calc((100% - 2 * var(--blog-margin-left-value)) / 3);
}

    PS: if you like to have no space use 0px ( not only Zero)
    if you like to be more specific – use a custom class on blog posts element

    :root {
  --blog-margin-left-value : 5%;
}

#top .avia-content-slider.custom-class .slide-entry.first {
  margin-left: 0px ;
}

#top .avia-content-slider.custom-class .slide-entry.av_one_third {
  margin-left: var(--blog-margin-left-value);
  width: calc((100% - 2 * var(--blog-margin-left-value)) / 3);
}
    April 9, 2024 at 1:10 pm #1439583
    Rikard

    Hi,

    Thanks for helping out @guenni007. Did that answer your question @frb1?

    Best regards,
    Rikard

    April 9, 2024 at 1:13 pm #1439584
    frb1

    It probably did! Thank you both! I’ll have to check it asap and get back to you.

    Best,
    Frederik

    April 9, 2024 at 1:20 pm #1439587
    Guenni007

    OK

    April 9, 2024 at 5:24 pm #1439601
    frb1

    Hi Rikard,

    I still have a rounded corner on the images after:
    .avia-content-slider .slide-image {
    border-radius: 0;
    }
    I can adjust corner radius with the code, but not to zero. There must be another border-radius class in there as well.

    I’d also like to adjust the Image hover effect. Right now it seems like a glassy white. I’d like it to be dark.

    April 9, 2024 at 10:09 pm #1439616
    Mike

    Hi,
    Try this CSS:

    #top .avia-content-slider .slide-image img,
#top .avia-content-slider .slide-image {
border-radius: 0;
}

    Best regards,
    Mike

    April 10, 2024 at 6:55 am #1439622
    frb1

    Thank you Mike, that did the job!!! :)

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Adjusting Blog Posts Grid Layout’ is closed to new replies.