FAQ / How to insert an iFrame into SEOCMS

How to insert an iFrame into SEOCMS.

This chapter explains how to insert iFrames into SEOCMS.

It also explains how to configure the iFrame the way you want it.

We recommend that you create a title for your iFrame just to simplify future edits.

Insert an iFrame into SEOCMS

Drag and drop a text and image-module into the container where you want your iFrame to appear.
Create a title for your iFrame (this simplifys future edits as you double-click the title when you want to edit)
Enter text for your title.
Press Enter two times to create two linebreaks.
Select the ’Html’ tab.
Enter the following code:
<iframe style="width: 800px; height: 600px" name="DN" src="http://www.dn.se" frameborder="0" scrolling="no"></iframe>
Edit the code for the iFrame the way it's explained below to configure the iFrame the way you want.
Click ’Update’.
Save and publish.
Done.

How to edit the iFrame code

Example:

This iFrame shows www.dn.se.
The width is set to 800 px. The height is set to 600 px.
Borders are disabled around the iFrame.
Scrolling is disabled.
The iFrame title is set to "DN"

Change source for your iFrame (change which site to iFrame)

If you want to change the source (site) to be shown in your iFrame you need to edit the src-property.

This is where you enter the desired URL.

Chenge the src-property src=http://www.dn.se to desired source.

I.e if you want to iFrame www.google.se - you just need to enter:
src=http://www.google.se

This example shows an iFrame with www.google.se as source.

Edit title

If you want to edit the title for your iFrame you just need to edit the name-property.

This property is not important, but it could come in handy to give it a matching title.

I.e if the title should be "google" , the name-propery should be like this:

name="google"

Example with the iFrame titled as Google:

Edit width and height
If you want to edit the width and height on your iFrame - you just need to edit the style-property.
Change the style-property style="width: 800px; height: 600px" to desired width and height.

I.e if the iFrame should be 500 px in width and 200 px in height, the style-property should be like this:

style="width: 500px; height: 200px"

To change width:

Make the iFrame wider

Edit width: 800px; to i.e. width: 900px;

Make the iFrame thinner

Edit width: 800px; to i.e. width: 700px;

To change height

Gör IFramen Högre

Ändra height: 600px; till t.ex. height: 700px;

Gör IFramen Lägre

Ändra width: 600px; till t.ex. width: 500px;

Exempel på kod för en IFrame som är 200 pixlar hög och 200 pixlar bred:

How to create a border around the iFrame

If you want to add a border around your Iframe you can edit this in the frameborder- property.

Make the border visible:

Change the frameborder-property to "1".

Example: frameborder="1"

Disable the border:

Change the frameborder-property to "0", if you want to disable the border.

Example: frameborder="0"

This example shows a border with a visible border.

Enable scrolling in your iFrame

If you want to enable scrolling in your iFrame you can edit the scrolling-property.

This needs to be done if the page you have iFramed is bigger than the dimensions given in the style-property.

The problem is solved by using scrollbars - to be able to move around the iFrame.

To add scrollbars:

Edit the scrolling-property and set it to yes.

Example: scrolling="yes"

To disable scrollbars:

Edit the scrolling-property and set it to no.

Example: scrolling="no"

This example shows an iFrame with scrollbars.