CSS and sIFR of CWS2 !

Mar 8, 2009 at 11:48 PM
Edited Mar 8, 2009 at 11:52 PM
There is something I do not understand about the use of CSS and sIFR in CWS2.

For example, in the main master page layout, as pet the following code block: 

                    <h1 class="flashHeader left">
                        <a href="/" title="&laquo; Back to home">
                           <umbraco:Item field="siteName" recursive="true" runat="server"></umbraco:Item>
                        </a>
                    </h1>

the Site Name is always converted to UPPER CASE !!! Where it is converted to UPPER CASE ?

If I remove the h1 tag and flashHeader class, it will be displayed as per the original case.

Also, I noticed that in "Home" master, as per this code block:

        <div class="left col_2">
            <h2 class="flashHeader">
                <umbraco:Item field="headerText" stripParagraph="true" runat="server"></umbraco:Item>
            </h2>
            <umbraco:Item field="bodyText" runat="server"></umbraco:Item>                             
        </div>

The "headerText" item text which is bold has different color than the regular text, and the color is predefined elsewhere and I do not know where !!

Could you please explain to me how this effect is taking place ? This is very uncommon use for CSS, and I cannot trace it. This looks some kind if specific use of sIFR which is new to me.

Please help.

Tarek.
Mar 9, 2009 at 9:40 AM
Edited Mar 9, 2009 at 9:44 AM
Hello Tarek.
All of the settings, colours, font sizes are stored in the JS file called sifr-config.js which can be found at /Scripts/sIFR/

In this JS you will see the following where i have set the CSS rule text-transform to uppercase :)

//Replace header <h1> with class of flashHeader
            sIFR.replace(Amasis_MT_font, {
                selector: 'h1.flashHeader',
                css: [
                '.sIFR-root { font-size:32px; font-weight:normal; color:#f49ac1; leading:-10; letter-spacing:-2; text-transform:uppercase; }',
                'a { text-decoration: none }',
                'a:link { color: #f49ac1 }',
                'a:hover { color: #FFFFFF }'
                ],
                wmode: 'transparent'
            });

With this rule below we have set that when we find the strong tag inside the <h2 class="flashHeader"> we will change the colour and font-weight.

//Replace header <h2> with class of flashHeader
            sIFR.replace(Amasis_MT_font, {
                selector: 'h2.flashHeader',
                css: [
                '.sIFR-root { font-size:28px; font-weight:normal; color:#FFFFFF; leading:-3; letter-spacing:-1; }',
                'a {color:#FFFFFF; text-decoration:none;}',
                'strong { font-weight:bold; color:#f49ac1; }'
                ],
                wmode: 'transparent'
            });

I strongly recommend you read up on sIFR for anymore advice/tips etc related to sIFR and recommend these links to read.
http://wiki.novemberborn.net/sifr3/
http://designintellection.com/2008/this-is-how-you-get-sifr-to-work/

Just to let you know CWS2 uses sIFR3 build r436.

Warren
Mar 9, 2009 at 6:29 PM

Thank you for the explanation.

However, don't you think that it will be a kind of confusing and probably an added overhead to maintain styles and UI related settings in 2 separate palces ?

Now you have to maintain and trace sIFR and CSS settings, correct ?

Well, if there is and added value, then it might worth the effort. Can you explain ?

Tarek.

Mar 9, 2009 at 6:42 PM
Tarek,
This is just how sIFR works if you don't want to use it you don't have to. As I didn't code sIFR I can't make any ammeendments to how it works.

Warren Buckley

On 9 Mar 2009, at 17:29, "tarekahf" <notifications@codeplex.com> wrote:

From: tarekahf

Thank you for the explanation.

However, don't you think that it will be a kind of confusing and probably an added overhead to maintain styles and UI related settings in 2 separate palces ?

Now you have to maintain and trace sIFR and CSS settings, correct ?

Well, if there is and added value, then it might worth the effort. Can you explain ?

Tarek.