re: [Rainbowportal-devel] Style Sheet Question
Brought to you by:
danijel_kecman,
manudea
Menu
▾
▴
re: [Rainbowportal-devel] Style Sheet Question
|
From: Jeremy E. <je...@ma...> - 2004-12-30 13:03:40
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD> <META http-equiv=Content-Type content="text/html; charset=iso-8859-1"> <META content="MSHTML 6.00.2800.1479" name=GENERATOR></HEAD> <BODY style="MARGIN: 4px 4px 1px; FONT: 10pt Tahoma" leftMargin=1 topMargin=1 rightMargin=1><FONT face=Tahoma size=2> <DIV>Hi Mike,</DIV> <DIV> </DIV> <DIV>Thanks for asking this question: I am guilty of not providing documentation for this and several other new features in Page.cs</DIV> <DIV> </DIV> <DIV>cssFileList is a private member accessible only through:<FONT size=2></DIV><FONT color=#0000ff size=2> <P> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>void</FONT><FONT size=2> RegisterCssFile(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key, </FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> file)</P> <P></FONT></FONT><FONT size=2></FONT>There is a corresponding method:</P><FONT color=#0000ff size=2> <P> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>bool</FONT><FONT size=2> IsCssFileRegistered(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key)</P> <DIV></FONT>Obviously, therefore, it is designed to be used in exactly the same fashion as the framework-provided script injectors. An example might be a particular custom module which carries it's own unique CSS. From within the module's Page_Load you could inject that CSS file into the page (using IsCssFileRegistered to make sure you only do it once for the page).</DIV> <DIV> </DIV> <DIV>There is a sister technique to this one with two similar methods:</DIV> <DIV><FONT color=#0000ff size=2> <P> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>bool</FONT><FONT size=2> IsCssImportRegistered(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key)</FONT></P> <P><FONT size=2></FONT><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>void</FONT><FONT size=2> RegisterCssImport(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key, </FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> import)</P></FONT></DIV> <DIV>This would be used in the same way, but instead of "injecting" a <link>...<link> to CSS file, you feed it strings and it will write those strings into the <head> of the page enclosed in a <style> block.</DIV> <DIV> </DIV> <DIV>Another alternative is to create a custom theme to go with your custom module and use the Custom Theme per Module feature. This works very differently: it will parse the CSS found in the theme's referenced CSS file, prefix every rule-set with the module unique ID, then inject that CSS into the output page in a <style>...</style> block. This ensures that none of the injected CSS will overlap or override the page's "overall" theme, even if the same selectors are used. Here's an example of what the page output might look like:</DIV> <DIV> </DIV> <DIV><html><BR> <head></DIV> <DIV> <title>Hello, world!</title><BR> <meta name="generator" content="Rainbow Portal - see <A href='http://www.RainbowPortal.net"/'>http://www.RainbowPortal.net"/</A>><BR> <META http-equiv="Content-Type" content="text/html; charset=windows-1252" /><BR> <link rel="stylesheet" href="/rainbow/Design/Themes/zen-RainbowInfo-1/zen.css" type="text/css"/><BR> <link rel="SHORTCUT ICON" href="/rainbow/Portals/RainbowInfo/portalicon.ico"/><BR> <style type="text/css"><BR> <!--<BR> #mID10268 p{margin:0 0 0.33em 0;color:Gray;font-size:1em;font-style:italic;}<BR> #mID10268 h2{margin:0em;padding:0em 1em 0em 5px;color:Red}</DIV> <DIV> --><BR> </style><BR> <style id="spMenuStyle" type="text/css"></style><BR> <script type="text/javascript" src="/rainbow/aspnet_client/popupHelper/popup.js"></script><BR> </head></DIV> <DIV> <body><BR> etc...</DIV> <DIV> </DIV> <DIV>Thus paragraphs and level 2 headings in the module whose ID is 10268 will be styled differently to the rest of the page. In order for a theme to appear in the dropdown list of Custom Themes on the module's settings page, its name must start with "module-". It follows also that you'll want to keep the CSS short!</DIV> <DIV> </DIV> <DIV> <DIV>Note that an alternative, depending on your requirement, would be to use Zen's technique of combining multiple CSS files. In the CSS file that is nominated by your Theme, use one or more CSS "include" statements:</DIV> <DIV> </DIV> <DIV>@import url(rainbow.css);<BR>@import url(admin.css);<BR>body{</DIV> <DIV>...blah...</DIV> <DIV>...blah...</DIV> <DIV>}</DIV> <DIV>etc....<BR></DIV> <DIV>Whilst I'm on the subject, there are three more new "injectors" in Page.cs:</DIV> <DIV> <P><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>bool</FONT><FONT size=2> IsClientScriptRegistered(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key)</P></FONT> <P><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>void</FONT><FONT size=2> RegisterClientScript(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key, </FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> filePath)</FONT></P> <P>which will inject a <link> to Javascript file into the <head>,</P><FONT color=#0000ff size=2> <P> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>bool</FONT><FONT size=2> IsAdditionalMetaElementRegistered(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key)</FONT><FONT size=2></P> <P></FONT><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>void</FONT><FONT size=2> RegisterAdditionalMetaElement(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key, </FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> element)</FONT></P> <P><FONT size=2>which will inject any supplied string (usually a complete <meta> element) into the <head> element, and</FONT></P><FONT size=2><FONT size=2> <P></FONT><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>bool</FONT><FONT size=2> IsBodyOnLoadRegistered(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key)</P></FONT><FONT size=2> <P></FONT><FONT color=#0000ff size=2> public</FONT><FONT size=2> </FONT><FONT color=#0000ff size=2>void</FONT><FONT size=2> RegisterBodyOnLoad(</FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> key, </FONT><FONT color=#0000ff size=2>string</FONT><FONT size=2> functionCall)</FONT></P> <P><FONT size=2>which will assemble supplied strings into a single onload="..." attribute and add it to the <body> element of the page.</P></FONT></FONT></DIV></DIV></FONT> <DIV style="FONT-SIZE: x-small; FONT-FAMILY: Tahoma"> <DIV>Also available (through the Site Settings page) are a DOCTYPE injector and a "body attributes" injector.</DIV> <DIV> </DIV> <DIV>Lastly, on the subject of CSS, the PortalModuleControl class has a new feature: it wraps every module in a <div> element with two attributes set as follows:</DIV> <DIV> </DIV> <DIV><div id="mID10268" class="HtmlModule_ascx>...</div></DIV> <DIV> </DIV> <DIV>Thus you can now target CSS rules at specific module instances (by using the ID) or all instances of a module type (by using the class). For example:</DIV> <DIV> </DIV> <DIV>#mID10268 p{color:red} will affect paragraph elements ONLY in the module whose ID is 10268</DIV> <DIV>.HtmlModule_ascx p{color:red} will affect paragraphs ONLY in instances of the Html Module.</DIV> <DIV> </DIV> <DIV>Note that all these tricks are available to Classic and Zen sites - they are in the core, not specific to Zen, although Zen makes extensive use of them.</DIV> <DIV> </DIV> <DIV>I hope this explains everything. Let me know if you have any questions or problems.</DIV> <DIV> </DIV> <DIV>Jeremy (jes1111)</DIV> <DIV> </DIV> <DIV> </DIV> <DIV>----------------------- <B>Original Message</B> -----------------------</DIV> <DIV> </DIV> <DIV><B>From:</B> "Mike Stone" <A href="mailto:ms...@kc..."><FONT color=#0000ff><ms...@kc...></FONT></A></DIV> <DIV><B>To:</B> <A href="mailto:rai...@li..."><FONT color=#0000ff><rai...@li...></FONT></A></DIV> <DIV><B>Date:</B> Wed, 29 Dec 2004 22:16:47 -0600</DIV> <DIV><B>Subject: <U>[Rainbowportal-devel] Style Sheet Question</U></B></DIV> <DIV> </DIV></DIV> <DIV>I noticed that the Page.cs has a foreach loop to load I would think more then one .css file for a given Theme/Layout?</DIV> <DIV> </DIV> <DIV>How do you do this? I have a .css file that is for all my custom modules for my intranet mostly for datagrids and such so they all look the same, but every time I upgrade I have been manually adding them to the theme. </DIV> <DIV> </DIV> <DIV>How does cssFileList get more then one entry?</DIV> <DIV> </DIV> <DIV>ps. Yes I know I can copy a theme to a new name and just copy that theme back into the upgraded with my changes. was thinking this way might be useful for other things.</DIV> <DIV> </DIV> <DIV>Thanks</DIV> <DIV> </DIV> <DIV>Mike Stone<BR>Director of Computer Information Services<BR>Kaskaskia College<BR>27210 College Road<BR>Centralia, IL 62801<BR>618-545-3201<BR><A href="http://www.kaskaskia.edu">www.kaskaskia.edu</A></DIV></BODY></HTML> |