I think the solution is witin Step 1 >  statistics and seo and code -> code > Add CSS file to linked HTML codes

The ony issue I have now, although it is now the same font, it is not as sharp/clear for some reason. 

Hello Roger,

Please post a link to the webpage in question.

Kind regards,

Paul

Search the WebSite X5 Help Center (multilingual)

(It > En) ... in addition to following Paul's advice for the LINK,
... if the page that uses the DB resides in your own WEB space, then you could try to incorporate this page into the project with an IFRAME ...

ciao

.

Hello Gents - I dont really want to share pubically just yet - hopefully I will find time over the weekend to make it more publishable and then will post a link. 

Im not so sure an iFrame is the answer as the DB side is quite dynamic - but I will give it a shot Kol.

Kol - The iFrame does not work for me - I cannot get the height to be dynamic (I dont want scroll bars) - any ideas? 

Hello Roger

You can add some code to adjust the height automatically.

I have an example here : http://bramminginfo.dk/tambours-have.html

A slideshow is put in an iframe. The heght of the iframe is adjusted as the screen is resized. I have made 4 breakpoints but more could be made.

You can see how it is made via Ctrl+U or see this thread ( last posts )

(It > En) ... if the DB page resides on the same domain as your site, you could make the height of the IFRAME dynamic ...
... or, if the DB page resides on a domain other than the site, but you can edit the HTML code of the DB page, also in this case the height of the IFRAME could be made dynamic, with EXTRA code ...
.

Hello, ciao

.

John / KolAsim, 

I am not really a coder as such - Im quite happy to cut and paste code when told and I can edit it but struggle to develop it. 

Could you post the link to the thread with instructions on how to do please.

As far as I could work out John, this was your code:

</div><div id="imCell_14" class="" data-responsive-sequence-number="9"><div id="imCellStyleGraphics_14"></div><div id="imCellStyleBorders_14"></div><div id="imHTMLObject_165_14" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;"><iframe id="album" src="" width="100%" frameborder="0"></iframe></div></div><div id="imCell_18" class="" data-responsive-sequence-number="10"><div id="imCellStyleGraphics_18"></div><div id="imCellStyleBorders_18"></div><div id="imHTMLObject_165_18" class="imHTMLObject" style="text-align: center; width: 100%; overflow: hidden;"><script> function narrowWin() { var iFrame = document.getElementById('album'); if (window.innerWidth > 1150) { //large screen iFrame.style.height = '570px'; } else if (window.innerWidth > 720){ //narrow screen iFrame.style.height = '400px'; } else if (window.innerWidth > 480){ //narrow screen iFrame.style.height = '310px'; } else { iFrame.style.height = '270px'; } iFrame.src="http://bramminginfo.dk/lokationsbilleder/album.php?a=Varde/TambourHave&p=3&s=4"; }

with this being the key bit for height?....

(window.innerWidth > 1150) { //large screen iFrame.style.height = '570px'; } else if (window.innerWidth > 720){ //narrow screen iFrame.style.height = '400px'; } else if (window.innerWidth > 480){ //narrow screen iFrame.style.height = '310px'; } else { iFrame.style.height = '270px'; }

(It > En) ... for the case of my first hypothesis, ... you could settle for this > simple example of mine;
(Ctrl+U   for the code)
... you can learn more >> here...
....
... ... for the case of my second hypothesis, you can study e tap into directly to the source:
http://davidjbradshaw.github.io/iframe-resizer/

.

ciao

.

(I'm not a programmer)

.

Hello Roger

Sorry - I forgot the link : https://helpcenter.websitex5.com/de/post/215577

The code is quite simple - it is here :

In the page settings - BODY tag property I have :

onload="narrowWin()" onresize="narrowWin()"

And in the page I  have  ( in a html-object ):

<script>
function narrowWin() {
var iFrame = document.getElementById('album');
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '570px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '400px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '310px';
} else {
iFrame.style.height = '270px';
}
iFrame.src="YourownURL";
}

</script>

You can adjust the heights and screen width to your needs.

The onresize does that when  a user resizes the screen or change mobile from portrait to landscape, then the iframe is adjusted.

You set the src in the iframe to "" ( no content ) and the id of the iframe to album.

If you have problems then a post.

Thank you Gents, going to have a trail over the weekend - will report back

I just cannot get this to work - I must be missing a trick somewhere? 

<script>
function narrowWin() {
var iFrame = document.getElementById('');
if (window.innerWidth > 1150) { //large screen
iFrame.style.height = '570px';
} else if (window.innerWidth > 720){ //narrow screen
iFrame.style.height = '400px';
} else if (window.innerWidth > 480){ //narrow screen
iFrame.style.height = '310px';
} else {
iFrame.style.height = '270px';
}
iFrame.src="https://getkonnected.knack.com/korc-mtb-registration#member-home-page/";
}

</script>

The code must be in the "HTML code" section/tab in the html object.

AND you have to have a html object where you specify the iframe

Example

<iframe id="album" src="" width="100%" frameborder="0"></iframe>

John, 

sorry to drag this out - can you step by step me on this bit please (Im learning fast and it really is appreciated!)...

AND you have to have a html object where you specify the iframe

Example

<iframe id="album" src="" width="100%" frameborder="0"></iframe>

John, 

Worked it out - thank you so much!

If only I could get rid of those pesky slider bars from the iFrame this would be the perfect solution

You mean the scroll bar?

The scroll bars should only be present when the iframe is specified "bigger" than the space you make available.

Do you have a link?

https://www.getmyapp.co.uk/KORC-MTB/

I made the height oversized (12000pix) as some pages will always be taller than others - the ideal would have been iframe=100%.

Turns out there is a bigger problem, within the database software I am using, when I have used a "pop up" page (press 'book into site') the pop ups do not work

This is the page as normal (not iframes) https://getkonnected.knack.com/korc-mtb-registration#member-home-page/

Temp login: 

user: ***
pass: temp

The pop up window only seems to be a problem on mobile devices. 

Its back to my original comment of just wishing I could embedd/iframe without it affecting my original CSS

found another bug (for me) I really liked the right click protection - that function does not work in iframes - Im sure there is an answer somewhere! 

email addresses must be written in a special way - if not - then they will be seen as ***

For that reason I have not been able to see your system.

Example : your(@)email.com

ahh sorry

user(@)webx5.com

Hello Roger

It seems that you have the height much too high.

You have to adjust the height so your iframe wont force the vertical slider/scrollbar to be shown.

Then you must for the differebt viewports set the height in the script so it matches that the 3. software don't also make a scrollbar.

If you need a good web calendar with booking features you could also look at the Luxcal calendar.

Link here : http://calendarforum.dk/  and here : http://www.luxsoft.eu/index.php?pge=demos

This is easy to manage and easy to implement and integrate with the X5.

See some features here : http://www.luxsoft.eu/index.php?pge=dtail

(It > En) ... ... opening the external page in PopUp window could be a simple solution ...
... the external page is on the same server as your site ...?...

.

John/Kolasim, 

Thank you for perservering with me on this. Its appreciated. 

John, 

My issue is that many of the pages from my database can be different heights, Ive just provided a snap shopt, some of my databases have hundreds of pages. some are just simple forms, others are tables that might have 10 lines or 100 lines. I need the iframe to be dynamic but because I could not do that I set it oversize. 

Thanks for the suggestion, but the calendar function within knack is extremely poweful and incorportated into the main database - I can use it to display events depending on other conditions amoungst many other things. 

KolAsim, 

The "popup" if from the database pages - its not in the W5 site or host. 

Did you see this : https://support.knack.com/hc/en-us/articles/225451907-Viewing-and-Embedding

It tells how to embed the knack in an existing website.

Hello John, 

Yes, Ive tried all they mention. 

Where Knack recomend placing <!DOCTYPE html public "-//w3c//dtd html 4.01//en" "https://www.w3.org/tr/html4/strict.dtd">

I get an error message: Erroneous DOCTYPE. Expected. <!DOCTYPE html>.

I just cannot find the answer

>>  PopUp  ... .. . .

.

As KolAsim tell - try the popup.

You could still have it in a menu item in X5. Then you could use the popup or the new page.

For both possibilities you can specify a size for the popup or the window.

It is not integrated into your site - but close.

Gents, 

The popup looks like the way forward - thank you very much for sticking with me on this

Kolasim, 

I did laugh out loud with your URL 

/trash/korcsport.html#

Made me smile! :-) 

(It > En)  ... ))))) ... is a temporary directory "trash" for superfluous examples that will be automatically deleted after about 24-48 hours ...

ciao

.