2

seen like this is the easy way, but I am facing some issue, I separated style sheet according to the section like

layout.css typo.css element.css and sooo on

and then from the masterpage section I added the 1 stylesheet named 'style' and call all the style sheet into it using the "@import url('typo.css')"

the problem is this @import is not working... any solution how to call all other .css in 1 stylesheet?

3

3 Answers 3

1

You need to be careful using Import as there are some things in SharePoint that do not support it. An example would be RHTML styles - http://paylord.wordpress.com/2011/10/29/styles-for-rich-text-fields-in-sharepoint-2010/

2
  • seem like, sharepoint dont like '@import', but wondering how can it import google font with '@import' feature :) Commented Jan 8, 2014 at 10:12
  • 1
    Import itself does work in most circumstances but there are some where it does not. For this reason I tend to avoid it with SharePoint. Commented Jan 8, 2014 at 11:13
1

are you writing it correct?

@import url("/_layouts/customcssfolder/mycss.css");
@import url("/_layouts/customcssfolder/myhome.css");
@import url("/_layouts/customcssfolder/styles.css");

EIDT

how may imports are you using in a single style sheet? It does work with sharepoint as iv done it plenty of times even with sharepoint 2007!

the issue is to make sure its written properly! and that it has no more than if i remember correct 25 @imports per page, by this i mean:

you have your mast style sheet, it contain 50 @imports, anything above the 25 mark doesnt load so you would split it into 1 master 2 sub master styles and thoes two hold 25 each, you than have room to add another 23 sub master style sheets :)

I came accross this issue at work and this was my solution to the problem that is still used today as the company has over 500 clients and each client has its own branding:

so it would be:

current setup: 1 (master style) x 25 (@imports)= 25 max @imports

my change gives you:

1 (master style) x (25 (sub master style) x 25 (@imports)) = 625 max @imports

why would you do the above method? if your a company that offers a service... now you offer packages to resellers, each reseller has 100's clients and each client has their own branding! so the master would be the company, sub master are clients and resellers, and the last part are only clients... you could keep on building the tree and get more than 625 but the point is @import leaves cleaner css branding on a massive scale due to resellers and clients... each sub master would have many clients!

but if you only have a few than im sure its todo with how you have written it! can you show an example? how are you writing the url if its in the style library, you need to have the correct url to reference to that area regardless of where the mast css file resides!

2
  • yes its in the same place where style.css is. so we dont have to give full path.... Commented Jan 8, 2014 at 10:13
  • just ammended my answer
    – Ali Jafer
    Commented Jan 8, 2014 at 10:27
0

Use the CSSRegistration webcontrol.

Represents a cascading style sheet (CSS) file registration. CssLink reads this registration to insert a LINK element into the resulting HTML page and apply the external style sheet(s) defined by the registration.

For example

<SharePoint:CSSRegistration name= "<%$SPrl:~SiteCollection/Style Library/~language/Core Stypes/Band.css%>" runat="server"/>

The CssRegistration controls may be placed on a master page, page layout, or content page.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.