Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 26, 2018 at 4:09 pm #1014828
    russavery

    Hi guys,

    How can I create caption titles and content where the frames are flush to each other and don’t have a gap between them? And how can I change the styling of them?

    For example – I’d like to know how to achieve a similar effect to how they have been done on this site: https://carboncredentials.com/

    Thanks, link to my dev client site is in the private content block.

    September 26, 2018 at 4:35 pm #1014857
    Guenni007

    Well that is an enfold page – and that nice creator has no merging!
    so it is a bit easier to look what he had done.
    most of the rules are in his custom.css :

    /* SLIDER STYLES */
.slideshow_caption{
	width: 55%;
    padding: 50px 0 50px 50px;
}

.slideshow_inner_caption {
    width: 50%;
}

.caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title,
.avia-caption .avia-caption-content p, .avia-caption .avia-caption-title{
	background: rgba(255, 255, 255, 1);
	margin: 0;
	padding: 20px 30px;
	line-height: 22px;
	text-align: left
}
.caption_framed .slideshow_caption .avia-caption-content p, .avia-caption .avia-caption-content p{
	background: rgba(255, 255, 255, 0.9) !important;
	font-size: 18px;
    width: 100%;
}
.caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-title{
    width: 100%;
    font-size: 28px;
	line-height: 32px;
}
.avia-slideshow-dots a{
	border-radius: 0;
	border: 1px solid #FFFFFF;
	background: none;
	margin: 0 2px;
}
#top .avia-slideshow-button{
	border-radius: 0;
	text-transform: none;
	font-size: 14px;
	font-weight: 400;
}
.caption_framed .slideshow_caption .avia-caption-content p, .avia-caption .avia-caption-content p {
    line-height: 24px
}

    but i think the first rule you don’t need – the inner_caption makes it.

    see result here: https://webers-testseite.de/slideshow-with-captionstyling/

    September 26, 2018 at 4:41 pm #1014864
    russavery

    Hi Guenni – thanks so much for your speedy reply.

    Sorry, I’m not very techy… what do you mean by “that nice creator has no merging”?

    Can I achieve the same result by adding some code to the Quick CSS block in the General Styling area?

    Thanks so much again for your help, I really appreciate it.

    • This reply was modified 6 years, 1 month ago by russavery.
    September 26, 2018 at 7:09 pm #1014932
    Victoria

    Hi russavery,

    Yes, you can put the code in Quick css.

    Glad Guenni007 helped you.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 27, 2018 at 11:25 am #1015224
    Guenni007

    the creator of your example page: https://carboncredentials.com/
    this page is an enfold page too. so with the help of developer tools of your browser you can see all sources used there.
    And because he didn’t use the merging of Enfold – the css and js files are separated files.
    So i look for what he had done – and the most rules from him are in custom.css.

    But this is not necessary – i did for a test these settings into my quick css input field.

    by the way he had for the small screens some rules to hide f.e. the caption p tags:

    @media only screen and (max-width: 767px) {
    .caption_framed .slideshow_caption .avia-caption-content p, .avia-caption .avia-caption-content p{
        display: none;
    }
    .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-title{
        width: auto;
        padding: 10px 20px;
        line-height: 22px;
    }
}
    September 27, 2018 at 11:33 am #1015229
    russavery

    Awesome, thank you very much, Guenni

    September 27, 2018 at 11:54 am #1015243
    Rikard

    Hi,

    Thanks for helping out @guenni007.

    Please let us know if you should need any further help on the topic or if we can close it @russavery.

    Best regards,
    Rikard

    September 27, 2018 at 11:55 am #1015244
    russavery

    Hi Rikard – please feel free to close the case. Thanks so much!

    September 27, 2018 at 11:58 am #1015246
    Rikard

    Hi,

    Great, thanks for letting us know. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Custom caption title and content frames on full-width easy slider’ is closed to new replies.