Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1014828

    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.

    #1014857

    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/

    #1014864

    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, 2 months ago by russavery.
    #1014932

    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

    #1015224

    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;
        }
    }
    #1015229

    Awesome, thank you very much, Guenni

    #1015243

    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

    #1015244

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

    #1015246

    Hi,

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

    Best regards,
    Rikard

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.