[Rainbowportal-devel] re: Style Sheet Question ( S-P-A-M5.4/5.0 )

SourceForge Headquarters 225 Broadway Suite 1600 San Diego, CA 92101 +1 (858) 454-5900

How about putting these golden nuggets of information/documentation/wisdom into the Rainbow Wiki Documentation space? That way it won't get lost, it is visible and searchable by all, and it becomes obvious when there is enough accumulated to warrant a new document?

Daniela
_________________________________________________________________
"It is with logic that we prove, but by intuition that we discover." (Henri Poincare)

----- Original Message ----- 
From: Mike Stone 
To: rai...@li...
Sent: 12/30/2004 6:14:21 AM 
Subject: re: [Rainbowportal-devel] Style Sheet Question ( S-P-A-M5.4/5.0 )

Thank you, I will put this away someplace safe until it the doc team has a chance to take it and run with it :)

Mike Stone
Director of Computer Information Services
Kaskaskia College
27210 College Road
Centralia, IL 62801
618-545-3201
www.kaskaskia.edu

>>> je...@ma... 12/30/2004 07:04:15 >>>

Hi Mike,

Thanks for asking this question: I am guilty of not providing documentation for this and several other new features in Page.cs

cssFileList is a private member accessible only through:
    public void RegisterCssFile(string key, string file)
There is a corresponding method:
    public bool IsCssFileRegistered(string key)
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).

There is a sister technique to this one with two similar methods:
    public bool IsCssImportRegistered(string key)
    public void RegisterCssImport(string key, string import)
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.

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:

<html>
 <head>
    <title>Hello, world!</title>
    <meta name="generator" content="Rainbow Portal - see http://www.RainbowPortal.net"/>
    <META http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <link rel="stylesheet" href="/rainbow/Design/Themes/zen-RainbowInfo-1/zen.css" type="text/css"/>
    <link rel="SHORTCUT ICON" href="/rainbow/Portals/RainbowInfo/portalicon.ico"/>
    <style type="text/css">
    <!--
    #mID10268 p{margin:0 0 0.33em 0;color:Gray;font-size:1em;font-style:italic;}
    #mID10268 h2{margin:0em;padding:0em 1em 0em 5px;color:Red}
    -->
    </style>
    <style id="spMenuStyle" type="text/css"></style>
    <script type="text/javascript" src="/rainbow/aspnet_client/popupHelper/popup.js"></script>
    </head>
    <body>
      etc...

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!

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:

@import url(rainbow.css);
@import url(admin.css);
body{
...blah...
...blah...
}
etc....

Whilst I'm on the subject, there are three more new "injectors" in Page.cs:
    public bool IsClientScriptRegistered(string key)
    public void RegisterClientScript(string key, string filePath)
which will inject a <link> to Javascript file into the <head>,
    public bool IsAdditionalMetaElementRegistered(string key)
    public void RegisterAdditionalMetaElement(string key, string element)
which will inject any supplied string (usually a complete <meta> element) into the <head> element, and
    public bool IsBodyOnLoadRegistered(string key)
    public void RegisterBodyOnLoad(string key, string functionCall)
which will assemble supplied strings into a single onload="..." attribute and add it to the <body> element of the page.
Also available (through the Site Settings page) are a DOCTYPE injector and a "body attributes" injector.

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 id="mID10268" class="HtmlModule_ascx>...</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:

#mID10268 p{color:red} will affect paragraph elements ONLY in the module whose ID is 10268
.HtmlModule_ascx p{color:red} will affect paragraphs ONLY in instances of the Html Module.

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.

I hope this explains everything. Let me know if you have any questions or problems.

Jeremy (jes1111)

----------------------- Original Message -----------------------

From: "Mike Stone" <ms...@kc...>
To: <rai...@li...>
Date: Wed, 29 Dec 2004 22:16:47 -0600
Subject: [Rainbowportal-devel] Style Sheet Question

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?

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.  

How does cssFileList get more then one entry?

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.

Thanks

Mike Stone
Director of Computer Information Services
Kaskaskia College
27210 College Road
Centralia, IL 62801
618-545-3201
www.kaskaskia.edu
------------------------------------------------------- The SF.Net email is sponsored by: Beat the post-holiday blues Get a FREE limited edition SourceForge.net t-shirt from ThinkGeek. It's fun and FREE -- well, almost....http://www.thinkgeek.com/sfshirt _______________________________________________ Rainbowportal-devel mailing list Rai...@li... https://lists.sourceforge.net/lists/listinfo/rainbowportal-devel