Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 12, 2014 at 12:18 pm #334482
    Marie

    Hey !
    I’d like to test a gradient border-color for a .hr on a page. I’ve created a custom class ->
    For info the short code generated :
    [av_hr class='custom' height='50' shadow='no-shadow' position='left' custom_border='av-border-fat' custom_width='150' custom_border_color='' custom_margin_top='-20px' custom_margin_bottom='0px' icon_select='no' custom_icon_color='' icon='ue808' font='entypo-fontello' custom_class='mc-hr-gradientcolor']

    Then I used css from :
    http://www.colorzilla.com/gradient-editor/#00c472+0,3cd52e+100;Custom
    And I added the following code in my child theme style.css (see below).

    But it’s not working and the default color remains…
    See my private link -> first .hr on the page. Thanks for your precious help !
    By the way, once it works…, if I wanted several .hr to use this specific color on a same page, what should I do ? put the same class name in the custom class field for each .hr ? Thank you again.

    Regards,
    Marie

    /* Gradient color for hr element */
#top .hr .mc-hr-gradientcolor .hr-inner {
border_color: #00c472; /* Old browsers */
border_color: -moz-linear-gradient(left, #00c472 0%, #3cd52e 100%); /* FF3.6+ */
border_color: -webkit-gradient(linear, left top, right top, color-stop(0%,#00c472), color-stop(100%,#3cd52e)); /* Chrome,Safari4+ */
border_color: -webkit-linear-gradient(left, #00c472 0%,#3cd52e 100%); /* Chrome10+,Safari5.1+ */
border_color: -o-linear-gradient(left, #00c472 0%,#3cd52e 100%); /* Opera 11.10+ */
border_color: -ms-linear-gradient(left, #00c472 0%,#3cd52e 100%); /* IE10+ */
border_color: linear-gradient(to right, #00c472 0%,#3cd52e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c472', endColorstr='#3cd52e',GradientType=1 ); /* IE6-9 */
}
    October 13, 2014 at 8:34 am #334698
    Ismael

    Hey Marie!

    Thank you for using Enfold.

    Please refer to this link on how to properly apply a border gradient: http://css-tricks.com/examples/GradientBorder/

    Cheers!
    Ismael

    October 13, 2014 at 9:36 am #334738
    Marie

    Hey Ismael!
    I tried something else referring to your link (see below). But it still won’t work. I haven’t put the border-width & border style info as I already gave the width in the “ALB .hr window”… I thought this would make conflict… but may be I’m wrong ? Really need some more precise help here, sorry. When I have a problem I always try as much as I can before coming to you…to avoid disturbing too much, but my skills are unfortunately quite limited… I know you guys have to solve many & much bigger issues, but on my side I can’t spend hours on a border gradient matter… Thanks a lot in advance.

    Regards,
    Marie

    /* Gradient color for hr element */
#top .hr .mc-hr-gradientcolor .hr-inner {
    -webkit-border-image:
      -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,196,114,1)), to(rgba(60,213,46,1))) 1 100%;
    -webkit-border-image:
      -webkit-linear-gradient(right, rgba(0,196,114,1), rgba(60,213,46,1)) 1 100%;
    -moz-border-image:
      -moz-linear-gradient(right, rgba(0,196,114,1), rgba(60,213,46,1)) 1 100%; 
    -o-border-image:
      -o-linear-gradient(right, rgba(0,196,114,1), rrgba(60,213,46,1)) 1 100%;
    border-image:
      linear-gradient(to right, rgba(0,196,114,1), rgba(60,213,46,1)) 1 100%;
}
    October 13, 2014 at 9:11 pm #335177
    Yigit

    Hey!

    Please try the code as following 

    .hr-custom .hr-inner {
border-color: #00c472;
border-color: -moz-linear-gradient(left, #00c472 0%, #3cd52e 100%);
border-color: -webkit-gradient(linear, left top, right top, color-stop(0%,#00c472), color-stop(100%,#3cd52e));
border-color: -webkit-linear-gradient(left, #00c472 0%,#3cd52e 100%);
border-color: -o-linear-gradient(left, #00c472 0%,#3cd52e 100%);
border-color: -ms-linear-gradient(left, #00c472 0%,#3cd52e 100%);
border-color: linear-gradient(to right, #00c472 0%,#3cd52e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c472', endColorstr='#3cd52e',GradientType=1 );
}

    border-color should be written without underscore

    Regards,
    Yigit

    October 14, 2014 at 12:43 pm #335539
    Marie

    Hey Yigit!
    Thanks for your help but it still doesn’t work… (I refreshed & empty cash)
    I put your code without underscore in “border-color” -> bordorcolor

    I tried with
    .mc-hr-gradientcolor .hr-inner { etc…
    Also with
    .mc-hr-gradientcolor .hr-custom .hr-inner { etc…
    And at last (just in case / but I guess I have to put the name of my own custom class…) with
    .hr-custom .hr-inner { etc…

    Never thought it would be that complicated to have a custom gradient .hr !! :((

    Thank you!
    Regards,
    Marie

    October 14, 2014 at 12:45 pm #335541
    Marie

    The “actual” code.
    Thanks,
    Marie

    /* Gradient color for hr element */
.mc-hr-gradientcolor .hr-inner {
bordercolor: #00c472;
bordercolor: -moz-linear-gradient(left, #00c472 0%, #3cd52e 100%);
bordercolor: -webkit-gradient(linear, left top, right top, color-stop(0%,#00c472), color-stop(100%,#3cd52e));
bordercolor: -webkit-linear-gradient(left, #00c472 0%,#3cd52e 100%);
bordercolor: -o-linear-gradient(left, #00c472 0%,#3cd52e 100%);
bordercolor: -ms-linear-gradient(left, #00c472 0%,#3cd52e 100%);
bordercolor: linear-gradient(to right, #00c472 0%,#3cd52e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c472', endColorstr='#3cd52e',GradientType=1 );
}
    October 14, 2014 at 5:41 pm #335678
    Josue

    Hi!

    You can’t put gradients in the border-color property, you’d need to use border-image, refer to this – http://css-tricks.com/examples/GradientBorder/

    Regards,
    Josue

    October 14, 2014 at 6:47 pm #335704
    Marie

    Hi Josue,
    Thank you very much but this link was already given by Ismael (oct 13). I tried to implement it and it didn’t work. See the code I put above.
    Thank you.
    Marie

    October 14, 2014 at 8:55 pm #335737
    Josue

    Hey Marie,

    Try this code instead:

    .mc-hr-gradientcolor .hr-inner {
    border: 0;
    height: 1px;
    background: #00c472;
    background: -moz-linear-gradient(left, #00c472 0%, #3cd52e 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00c472), color-stop(100%,#3cd52e));
    background: -webkit-linear-gradient(left, #00c472 0%,#3cd52e 100%);
    background: -o-linear-gradient(left, #00c472 0%,#3cd52e 100%);
    background: -ms-linear-gradient(left, #00c472 0%,#3cd52e 100%);
    background: linear-gradient(to right, #00c472 0%,#3cd52e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c472', endColorstr='#3cd52e',GradientType=1 );
}

    Adjust height: 1px as needed.

    Best regards,
    Josue

    October 15, 2014 at 7:29 am #335963
    Marie

    Hey Josue!
    That works good !! Thank you ! Thank you !!!

    Regards,
    Marie

    October 15, 2014 at 9:35 am #336015
    Marie

    Hi Josue!

    Sorry one last question!!
    Now that it works, what should I do if I want to use several .hr with this gradient on a same page? put the same class name in the custom class field for each .hr ? Or do I have to create a custom class with a different name for each .br of the page? Thank you again.

    Best regards,
    Marie

    October 15, 2014 at 8:13 pm #336354
    Josue

    No, you can use the same class in any other elements you want.

    Regards,
    Josue

    October 16, 2014 at 7:05 pm #336981
    Marie

    All right great! Thank you again.
    Best regards,
    Marie

    October 16, 2014 at 8:02 pm #337000
    Josue

    You are welcome Marie, always glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘.hr border color’ is closed to new replies.