Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #891557

    Hi,
    I am using a custom post type all single post pages. They are all displaying on the default template (i think), that includes the header, footer, sidebar. However, I am using this CPT as a work around for some text pages to work in lightbox.

    How do you remove header, footer, sidebar in posts, like you do on a regular page?

    Thanks,
    Ian

    #891560

    Oh and if anyone has a better suggestion I am all ears.

    #891735

    Hi,

    I found a similar site that does exactly what I am looking for. When you click a staff member’s name, the lightbox opens with a nice header and all the details. https://boldearth.com/trip-leader-bios/?show_leader=106633

    Anyone know how to do this in enfold?

    #892398

    Hi,
    You could try making a iframe popup.
    2017-12-31_162105
    First create a new page that will be your popup either with a blank template or hide the Header, Footer & Title Bar:
    2017-12-31_160816
    You could use the advanced layout builder, or as I did, paste the html code from your example popup in a code block element.
    2017-12-31_161029
    Then add the css in the General Styling > Quick CSS field that will create your blue header with the image, this is what I used:

    .lightbox-leaders .top {
        color: #fff;
        background-color: #00aeef;
    }
    .lightbox-leaders .top:after {
        position: absolute;
        top: 0;
        right: 152px;
        height: 100%;
        width: 304px;
        background: url(https://boldearth.com/wp-content/themes/boldearth/images/lightbox-top-2x.png) no-repeat 50% 0;
        background-size: auto 9%;
        content: "";
    }

    Then create your link like this:

    http://127.0.0.1/popup/?iframe=true

    in this case, my popup page is http://127.0.0.1/popup/
    and I created a button on my layerslider, but you could link images or text.
    Give it a try, hope this helps.
    *Please note that if your logged in as admin, you will see the admin bar in the popup, but your visitors won’t see this.

    Best regards,
    Mike

    #903585

    Mike,
    I did something similar. I made a new page template, new single post loop and then put the data for each program in a custom post type.

    I think we got to the same end with different means.

    Thanks for your help.
    Ian

    #903595

    Hi,

    I’m glad to hear you found a solution. Did you need additional help, or shall we close this topic.

    Best regards,
    Jordan Shannon

    #903599

    Jordan,

    The one thing that I do need some help with is the significant lag time when the iframe is loading. I have included the link to the page and admin login in pvt.

    #903611

    Hi,
    From what I see the pages in your iframe are static html pages, that is, they are not built with WordPress, which would normally be good. But in this case they take almost 2 seconds to load because 97% of the pages load is fonts, css, and js that should not be needed.
    2018-01-26_195958
    The iframe pages are built to have the same look as your WordPress site, but 47% are different fonts, using the same font will save the user from downloading a new font. 28% is JS, but the pages need no JS at load, simple html & css will render the same page. 22% is css, which if you used the same classes as your main site you would not need this, even if you had a couple new classes they should be in your main stylesheet to save server requests and time.
    If you built your iframe pages as WordPress pages you could also take advantage of your caching plugin.
    I believe it would be worth your effort to do so.

    Best regards,
    Mike

    #903782

    Mike,

    The pages that are being called to load in the iframe are posts from a custom post type, built in wordpress and using a custom page layout and single post loop. So I am not sure what you mean with them not being wordpress pages. These pages are being cached using the cache plugin as far as I know.

    The fonts that you are referencing are Google Fonts that were selecting in the enfold theme, so if this is causing the lag please tell me how to avoid that.

    Thanks,
    Ian

    #903819

    Hi,
    I stand corrected then, I didn’t know they were a custom post type and I didn’t see them in your post or pages. I was going by the additional files on load.
    Perhaps enabling Prefetch and Prerender would be helpful. Here is a good article: How to add Prerender and Prefetch to WordPress sites

    Best regards,
    Mike

    #903840

    Mike,

    I looked into Prefetch and prerender as you noted, but it doesn’t seem to work or is simply over my head for the moment.

    One thing that I tried as a bandaid was to use the preloader from the theme options, which is better than a black screen. However, when that is activated the preloader runs, but never loads the target page into the iframe. Any ideas on why that’s happening?

    Thanks for your help.

    Ian

    #903932

    Hi,
    I think I have found a better solution, which is to add your popup content hidden at the bottom of your page. This opens very fast.
    First add this code to the end of your functions.php file in Appearance > Editor:

    function popup_inline() { ?>
    <script type="text/javascript">
    jQuery(window).load(function(){
    	jQuery('.open-popup-link').magnificPopup({
    	  type:'inline',
    	  midClick: true // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    	});
    });
    </script>
    <?php }
    
    add_action('wp_head', 'popup_inline');

    Next add your content in a code block at the bottom of your page, in my test I used one code block for each popup, but you could combine them if you wish. Be sure to use a different ID for each content block. Use this format:

    <div id="test-popup" class="white-popup mfp-hide">
    <p>PLACE CONTENT HERE</p>
    </div>

    Then for your links use this format and be sure to target the correct ID’s:

    <a class="open-popup-link" href="#test-popup">Show popup</a>
    

    Then add this to your CSS:

    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 500px;
    margin: 20px auto;
    }

    In my test this worked very fast, but I noticed a 100px blank space at the end of my page, where the hidden content was. I added this CSS to hide this space and the popups continued to work. You will need to adjust this css to target the space on your page.

    #top.page-id-626 #after_section_5 div.container {display: none !important;}

    Hope this helps.

    Best regards,
    Mike

    #904577

    Hi,
    Did this work for you?

    Best regards,
    Mike

    #950999

    notes in pvt message

    #951146

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

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

The topic ‘need custom post type to use blank page template’ is closed to new replies.