Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #1198987

    Hi,

    I was wondering if there was a way for me to use a custom divider design (i.e look jagged/torn like claws have scratched the section open) via a custom designed PNG etc?

    #1199593

    bump

    #1199635

    Hi,

    Sorry for the late reply. I’m not sure I understand what you are looking to achieve, could you post a screenshot highlighting your intentions please?

    Best regards,
    Rikard

    #1199637

    No worries mate,

    So this is how the dividers look currently:

    View post on imgur.com

    And this is what im hoping to achieve:

    View post on imgur.com

    So i was wondering if i can design + use custyom made PNG images as the divider, instead of a solid line?

    #1199964

    Hi,

    Thanks for that. You would have to use an image for a divider like that, you could try adding multiple backgrounds to the element for example: https://www.w3schools.com/Css/css3_backgrounds.asp

    Best regards,
    Rikard

    #1199994

    Cool so once i create the image, how do i target the diagonal borders to use the image as the border?

    I’ve added website link below

    #1200373

    Hi,

    Thanks for the update. If you create an image like that then you shouldn’t have to use a diagonal border. You would fake it using the same colour in the image as in the section below.

    Best regards,
    Rikard

    #1200393

    Hahaha bloody hell i’m an idiot. Got way too narrow-minded focusing on that using the diagonal border that i didnt even think about the most simple solution, cheers mate!

    One small thing, im trying to add a gradient border below the header, ive managed to target the header but it puts it above the header (below title bar), i cant seem to move it to below the header?

    #1200719

    Hi,

    Thanks for the update. So you want to add it below the section which reads Imagine. Design. Create.?

    Best regards,
    Rikard

    #1200924

    Nah i want it below the header (logo area)

    #1200998

    Hi,
    Can we see the code for your gradient border and the classes you are targeting?

    Best regards,
    Mike

    #1201056

    Sure,

    .av_minimal_header #header_meta {
    border-bottom: 3px solid;
    -moz-border-image: -moz-linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    border-image: linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    border-image-slice: 1;
    }
    #1201058

    Hi,
    Thanks, to have this below your header & logo try this css:

    .header_bg {
    border-bottom: 3px solid;
    -moz-border-image: -moz-linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    -webkit-border-image: -webkit-linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    border-image: linear-gradient(to left, #ffff01 0%,#fe5502 25%,#fd0400 50%,#ff00ac 75%,#ff00ff 100%);
    border-image-slice: 1;
    }

    Best regards,
    Mike

    #1201059

    Perfect, cheers mike!

    #1201060

    Hi,
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

    #1201071

    Yeah thats it, i got the tear working via background image, so you can close it, thanks guys

    #1201077

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Custom dividers’ is closed to new replies.