Previous css code used to round top left corner of page is not working now after upgrading to 1.1.2

Hi,

Previously when on version 1.0.10.

Set USERSTYLEURL = /foswiki/pub/system/PatternSkinCssCookbookFonts/fonts.css

I used the following code in fonts.css to create a rounded top left corner of the top bar

/* top bar */
#patternTopBar {
    background:url(top_bar_gradient.png) repeat;
}
#patternTopBarContents {
    background:url(tl.gif) no-repeat top left;                 
}
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter,
#patternTopBarContents {
    height:125px;
    overflow:hidden;             
}
#foswikiLogo {
    margin:1em;
}

I just upgraded to 1.1.2 and the corner is sqaure. I can't figure out how to make it rounded again. Please advise.

In SitePreferences I have

Set WEBHEADERART = /foswiki/pub/System/PatternSkin/top_bar_gradient.png

Now my fonts.css file has the following...

/* top bar */
#patternTopBarContents {<br /> background:url(tl.gif) no-repeat top left;  <br />}

#patternTopBar,<br />#patternClearHeaderCenter,<br />#patternClearHeaderLeft,<br />#patternClearHeaderRight,<br />#patternTopBarContentsOuter,<br />#patternTopBarContents {<br /> height:125px;<br /> overflow:hidden;  <br />}<br />#foswikiLogo {<br /> margin:1em;<br />}

-- DanaRivas

The 2nd text you've pasted contains html tags. Could you check if this happened only here?

Otherwise, where did you put those graphic files? Are they attached to the same topic as the css file?

-- ArthurClemens - 19 Jan 2011

The html tags in the 2nd text just happened when I pasted here. They do not exist in my fonts.css file. The graphic file (tl.gif) is in the same directory as the fonts.css file ( E:\Foswiki_1_1_2\Foswiki\pub\System\PatternSkinCssCookbookFonts)

-- DanaRivas - 20 Jan 2011

Before I start looking into detail, I think it would be easier to:

1. Move the css file to SitePreferences, and name it header.css or something
2. Attach all image files to SitePreferences
3. Set USERSTYLEURL to:

   %PUBURLPATH%/%USERSWEB%/SitePreferences/header.css
   

-- ArthurClemens - 20 Jan 2011

That did not work. I renamed fonts.css to header.css and then set USERSTYLEURL = /pub/Main/SitePreferences/header.css

and then attached the tl.gif image to the SitePreferences page

-- DanaRivas - 20 Jan 2011

It has to do with the loading order of the css. The style in header.css gets overwritten by WEBHEADERART and WEBHEADERBGCOLOR.

To make it work, you will have this in the header.css:

#patternTopBar {
    background:url(top_bar_gradient.png) repeat;
}
#patternTopBarContents {
   background:#000;
   background:url(tl.gif) no-repeat top left;  
}
#patternTopBar,
#patternClearHeaderCenter,
#patternClearHeaderLeft,
#patternClearHeaderRight,
#patternTopBarContentsOuter,
#patternTopBarContents {
   height:125px;
   overflow:hidden;  
}
#foswikiLogo {
   margin:1em;
}

The references image files are all attached to the same topic (be sure to also attach top_bar_gradient.png to SitePreferences).

Then write in SitePreferences:

   * Set WEBHEADERART =
   * Set WEBHEADERBGCOLOR =

That will remove the overwriting css.

-- ArthurClemens - 20 Jan 2011

That resolved it. Thank you.