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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1032
    Livemeshlivemesh
    Keymaster

    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
    Davidsnealdavidsneal
    Member

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

    #1061
    Livemeshlivemesh
    Keymaster

    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.