Topic Closed
hoghoj1
185 Posts
HH-Support

I´m trying to embed not a youtube video, but a working link to a website, that works ok. But I am doing that with the theme Rifle, that has a sidemenu box. How to remove that sidemenu from one of the pages in that theme?

I want the embedded website to fill the entire page width.

I would also like the website to automatically adjust to the width of the embedded iframe

thx,

hoghoj1

Edited: 5 years ago#7851

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

Hi hoghoj1

removing the sidebar is quite easy:

In the Admin Box go to Appearance --> Manage Layouts

  1. In the "(Default)Rifle/default" box expand "Layout Options" and click "Copy", give the copied layout the name "Rilfe/nosidebar" (or such, you name it).
  2. A new Layout "Rifle/nosidebar" appears. Click "Edit this Layout"
  3. Remove the "Extra: Side Menu" Area in the sidebar. 2 empty Area fields will stay visible in the sidebar. Don't care about them.
  4. In the Layout Editor on the left paste the following CSS (which will override the content and sidebar's sizes/styles):
    #content { float:none; width:980px; }
    #content .contentbg { width:920px; }
    #sidebar { display:none; }
  5. Click the "Save" button below and leave Layout Editing mode by clicking "« Layouts" @ the top left.
  6. Go to Page Manager and click/select the page you want to render without sidebar. In the flyout on the right you should see "Rifle/default". Click it.
  7. Now you can select "Rifle/nosidebar" as layout for that page.

 

 

 

 

5 years ago#7852

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

I want the embedded website to fill the entire page width.

Since you're using an iframe, I assume it is it an external page.
If the iframe's source is from a different domain, you may not alter the content because this would be XSS (Cross Site Scripting).
If the iframe's source was on the same domain as your gpEasy website, you could change some styles using JavaScript/jQuery - but in this case you likely would also have direct control of the embedded page's css.

I would also like the website to automatically adjust to the width of the embedded iframe

I'm not sure if I understand. You have full control of the iframe's size. Or does it scale automatically? (Some 3rd parties that provide embedded content via iframes use custom JavaScript to achieve responsive scaling. Is this the case?)

Edited: 5 years ago#7853

hoghoj1
185 Posts
HH-Support

Hi Juergen,

what I mean is that I want the embedded iframe to fill the entire width of the webpage (in this case Rifle's template), but also would know, if it is possible to automatically fit the full width of the (external) webpage into the iframe - hope this makes better sense of the question :-)

 

5 years ago#7855

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

what I mean is that I want the embedded iframe to fill the entire width of the webpage (in this case Rifle's template)

Should be possible when using the "nosidebar" template.

If you want the iframe to fill the whole dark area (<div id="page">) including the padding, you could use negative margins on the iframe like
<iframe style="width:100%; height:[some]px; margin:-30px" [...] >

but also would know, if it is possible to automatically fit the full width of the (external) webpage into the iframe

The external page must be coded to cover the full available width. If it is not, you won't get it working :..(
You may not change the content/behavior of an embedded external document from "outside", where "outside" is your gpEasy site.
It's a security restriction and would be XSS if it worked.

5 years ago#7856

hoghoj1
185 Posts
HH-Support

Hi Juergen,

everything worked fine with removing he sidebar, but when I tried to adjust the margins, it only affected the height - experimented a while with some parameters and bingo, works really nice :-)

this was the result: http://www.kubbi.info/index.php/Quad-Lock_Homepage

Thx for all your good and speedy help.

hoghoj1

5 years ago#7857

juergen
1.5K Posts
55.9K Downloads
16 Plugins
design, web development & visual effects

If you want to get rid of the border completely, you could do this:

<p style="margin:-60px -30px;"><iframe frameborder="0" style="height:800px; width:100%;" src="http://www.quadlock.com/index.html" allowfullscreen=""></p>

 

Edited: 5 years ago#7865

Topic Closed

 

News

elFinder 2.1.50 in Upcoming Release
12/28/2019

A new release for Typesetter is in the works with a lot of improvements including the ... Read More

Typesetter 5.1
8/12/2017

Typesetter 5.1 is now available for download. 5.1 includes bug fixes, UI/UX improvements, ... Read More

More News

creisi productions

Dienstleistungen von creisi productions, Luzern (Schweiz): * Konzeption, Planung und Erstellung Ihres Internet-Auftritts * Betreuung und Aktualisierung/Pflege Ihrer Website * ...

Find out more about our Provider Spotlight

Log In

  Register