alexrib napisał(a):
Hi,
I have a web application which uses external CSS files extensively.
Now, I need to port this application to run inside a portlet. So, it
will not generate a complete HTML document, but just a fragment. How
can I apply an external CSS file not to the whole HTML document, but
just to a div section ?
I see 2 alternatives:
1) to use a system prefix in every ID and CLASS attribute. This will
be generate a lot of work for me.
2) to code a JavaScript code to load the CSS file and apply it to the
document. I think this is possible, but I don´t know how to do it.
1)
I am not sure what you can do and what is not possible, but
instead of adding a prefix to each ID and CLASS attribute in
your code, you can convert it this way:
Let's say your CSS looks like
a { color: #00f; }
p { magin: 1em;
p.someclass { background:#eee ; }
h2 { border-bottom:solid 1px #000; }
you can change it to:
#portletId a { color: #00f; }
#portletId p { magin: 1em;
#portletId p.someclass { background:#eee ; }
#portletId h2 { border-bottom:solid 1px #000; }
and use <div id="portletId" > your code here.. </div>
Of course this solution will work if your stylesheet will be
linked in <head> section. If the only part you can modify is
your <div> content, I think you may try some Javascript to
add it to the <head>, for example:
2)
<script type="text/javascript">
//<![CDATA[
var csslink=documen t.createElement ('link')
csslink.setAttr ibute('rel','st ylesheet');
csslink.setAttr ibute('href','y our/css/url/path');
document.getEle mentsByTagName( 'head')[0].appendChild(cs slink);
//]]>
</script>
It worked in my Firefox but I can not guarantee it is
totally cross-browser solution.
