Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 13, 2016 at 12:26 pm #660328
    LorbeerDesign

    Dear Support Team,

    I have on my homepage a slideshow. I want to adapt 2 things:
    1) background color of the frame box
    1. Box should be green and the second box black
    2) The boxes should have no fixed width

    Here two screenshots. A screenshot how it is (screen 1) is a screenshot as I was washing (screen 2).

    screen 1
    screen 2

    I am looking forward to your help and thank you.

    best regards
    Lorbeer Design

    • This topic was modified 8 years, 4 months ago by LorbeerDesign.
    July 13, 2016 at 1:28 pm #660377
    Yigit

    Hey LorbeerDesign!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .slideshow_caption { width: auto; }
.avia-caption-content p {
    background: black!important;
}

    Cheers!
    Yigit

    July 13, 2016 at 1:51 pm #660397
    LorbeerDesign

    Hi Yigit,

    this looks great! Now I have added a padding. Now on the black bar is a padding. I just want in the green bar a padding !?

    Another Question: The image quality in the slide-show (full width) is not good. I have very large images used (2400 x 1600px), but the quality is not better. Have you a trick for me?

    Thank you very much!

    Lorbeer Design

    Screenshot

    July 13, 2016 at 2:03 pm #660408
    Yigit

    Hi!

    Please apply padding to following selector 

    h2.avia-caption-title { padding: 10px; }

    Also, please edit your slider and make sure that you are inserting your image in full size

    Regards,
    Yigit

    July 13, 2016 at 2:09 pm #660410
    LorbeerDesign

    Hi,

    the padding does not work. I need a padding for the green box and an other for the black box.
    Here is my current code:

    .caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p { background: #69ab32; padding: 5% 5% 5% 5% !important;
}
.slideshow_caption { width: auto; }
.avia-caption-content p {
background: black!important; 
}
h2.avia-caption-title { padding: 10px !important; }
    July 13, 2016 at 2:12 pm #660416
    Yigit

    Hi!

    Please change your code to following one 

    .caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p { background: #69ab32; 
}
.slideshow_caption { width: auto; }
.avia-caption-content p {
background: black!important; 
padding: 5% !important;
}
h2.avia-caption-title { padding: 10px !important; }

    Cheers!
    Yigit

    July 13, 2016 at 2:15 pm #660422
    LorbeerDesign

    Sorry,
    now the green one is without padding (screenshot)

    screenshot

    July 15, 2016 at 4:17 pm #661414
    Rikard

    Hi,

    Sorry for the late reply, please try the following as well:

    .home #full_slider_1 h2 {
    padding: 20px !important;
}

    Best regards,
    Rikard

    July 20, 2016 at 8:51 am #662798
    LorbeerDesign

    Hello Rikard,

    Thanks for your answer. I have included your code, unfortunately, it is not correct. The green bar now has a padding, but the black bar is much too large.

    The black bar should look like the like in the screenshot – in every slide.
    Screenshot

    Here is my current code:

    .caption_framed .slideshow_caption .avia-caption-title, .caption_framed .slideshow_caption .avia-caption-content p { background: #69ab32; 
}
.slideshow_caption { width: auto; }
.avia-caption-content p {
background: black!important; 
padding: 5% !important;
}
h2.avia-caption-title { padding: 10px !important; }

.home #full_slider_1 h2 {
   padding: 20px !important;
}

    Thanks for your further help!

    Best regards,
    Lorbeer Design

    • This reply was modified 8 years, 4 months ago by LorbeerDesign.
    July 23, 2016 at 6:45 am #664134
    Ismael

    Hi,

    Adjust the padding value of the following code:

    .avia-caption-content p {
    background: black!important;
    padding: 5% !important;
}

    Try to set the padding value to 10px.

    .avia-caption-content p {
    background: black!important;
    padding: 10px !important;
}

    Best regards,
    Ismael

    July 25, 2016 at 8:29 am #664486
    LorbeerDesign

    Hi Ismael,

    wow, now it’s super!
    Between the two bars is a pixel spacing. Can you remove this?

    Then everything is perfect!

    best regards
    Lorbeer Design

    screenshot

    July 25, 2016 at 11:49 am #664560
    Vinay

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .home #full_slider_1 h2 {
    margin-bottom: 0px;
}

    Best regards,
    Vinay

    July 25, 2016 at 2:02 pm #664619
    LorbeerDesign

    Hi Vinay,

    thank you! It works great!

    Best regards,
    Lorbeer Design

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Slideshow frame box’ is closed to new replies.