How to add a post link button along with lightbox in portfolio/blog

Support Forums for LiveMesh Themes & Plugins Forums Squash Theme Support How to add a post link button along with lightbox in portfolio/blog

This topic is: resolved

This topic contains 2 replies, has 2 voices, and was last updated by Livemesh livemesh 6 years, 5 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1032
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    Make a small modification to the file {theme directory}/framework/functions/thumbnail-functions.php. Modify the link 115 from

    $image_info .= 'Preview';
    

    to

    $image_info .= 'Preview';
    $image_info .= 'View Post';
    

    .

    Replace the CSS line numbers 154 to 167 for .image-info class in style.css to –

    /*---------- Image Info Hover --------------------------*/
    .image-info { display: block; z-index: 120; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center;
        background: #10A8B5; background: rgba(16, 168, 181, 0.8); opacity: 0; filter: alpha(opacity=0); }
    .image-info h3 { position: relative; top: 15%; padding: 10px; margin: 0; font-size: 18px; font-weight: 500; line-height: 28px; }
    .image-info:hover h3 a { color: #fff !important; }
    .image-info .terms { position: relative; top: 10%; display: block; }
    .type-portfolio .image-info .terms { display: none; }
    .image-info .image-info-buttons { position: absolute; /* center the buttons */ width: 104px; margin: 0 auto; top: 50%; left: 50%; margin-left: -52px; margin-top: -24px; }
    .image-info .terms a { position: relative; display: inline; zoom: 1; font-size: 13px; line-height: 22px; color: #fff !important; }
    .image-info a.lightbox-link, .image-info a.post-link { float: left; margin: 0; text-align: center; }
    .image-info a.post-link { margin-left: 8px; }
    .image-info a.lightbox-link, .image-info a.post-link { padding: 14px; border-radius: 25px; z-index: 110;
        background-color: #888; /* IE */ background-color: rgba(0, 0, 0, 0.5); }
    .image-info a.lightbox-link span, .image-info a.post-link span { display: block; text-indent: -9999px; height: 20px; width: 20px;
        background-image: url(images/image-info-buttons.png); background-repeat: no-repeat; }
    .image-info a.lightbox-link span { background-position: -28px 1px; }
    .image-info a.post-link span { background-position: 1px -28px; }
    

    You should see a link button along with the lightbox on when you hover over a portfolio item or a blog post in the archive pages. Thanks

    #1047
    Davidsneal
    davidsneal
    Member
    Post count: 1

    I’d like to go ahead and use this myself, but will this change be overwritten or incorporated in future releases?

    #1061
    Livemesh
    livemesh
    Keymaster
    Post count: 1011

    I am in two minds about this. If I have a link already at the top why have another icon? Can’t say for sure if this will be part of next release.

    Anyway, worst case, you can include the change again if you need to. I do not expect any change to the above code that will make this change invalid. If I make changes, I will post the changed code for including the link icon here again. Thanks.

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

You must be logged in to reply to this topic.