Sharepoint Forum

Ask Question   UnAnswered
Home » Forum » Sharepoint       RSS Feeds

AlternateCSS and '@import'

  Asked By: Eliezer    Date: Jan 16    Category: Sharepoint    Views: 1824

I am working with WSS (not SPS - lets not go there). I have a custom
site definition. I want to better customize the ows.css style sheet.

After looking at (and experimenting with) modifying or replacing ows.ccs or
replacing it in all my files with a different named css, I came across the
AlternateCSS. Todd has a nice blog about this, and I found it to be the
same crappy solution (see:
mindsharpblogs.com/.../342.aspx). The problem is
we need to be able to specify an alternate CSS and then imherit from ows.css
and override it.

So I went learning about css. Looky what I found:
later in the article, it talks about an import feature. I tried to make
this work.

Here is what I am trying, putting my 'overrides' in overrides.css and then
making a custom.css that looks like this:

@import overrides.css;
@import ows.css;

and then specifying the custom.css as my 'alternateCSS in my project.

OK, it kind of works and kind of doesn't ... mostly doesn't. It does not
seem like the ows.css settings can be overridden much. Some (a very few it
seems) can.

Anyone have any similar experience?? I am by far no css expert, so maybe I
am simply messing up some syntax.

Next I am off to see if the themes work for anything I want.



3 Answers Found

Answer #1    Answered By: Jasper Hatfield     Answered On: Jan 16

the alternatecss file looks like:

@import /_layouts/1033/styles/ows.css;
@import /_layouts/1033/styles/overrides.css;

and when you have an override  that does not seem to work, add the !important
style rule, but I do have to say that I have not had to do this but for a
few items.

This (of course) does not fix the default page, but that is a minor problem.

Answer #2    Answered By: Rashawn Hopper     Answered On: Jan 16

When the browser renders the page it reads all styles in the order they appear in a CSS file however it renders them using the last known style  for a tag. The point is that if you load your files  like this:


And there’s a style in OVERRIDES.CSS which is the same as one in OWS.CSS, the browser will render out using the last known style it finds (in all style sheets). So it will use the one in OVERRIDES.CSS (because in memory it wrote over the attribute it set in OWS.CSS).

Basically rather than doing imports and all that, just create your own stylesheet in a theme and copy the styles you want to override. Those will get rendered out while the base OWS.CSS will use whatever it’s got defined.

I have a trick on my blog  where your theme file can be just an import  of an external CSS file so then you can just keep updating the external CSS file and refresh the browser to see the effects. Can’t do that with themes.

Answer #3    Answered By: Horace Coffey     Answered On: Jan 16

Near the end of my post (step 5) I describe how you REPLACE the
<Link REL="stylesheet" Type="text/css"

With this:
<SharePoint:CssLink DefaultUrl="/_layouts/1033/styles/ows.css"

This can be done simultaneously in all 97 ASPX files  using VS.NET's find
and replace. However, if you want to cascade the Farm css  file with the
Site Definition alternate  CSS file you can APPEND the SharePoint:CssLink
server control to the existing Link tag. This will produce the cascading
effect that you are trying  to achieve.

However, it will not work  on the built-in Admin pages (like create.aspx
and settings.aspx) because they either present the farm CSS file OR the
alternate CSS file. Too bad. I have a rule about changing Admin pages
(it can be broken for the right business need) and that's why I opted to
copy the contents of the OWS.CSS to my alternate CSS rather than letting
it cascade. As is, my solution  does not use the farm OWS.CSS file at
all, it uses the copy of the OWS.CSS defined in the ONET.XML as the
alternate CSS for the Site Definition. So, I get a Site Definition CSS
that can be overridden on any page using a Content Editor Web Part.

Didn't find what you were looking for? Find more on AlternateCSS and '@import' Or get search suggestion and latest updates.