Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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!

    http://www.fujianshipbuilding.com/separate.png

    with

    http://www.fujianshipbuilding.com/bg-line.png

    #118132

    Hi,

    I am sorry, do you mean like this

    http://www.clipular.com/c?5851157=Mk_UPZzCQIfI85ZAFuVPnYA07WA&f=.png

    or

    http://www.fujianshipbuilding.com/bg-line.png

    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,

    Nick

    #118133

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

    #118134

    Hi,

    1) Upload the image of the horizontal line using Media and get the url of the image / see-> http://i.imgur.com/UxeA6Vf.png

    2) Add the CSS below to Quick CSS located in Enfold > Styling at the bottom of the page. Remove the http://domain.com/path/image-you-uploaded.png 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(https://domain.com/path/image-you-uploaded.png) 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>";
    }else{
    $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 http://www.clipular.com/c?5870161=RjLTobeBs0GTGlXzgTHEJxitw_Q&f=.png

    Thanks,

    Nick

    #118135

    Dear Nick, thanks so much for quick response!

    #118136

    No problem. Enjoy the theme!

    Thanks,

    Nick

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.