Okay
  Public Ticket #1366900
Content Shortcode
Closed

Comments

  • Mark Syred started the conversation
    November 13, 2017 at 3:11pm

    Hi there,

    Thanks very much for the hep you've provided in the past.

    I'm wondering if you can help. I notice from one of your themes http://clapat.ro/themes/newave-reloaded/ that there appears to be the possibility of adding a hidden-box. In the link above, I'm looking in particular at the behaviour of the stuff around the contact icons - please see attached screenshot.

    We purchased Trent in the end, thinking it more closely matched what our customer'd be after and thinking - perhaps naively - that it would include similar behaviours to the Newave Reloaded theme.

    Please can you tell me if it's possible to add a hidden box in Trent and what shortcode I should use to achieve this if I can?

    Apologies if this is a really basic question.

    With kind regards,

    Mark

  •  1,799
    Support replied
    November 15, 2017 at 5:48am

    Hello Mark,

    There is no such shortcode in Trent however you could try adding the following CSS in 

     theme options -> styling options -> custom CSS

    .hidden-box {
    box-sizing:border-box;
    padding:50px 0;
    }

    .header-box, .content-box, .footer-box {
    transition:all 0.3s ease 0s;
    -moz-transition:all 0.3s ease 0s;
    -webkit-transition:all 0.3s ease 0s;
    -o-transition:all 0.3s ease 0s;
    }

    .header-box {
    color:#000;
    font-size:22px;
    }

    .hidden-box:hover .header-box {
    -ms-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    -o-transition:translateY(-20px);
    transform: translateY(-20px);
    color:#000;
    }

    .parallax-overlay .header-box, .parallax-overlay .hidden-box:hover .header-box, .parallax-overlay .content-box h4 {
    color:#fff;
    }

    .parallax-overlay .hidden-box:hover .header-box {
    opacity:0.4;
    }

    .content-box {
    opacity:0;
    max-height:0;

    }

    .hidden-box:hover .content-box {
    opacity:1;
    max-height:auto;
    }

    .hidden-box:hover .footer-box {
    -ms-transform: translateY(20px);
    -webkit-transform: translateY(20px);
    -o-transition:translateY(20px);
    transform: translateY(20px);
    opacity:0.2;
    }

    .footer-box {
    margin-top:20px;
    }

    and the add the html code of the box in a one third column:

    <div class="hidden-box"><div class="header-box"><i class="fa fa-paper-plane fa-2x"></i></div><div class="content-box"><h4>[email protected]</h4></div><div class="footer-box"><p class="subtitle">Email Us</p></div></div>

    you need to replace the text and the fontawesome icon class

    Hope i did not for get any closing div.

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy

  • Mark Syred replied
    November 15, 2017 at 9:27am

    Hi Support,

    Thanks very much for coming back to me with this. It's very helpful. It's also worked exactly as expected.

    There's another shortcode I wonder whether I have missed. With blog posts, these can be arranged in a masonry pattern or be listed. Is that possible with other post types as well?

    With kind regards,

    Mark

  •  1,799
    Support replied
    November 16, 2017 at 5:28pm

    Hello Mark, correct, only with blog posts. 

    Thank you.

    Clapat Support

    https://www.clapat.com/

    Review Envato Item Support Policy