2010-11-23 11 views
5

私は、新しいSharepoint 2010公開ウェブサイトのブランドを作成しています。このウェブサイトでは、いくつかのコンテナの周りに影と丸い角を使用したいと思います。 私は最初にそれをやろうとしましたが、私の同僚はCSS3Pie(http://css3pie.com)について教えてくれました。これは本当にうまくいきます。Sharepoint 2010 + CSS3Pieは動作していないため、動作していません。指定したURL

私が経験している問題は、HTCファイルのパスを指定することです。これはIEで正常に動作していない

#left_content_small 
{ 
    width: 610px; 
    padding: 20px; 
    border: 1px solid #999; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
    -moz-box-shadow: 10px 10px 5px #888; 
    -webkit-box-shadow: 10px 10px 5px #888; 
    box-shadow: 10px 10px 5px #888; 
    behavior: url(/PIE.htc); 
} 

:私はこれを持っている瞬間 。また、

behavior: url(Style Library/StyleSheets/PIE.htc); 

も使用できません。また、動作しない文字列の周りに「置く」または しかし、このような振る舞いのURLを指定:。。。

behavior: url(_layouts/PIE.htc); 

は、仕事をするすべてのコンテナが正しくレンダリングされ

を私はHTCを置くことができ - ファイルはレイアウトフォルダにありますが、カスタムファイルのデフォルトのSharepointフォルダが壊れてしまいます。

私はFiddlerでページを読み込んだことを確認しましたが、PIE.htcファイルは、すべての場合においてコード(これは良い)です。レイアウト、スタイルライブラリ、サイトのルートに配置するかどうかは関係ありません

CSS3Pieにはいくつかの既知の問題があります:http://css3pie.com/documentation/known-issues/は、相対URLについて何かを述べています。私はURLの前に/文字を置くことによってそれを釘付けにしたと思った。 フルドメインのURL(http://testsite.local/PIE.htc)も試しましたが、正しく動作していません。

htcファイルをレイアウトポイントフォルダではなくSharepoint 2010サイトのどこかに配置する方法のアイデアはありますか?この質問についての情報が役に立つ場合

+0

過去数カ月/年のSharePointプロジェクトで作業していないため、特定の回答を確認できません。コメントの1つに正解が含まれていると誰かが私に教えてもらえると、私はそれを記入して喜んでします。 –

答えて

7

.htcファイルとSharePoint 2010(およびIE7以降の任意のバージョンのIE)を使用する場合は、許可ファイルモードにするか、各WebのAllowedInlineDownloadedMimeTypesリストに「text/x-component」MIMEタイプを追加する必要がありますPIEを使用したアプリケーション。

許容モードは、Webアプリケーションで設定するのが最も簡単ですが、ユーザーがコンテンツをアップロードできるようにすると、潜在的な悪用を可能にします。 (これは、SharePoint 2010でデフォルトでブラウザ内でPDFが開かれないのと同じ理由です)

このMIMEタイプが許可されていない場合、IEは.htcをダウンロードしますが、 (このファイルは "X-Download-Options:noopen"ヘッダーで送信されます)。

webappにmimeタイプを追加するのは、PowerShellを使用すると比較的簡単です。

$webapp = Get-SPWebApplication <name or URL of web app> 
$webapp.AllowedInlineDownloadedMimeTypes.Add("text/x-component") 
$webapp.Update() 

これはウェブアプリケーションごとの設定なので、PIEを使用する各ウェブアプリケーションを変更する必要があります。

この変更を加えると、PIE.htcをドキュメントライブラリに保存することもできます。

-Robert

+1

これは正しい答えです。上記の問題は必ずしも相対URLに起因するものではなく、単に "/ style library /"の代わりに "_layouts /"にあるファイルがどのように扱われるかによって決まります。 – Markus

+0

これは正解であり、適切にマークする必要があります。 – Roman

3

私は同じ問題を持っていたとpie.jsファイルとそれを固定:私のCSSの

​​

、その後:誰もがこの恩恵を受ける

.borderradius .webpart.rounded 
{ 
border-radius:5px 5px 5px 5px; 
-khtml-border-radius:5px 5px 5px 5px; 
-webkit-border-radius:5px 5px 5px 5px; 
-moz-border-radius:5px 5px 5px 5px 
} 
.no-borderradius .webpart.rounded 
{ 
position:relative; 
border-radius:10px 10px 10px 10px; 
} 

希望。編集モードに入ったときにボックスが消えた場合は、上記の説明に従ってposition:relativeで作業する必要があります。これはSharepoint 2010とOffice365 Sharepoint Onlineで動作します

+0

ありがとう!私はもうプロジェクトにはないので、それをテストすることはできませんが、とにかくそれをupvoted。それは大丈夫です。 –

0

絶対パスを使用すると、ほとんどの場合SP2010で正常に動作するようです。私たちは何の問題もなく、そのような私たちのSharePointソリューションで参照:

.yourPIEEnhancedClass { 
    behavior: url('/_layouts/ProjectName/Styles/PIE.htc'); 
} 

あなたが何らかの理由でスタイルライブラリを指している場合は、おそらくあなたを強制的に文字列にスペースが引用符で囲まれた文字列を使用するために持っていますビヘイビアURLの...同じものがCSSのほとんどのもの(例えば、スペースを含むフォント名)になります。

私が考えることができる唯一のものは、IISが.HTCに対して正しいMIMEタイプ(テキスト/ x-コンポーネント)を提供していることを確認することです。 known issues documentationごとに手動で追加する必要があります。

1

私はsharepoint 2010ブランディングで同じ問題を抱えていましたが、私はcss3pie jsバージョンで修正しました。

1マスターページにjqueryパスを追加する必要があります。 <スクリプトタイプ= "テキスト/ javascriptの" SRC = "/スクリプト/ jqueryの-1.6.2.min.js"> < /スクリプト>

2アドオンpie.jsスクリプトあなたのマスターページ <スクリプトタイプに= "text/javascript" src = "/ Scripts/PIE.js"> </script>

3パイを追加するにはjsfunctionを作成する必要があります。 < あなたのマスターページにスクリプトタイプ=「テキスト/ javascriptの」> $(function() { if (window.PIE) { // the name of your element has the class="rounded" $('.rounded').each(function() { PIE.attach(this); }); } });

4保存してマスターページとスクリプト

1

を公開することはPIE.htcファイルのみから認識してレンダリングされるようです_layoutsのような仮想ディレクトリ。私はすべてのバリエーションを非仮想ディレクトリから試しました。

関連する問題