Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #22983

    Hi, I hope to replace the divider line (the long one) as shown in the picture below with the one shown in the picture at the end, how to? thanks in advance!




    I am sorry, do you mean like this


    because it’s really hard to tell if I need new eyes or new glasses, but probably both :)

    Can you show a page that has the actual html/css code so that we can provide you with a fix that’s sure to work.




    thanks and sorry for the confusion, I just want to such divider line as shown in the link below.



    1) Upload the image of the horizontal line using Media and get the url of the image / see->

    2) Add the CSS below to Quick CSS located in Enfold > Styling at the bottom of the page. Remove the from the css below and in its place add the url of where you uploaded the image from step 1 above

    #top #big-hrline {
    background: url( no-repeat bottom;
    margin: 0 0 30px;
    overflow: hidden;
    padding: 0 0 20px;
    width: 100%;

    3) Open /config-templatebulder/avia-shortcodes/hr.php and find line 117 which looks like this

    function shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "")

    Delete line 117 and everything below until the end of the file and in its place paste the code

    function shortcode_handler($atts, $content = "", $shortcodename = "", $meta = "")
    extract(shortcode_atts(array('class' => 'default', 'height' => '50', 'position'=>'center', 'shadow'=>'no-shadow'), $atts));
    $hrtype = 0;
    $output = "";
    $height = trim($height, 'px% ');
    $style = $class == 'invisible' ? "style='height:{$height}px'" : "";
    $class .= $class == 'short' ? " hr-{$position}" : "";
    $class .= $class == 'full' ? $hrtype=1 : "";

    if ($hrtype==1){
    $output = "<div id='big-hrline'></div>";
    $output .= "<div {$style} class='hr hr-{$class} ".$meta['el_class']."'><span class='hr-inner'><span class='hr-inner-style'></span></span></div>";

    return $output;


    I tested it and it works.

    To use it just select the horizontal ruler full width separator




    Dear Nick, thanks so much for quick response!


    No problem. Enjoy the theme!



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

The topic ‘how to replace the block divider line with image?’ is closed to new replies.