css style iframe content

hiropowers · #1 Apr 20th, 2007, 13:53

I have xthml page with an iframe that has src="dynamic-source" for a wysiwyg editor, I'm trying to style the content inside the iframe from the page that contains the iframe. The browser sees the iframe as a separate frame therefore a separate page. As the iframe content is dynamic, I cannot include the css on the iframe's src (content page of iframe)... There must be a way to apply css style to the iframe content from the page that contains the iframe... ANY hits would be awesome!! thanks

moojoo · #2 Apr 20th, 2007, 14:19

Why not have the css include dynamically as well? Pretty simple with PHP/MySQL

Gwayn · #3 Apr 20th, 2007, 15:10

Wait, maybe i havent understood, you have:

Code: Select all

<body id="tmpl1">
    <iframe id="editor"> 
        <span>Title</span> 
        <div id="box"><?php editor(); ?></div>
    </iframe>
</body>

Right?
If so, you just have to reference to the content of the iframe in the css, for example:

Code: Select all

body#tmpl1 iframe#editor{background: #FFF;}
body#tmpl1 iframe#editor span {color: #00F; display:block; margin-bottom: 5px;}

And so on...

Quote:

Originally Posted by moojoo

Why not have the css include dynamically as well? Pretty simple with PHP/MySQL

I dont think it's a good idea to dinamically include the css inside the page.
Keep in mind that the content of a page has to be handled by the CMS, not the structure. And i think that everything goes into <head> tag is part of the html structure.
Anyway there are pretty much easier ways to achieve the result he wants without a dinamically included css.

hiropowers · #4 Apr 21st, 2007, 00:54

Quote:

Originally Posted by Gwayn

Code: Select all

body#tmpl1 iframe#editor{background: #FFF;}
body#tmpl1 iframe#editor span {color: #00F; display:block; margin-bottom: 5px;}

Unfortunately I'm having trouble being that specific from the body down to the iframe as some of the div and even table id's are also dynamic!

Here is the dom tree down to the iframe:

Code: Select all

<html>
<body>
<form id="main_form">
<table id="backend_section_4">
<tr>
<td>
<table class="sq-backend-section-table-inner">
<tbody>
<tr>
<td class="sq-backend-data">
<table class="bodytext">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td id="dynamic creaded id">
<div ="dynamic creaded id">
<div id="htmlarea">
<iframe id="iframe-div">
<html>
<body>
<p>dynamic content here!!!</p>

So I have attempted to be ultra specific (I'm not predominantly a css programmer)

Code: Select all

html body form#main_form table#backend_section_4 tr td table.sq-backend-section-table-inner tbody tr td.sq-backend-data table.bodytext tbody tr td table tbody tr td div div.htmlarea iframe#iframe-div {
    color: #f30; }

With little success

hiropowers · #5 Apr 21st, 2007, 01:06

Quote:

Originally Posted by moojoo

Why not have the css include dynamically as well? Pretty simple with PHP/MySQL

Happy to try it... I can only reference the fileserver (not db) ... could I use include pulling in css file on fileserver? Have example?

hiropowers · #6 Apr 21st, 2007, 01:18

Another thought:
Could I apply a style reference in the backend (this is open source CMS) in dom where the iframe dom is created? it was there that I was able to create an id for the iframe with

Code: Select all

iframeobj.id = "iframe-div";

So is there a dom assignment for style? such as

Code: Select all

iframeobj.style = "somehow import style from fileserver";

Really clutching at straws now

moojoo · #7 Apr 21st, 2007, 14:14

Not quite sure what the problem is, an iFrame just imports another file so why not have the css linked in the head of the other file? Even if it is dynamic you can still have a predefined structure. Oh well. Guess I misunderstood the question.

hiropowers · #8 Apr 22nd, 2007, 01:43

Hay, no you got it - quite spot on really, if I had set this up I would do just that, find the imported file's template and add the css at the top.... however... and this is a big however

...

...the backend of this cms brings in the content of the iframe by an sql query to oracle db to bring in the content div that makes up the content of the page the user wishes to edit. At the point the backend defines what is going to be edited it is purely a php/sql query to oracle db... the db stores divs as separate assets (the app server builds pages on the fly from designs made up of xhtml and css and the div assets stored in db for content)..

... in short I cannot apply a 'template' with xhtml or css or js in the backend to 'wrap' the content being dynamically brought into the iframe...

I was interested in the dynamic applying css with php... but as the iframe has it's own dom I'm starting to think I cannot apply css to the content of the iframe from the page that contains the iframe...

Gwayn · #9 Apr 22nd, 2007, 10:52

Quote:

Originally Posted by hiropowers

Hay, no you got it - quite spot on really, if I had set this up I would do just that, find the imported file's template and add the css at the top.... however... and this is a big however

...

...the backend of this cms brings in the content of the iframe by an sql query to oracle db to bring in the content div that makes up the content of the page the user wishes to edit. At the point the backend defines what is going to be edited it is purely a php/sql query to oracle db... the db stores divs as separate assets (the app server builds pages on the fly from designs made up of xhtml and css and the div assets stored in db for content)..

... in short I cannot apply a 'template' with xhtml or css or js in the backend to 'wrap' the content being dynamically brought into the iframe...

I was interested in the dynamic applying css with php... but as the iframe has it's own dom I'm starting to think I cannot apply css to the content of the iframe from the page that contains the iframe...

OK, if you can refer to the iframe because of it's dinamic nature you can always link the css inserting the proper html string inside the php file that prints the content of the iframe.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Flash content resets, when style.display is used (prob in firefox, IE fine)	call14	JavaScript Forum	13	Feb 28th, 2008 13:58
[SOLVED] refresh a different iframe once an iframe elsewhere has loaded	cosmicbdog	JavaScript Forum	1	Jan 25th, 2008 01:50
Can a jsp file in an IFrame calls a javascript function outside of the IFrame	jadeite100	JavaScript Forum	0	May 31st, 2007 14:29
printing style sheets to provide A5 size printouts without making content smaller	paulbarris	Web Page Design	5	May 9th, 2007 19:37
Set content for IFRAME in New Window	noodlegarage	JavaScript Forum	0	Feb 7th, 2007 07:44

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
css style iframe content