-
Posts
-
Hi,
I want to publish a full website (a landing page) within an iframe on my site. I don’t want any scrolling bars, it should just look as if I am on that site itself. I have been searching but could not find a working example.
Is there anybody who know how to do this? I am using the Enfold theme.
Thanks a lot.Stephen
Hey Stephen!
Use a “Blank Template” page, to hide the iframe borders put this code in Quick CSS (i’m assuming your iframe an ID of “myiframe”):
#myiframe{ border: 0 !important; }Cheers!
JosueThank you Josue. But that did not resolve my problem. I already use the “blank” template, but that adds a header en footer covering approx 40% of the height each with a grey area.
When I look at the code, I see (among many other stuf) these lines in the header:
<link rel=’stylesheet’ id=’avia-grid-css’ href=’http://mysite.com/wp1/wp-content/themes/enfold/css/grid.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-base-css’ href=’http://mysite.com/wp1/wp-content/themes/enfold/css/base.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-layout-css’ href=’http://mysite.com/wp1/wp-content/themes/enfold/css/layout.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-scs-css’ href=’http://mysite.com/wp1/wp-content/themes/enfold/css/shortcodes.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-popup-css-css’ href=’http://mysite.com/wp1/wp-content/themes/enfold/js/aviapopup/magnific-popup.css?ver=1′ type=’text/css’When I remove the lines with “avia-grid-css” and “avia-layout-css”, then I get the full page as I want it.
This is the current code I use:<style type=”text/css”>
body {scrolling:no;
}
iframe {position:absolute;
z-index:1;
top:0px;
left:0px;
border: 0 !important;
}
</style>
</head>
<body>
<iframe src=”http://another_site.com” height=”100%” width=”100%” frameborder=”0″></iframe>
</body>I copied the whole code below so you can see what my issue is. Basically, the “blank” template adds header and footer anyway..
Hope you can help.
Thanks,Stephen
———————————————————————————————————————————————-
<!DOCTYPE html>
<html lang=”en-US” prefix=”og: http://ogp.me/ns#” class=” html_boxed responsive responsive_large av-default-lightbox html_header_top html_logo_left html_main_nav_header html_menu_right html_slim html_header_sticky html_header_shrinking html_mobile_menu_phone html_disabled html_entry_id_1168 “>
<head>
<meta charset=”UTF-8″ /><!– page title, displayed in your browser bar –>
<link rel=”icon” href=”http://www.abundantforever.com/wp1/wp-content/uploads/abundantforever_logo_favicon_000001.png” type=”image/png”>
<!– add feeds, pingback and stuff–>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”alternate” type=”application/rss+xml” title=”Abundant Forever RSS2 Feed” href=”http://www.abundantforever.com/feed/” />
<link rel=”pingback” href=”http://www.abundantforever.com/wp1/xmlrpc.php” /><!– mobile setting –>
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″><!– Scripts/CSS and wp_head hook –>
<!– This site is optimized with the Yoast WordPress SEO plugin v1.5.5.3 – https://yoast.com/wordpress/plugins/seo/ –>
<title>Start – Abundant Forever</title>
<link rel=”canonical” href=”http://www.abundantforever.com/start/” />
<meta property=”og:locale” content=”en_US” />
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”Start – Abundant Forever” />
<meta property=”og:url” content=”http://www.abundantforever.com/start/” />
<meta property=”og:site_name” content=”Abundant Forever” />
<!– / Yoast WordPress SEO plugin. –><link rel=”alternate” type=”application/rss+xml” title=”Abundant Forever » Feed” href=”http://www.abundantforever.com/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”Abundant Forever » Comments Feed” href=”http://www.abundantforever.com/comments/feed/” />
<link rel=”alternate” type=”application/rss+xml” title=”Abundant Forever » Start Comments Feed” href=”http://www.abundantforever.com/start/feed/” /><!– google webfont font replacement –>
<link rel=’stylesheet’ id=’avia-google-webfont’ href=’//fonts.googleapis.com/css?family=Droid+Sans’ type=’text/css’ media=’all’/>
<link rel=’stylesheet’ id=’custom-style-css’ href=’http://www.abundantforever.com/wp1/wp-content/plugins/enfold-latest-posts/asheu.css?ver=3.9.2′ type=’text/css’ media=’all’ />
<style type=’text/css’>body .cat-title {
border-bottom: 1px solid;
display: block;
}
body .parent-cat .child-cat li {
margin-left: 35px;
}</style>
<link rel=’stylesheet’ id=’collapseomatic-css-css’ href=’http://www.abundantforever.com/wp1/wp-content/plugins/jquery-collapse-o-matic/light_style.css?ver=1.6′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-grid-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/grid.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-base-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/base.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-layout-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/layout.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-scs-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/shortcodes.css?ver=2′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-popup-css-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/aviapopup/magnific-popup.css?ver=1′ type=’text/css’ media=’screen’ />
<link rel=’stylesheet’ id=’avia-media-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/mediaelement/skin-1/mediaelementplayer.css?ver=1′ type=’text/css’ media=’screen’ />
<link rel=’stylesheet’ id=’avia-print-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/print.css?ver=1′ type=’text/css’ media=’print’ />
<link rel=’stylesheet’ id=’avia-dynamic-css’ href=’http://www.abundantforever.com/wp1/wp-content/uploads/dynamic_avia/enfold.css?ver=540f70cb1c0b1′ type=’text/css’ media=’all’ />
<link rel=’stylesheet’ id=’avia-custom-css’ href=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/css/custom.css?ver=2′ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-includes/js/jquery/jquery.js?ver=1.11.0′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1′></script>
<script type=’text/javascript’>
/* <
“};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-content/plugins/enfold-latest-posts/asheu.js?ver=3.9.2′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/avia-compat.js?ver=2′></script>
<link rel=”EditURI” type=”application/rsd+xml” title=”RSD” href=”http://www.abundantforever.com/wp1/xmlrpc.php?rsd” />
<link rel=”wlwmanifest” type=”application/wlwmanifest+xml” href=”http://www.abundantforever.com/wp1/wp-includes/wlwmanifest.xml” />
<meta name=”generator” content=”WordPress 3.9.2″ />
<link rel=’shortlink’ href=’http://www.abundantforever.com/?p=1168′ />
<script type=’text/javascript’>
var colomatduration = ‘slow’;
var colomatslideEffect = ‘slideFade’;
</script>
<style>
.custom_font_style_1 {
color:Crimson;
background-image: none !important;
padding: 0 0 10px 0;
font-style:italic;
font-weight:bold;
display:inline
}
</style>
<!–[if lt IE 9]><script src=”http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/html5shiv.js”></script><![endif]–>
<style type=”text/css”></style><style type=”text/css”>
.synved-social-resolution-single {
display: inline-block;
}
.synved-social-resolution-normal {
display: inline-block;
}
.synved-social-resolution-hidef {
display: none;
}@media only screen and (min–moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx),
only screen and (min-resolution: 192dpi) {
.synved-social-resolution-normal {
display: none;
}
.synved-social-resolution-hidef {
display: inline-block;
}
}
</style><!–
Debugging Info for Theme support:Theme: Enfold
Version: 2.9.1
Installed: enfold
AviaFramework Version: 1.9.1
AviaBuilder Version: 0.7
ML:1024-PU:12-PLA:9
–><style type=’text/css’>
@font-face {font-family: ‘entypo-fontello’; font-weight: normal; font-style: normal;
src: url(‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.eot?v=3’);
src: url(‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.eot?v=3#iefix’) format(’embedded-opentype’),
url(‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff?v=3’) format(‘woff’),
url(‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.ttf?v=3’) format(‘truetype’),
url(‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.svg?v=3#entypo-fontello’) format(‘svg’);
} #top .avia-font-entypo-fontello, body .avia-font-entypo-fontello, html body [data-av_iconfont=’entypo-fontello’]:before{ font-family: ‘entypo-fontello’; }
</style>
</head><body id=”top” class=”page page-id-1168 page-template page-template-template-blank-php boxed droid_sans droid_sans avia-blank” itemscope=”itemscope” itemtype=”https://schema.org/WebPage” >
<div id=’wrap_all’>
<div id=’main’ data-scroll-offset=’88’>
<div class=’container_wrap container_wrap_first main_color fullsize’>
<div class=’container’>
<main class=’template-page content twelve alpha units’ role=”main” itemprop=”mainContentOfPage” >
<article class=’post-entry post-entry-type-page post-entry-1168′ itemscope=”itemscope” itemtype=”https://schema.org/CreativeWork” >
<div class=”entry-content-wrapper clearfix”>
<header class=”entry-content-header”></header><div class=”entry-content” itemprop=”text” ><style type=”text/css”>
body {scrolling:no;
}
iframe {position:absolute;
z-index:1;
top:0px;
left:0px;
border: 0 !important;
}
</style>
<p></head><br />
<body><br />
<iframe src=”http://www.abundantforever.com” height=”100%” width=”100%” frameborder=”0″></iframe><br />
</body></p>
</div><footer class=”entry-footer”></footer> </div>
</article><!–end post-entry–>
<!–end content–>
</main>
</div><!–end container–>
</div><!– close default .container_wrap element –>
<!– end main –></div><!– end wrap_all –></div>
<script type=’text/javascript’>
/* <![CDATA[ */
var avia_framework_globals = avia_framework_globals || {};
avia_framework_globals.frameworkUrl = ‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/framework/’;
avia_framework_globals.installedAt = ‘http://www.abundantforever.com/wp1/wp-content/themes/enfold/’;
avia_framework_globals.ajaxurl = ‘http://www.abundantforever.com/wp1/wp-admin/admin-ajax.php’;
/* ]]> */
</script><script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/avia.js?ver=2′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/shortcodes.js?ver=2′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-content/themes/enfold/js/aviapopup/jquery.magnific-popup.min.js?ver=2′></script>
<script type=’text/javascript’>
/* <![CDATA[ */
var mejsL10n = {“language”:”en-US”,”strings”:{“Close”:”Close”,”Fullscreen”:”Fullscreen”,”Download File”:”Download File”,”Download Video”:”Download Video”,”Play\/Pause”:”Play\/Pause”,”Mute Toggle”:”Mute Toggle”,”None”:”None”,”Turn off Fullscreen”:”Turn off Fullscreen”,”Go Fullscreen”:”Go Fullscreen”,”Unmute”:”Unmute”,”Mute”:”Mute”,”Captions\/Subtitles”:”Captions\/Subtitles”}};
var _wpmejsSettings = {“pluginPath”:”\/wp1\/wp-includes\/js\/mediaelement\/”};
/* ]]> */
</script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-includes/js/mediaelement/mediaelement-and-player.min.js?ver=2.14.2′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-includes/js/mediaelement/wp-mediaelement.js?ver=3.9.2′></script>
<script type=’text/javascript’ src=’http://www.abundantforever.com/wp1/wp-includes/js/comment-reply.min.js?ver=3.9.2′></script>
<span class=”avia_hidden_link_text”>Scroll to top</span>
<div id=”fb-root”></div>
</body>
</html>Hey!
In that case i’d suggest creating a completely new template, refer to this article:
http://codex.wordpress.org/Page_TemplatesRegards,
JosueThanks Josue,
I have looked at your suggestion and also tried so many other things. I searched the forum for hours, but I can’t find a solution.
I would think it would be something simple, but I have not enough knowledge to get it done.
When I look at the code of the Enfold blank template, it does a couple of things which I don’t understand (see below).
I just want my iframe be displayed full page. That should not be so hard should it?
Hope you can guide me some further to the solution.
Thanks,Stephen
<?php
/*
Template Name: Blank – No Header, no Footer
*/
/*
* A blank Template that allows you to build landing pages, coming soon pages etc
*/
global $avia_config;
$avia_config[‘template’] = “avia-blank”; //important part. this var is checked in header and footer php and if set prevents them from rendering. also an additional class is applied to the bodyif(!empty($avia_config[‘conditionals’][‘is_builder’]))
{
$avia_config[‘conditionals’][‘is_builder_template’] = true;
get_template_part(‘template-builder’);
exit();
}
else
{
get_template_part(‘page’);
exit();
}Hi!
I don’t think you will find something like that here because it is not directly related to the theme. Nevertheless, i made a Page template you can use:
https://gist.github.com/josueochoa/5c17b3d66eca6b746c7dRegards,
JosueThank you so much Josue, that was very helpful and saves me so much time. Now at least I can get my page now the way I need it.
I have one more question though. The template you made, is actually the page itself with the title and body hardcoded in it.
Is it easy to change it so that I can actually use it as a template in WordPress? In other words, that it takes the content from the page in WordPress using the Enfold theme? Or will that be a lot of programming?
Hopefully you can help me with this as well.
Thank you very much,Stephen
Hey Stephen!
It would require some programming, you can put any template tags there, for example the title:
<title><?php the_title(); ?></title>Reference:
http://codex.wordpress.org/Template_TagsCheers!
Josue
- The topic ‘How to display a full website in an iframe without scroll bars’ is closed to new replies.