Tagged: ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • March 30, 2020 at 3:20 am #1198987
    tokenofhon

    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?

    April 1, 2020 at 2:37 am #1199593
    tokenofhon

    bump

    April 1, 2020 at 7:52 am #1199635
    Rikard

    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

    April 1, 2020 at 7:57 am #1199637
    tokenofhon

    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?

    April 2, 2020 at 5:58 am #1199964
    Rikard

    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

    April 2, 2020 at 7:37 am #1199994
    tokenofhon

    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

    April 3, 2020 at 6:12 am #1200373
    Rikard

    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

    April 3, 2020 at 7:29 am #1200393
    tokenofhon

    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?

    April 4, 2020 at 4:36 am #1200719
    Rikard

    Hi,

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

    Best regards,
    Rikard

    April 5, 2020 at 6:13 am #1200924
    tokenofhon

    Nah i want it below the header (logo area)

    April 5, 2020 at 8:08 pm #1200998
    Mike

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

    Best regards,
    Mike

    April 6, 2020 at 1:51 am #1201056
    tokenofhon

    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;
}
    April 6, 2020 at 2:04 am #1201058
    Mike

    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

    April 6, 2020 at 2:05 am #1201059
    tokenofhon

    Perfect, cheers mike!

    April 6, 2020 at 2:07 am #1201060
    Mike

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

    Best regards,
    Mike

    April 6, 2020 at 3:05 am #1201071
    tokenofhon

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

    April 6, 2020 at 3:31 am #1201077
    Mike

    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

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Custom dividers’ is closed to new replies.