Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 17, 2015 at 4:47 am #397227
    santanin

    Good day. I created a page for my sales team and used the 1/3 layout to display 30 members, 3 for each row for a total of 10 rows. I then added the Team Member content element to all 30 of the 1/3 layout spots. The Team Member Descriptions are quite large for most of them, and when I write them in to each team member, its way too long to display on the page.

    Is there any way I can add some kind of code on the Team Member Description to have the full bio open in a modal window?

    Or could I leave the Team Member Description blank and maybe add the Code Block content element (or some other content element) and show some of the bio and then have a link to read more and have that link open a modal window?

    Thank you.

    • This topic was modified 9 years, 10 months ago by santanin.
    February 17, 2015 at 9:32 am #397306
    Josue

    Hi!

    Is there any way I can add some kind of code on the Team Member Description to have the full bio open in a modal window?

    What would trigger that? can you post a link to the page in question?

    Cheers!
    Josue

    February 17, 2015 at 12:51 pm #397421
    santanin
    This reply has been marked as private.
    February 18, 2015 at 7:20 am #397966
    Josue

    Hi!

    Found a way.
    1. Add this to child theme functions.php:

    function inline_popup_enabler(){
?>
<script>
(function($){
    $(window).load(function() {
    	$('.inline_popup').magnificPopup({
    	  type:'inline',
    	  midClick: true 
    	});
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'inline_popup_enabler');

    2. Put this in each member element description:

    <a class="inline_popup" href="#content_1">Trigger</a>
<div id="content_1" class="hidden">Some content</div>

    Note href and id, they should be unique for each one:

    <a class="inline_popup" href="#content_2">Trigger</a>
<div id="content_2" class="hidden">Some content</div>

    And so on..

    3. Add this to Quick CSS:

    .mfp-container .hidden {
    display: block !important;
    visibility: visible;
    width: 25%;
    background: white;
    padding: 20px;
    margin: 0 auto;
}

    Best regards,
    Josue

    February 18, 2015 at 12:49 pm #398059
    santanin
    This reply has been marked as private.
    February 18, 2015 at 4:05 pm #398212
    Günter

    Hi!

    Use the following CSS – put in QuickCSS or custom.css:

    
.mfp-container .hidden {
    position: relative !important;
}

    Regards,
    Günter

    May 8, 2017 at 5:58 pm #789745
    Hank

    Hi there. Thanks so much for posting this. I have made use of the above suggestions with some mild difference in CSS but for some reason it is affecting my footer. Can someone tell me why the footer is now blacked out as opposed to how it normally is on the home page, for example.

    Thank you!

    May 9, 2017 at 6:20 am #789991
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    
.page-id-2114 #footer .widget h3, .page-id-2114 #footer .widget p, .page-id-2114 #footer .widget a {
  color:white !important;
}

    Best regards,
    Rikard

    March 2, 2020 at 11:48 pm #1189540
    revelbranding

    MIght there be an update to this mod? It is not working with WordPress 5.3.2 and Enfold 4.7.3

    March 5, 2020 at 6:14 pm #1190536
    Victoria

    Hi revelbranding,

    Please start a separate thread, describe your issue there and give us a link to your website.

    Best regards,
    Victoria

    March 5, 2020 at 6:27 pm #1190547
    revelbranding

    I have figured it out. A plugin was interfering and since has been updated. I can confirm that the above code works well.

    March 5, 2020 at 9:13 pm #1190652
    Victoria

    Hi revelbranding,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.