編集画面で、CSSがうまく適用されない。

17 Posts

nana Reply #1, 16 years, 4 months ago

以前に、ドキュメントの編集画面で、CSSが適用された状態を表示
させる事はできないでしょうか？と質問した者です。

MODx設定の「CSSファイルへのパス:」に、目的のCSSのパスを入力し
CSSが適用されたと思ったのですが、
bodyタグに設定したCSSと、ドロップダウンメニューから適用させた
スタイルしか表示されないというおかしな現象がおきます。

たとえば、h3にスタイルを設定しているいもかかわらず
編集画面で、テキストを選択しドロップダウンメニューからフォーマット
をh3にしても変化がありません。
また、テンプレートで
<div id="wrapper">
[*content*]
</div>
のように外側を挟んだdivのCSSも適用されません。
実際には、<div id="wrapper">は、チャンクに書いてあります。

ふつうは、CSSが全部適用されるのでしょうか。
何かがおかしいとは思うのですが、どうしてもなおりません。
よろしくお願いいたします。

・TinyMCEを使用
・CSSはドキュメントとして登録
・「CSSファイルへのパス:」に、「/index.php?id=4」と入力。
　これがいけないのでしょうか。ドキュメントとして作成しているので
　どこにCSSファイルがあるのか不明です。
・プレビューでは、CSSは適用されている。
・テンプレート
==========
{{header}}
[*content*]
{{footer}}
==========

892 Posts

MEGU Reply #2, 16 years, 4 months ago

こんにちは。

状況をいまひとつ理解していないので、外している可能性大ですが、
管理画面の作成／編集画面のテキストエリア（内容）は、[*contents*]に
あたるので、例えば、以下のような場合：

<div id="wrapper">
[*contents*]
</div>

id=wrapper に定義しているCSSは、適用されないんじゃないでしょうか。
（ちゃんと検証していないので曖昧ですが...）。

だとすると、例えば、

wrapper h3 {
定義
}

としていると、編集画面のテキストエリアの中では、その定義は適用されないですよね...。

・CSSはドキュメントとして登録
・「CSSファイルへのパス:」に、「/index.php?id=4」と入力。

それはたぶん、問題ないと思うのですが、先の理由があるので、
入力用に別にCSSを作った方がいいかもしれないですね。。
（[*conten*]の部分だけに適用されるように作る）。

17 Posts

nana Reply #3, 16 years, 3 months ago

こんにちは、回答ありがとうございます。

<div id="wrapper">
[*contents*]
</div>

id=wrapper に定義しているCSSは、適用されないんじゃないでしょうか。
（ちゃんと検証していないので曖昧ですが...）。

どうやら、そのようです。
[*contents*]の部分のみに適用されるCSSを作成するには、
背景色や、カラムのサイズ設定があるので[*contents*]の中に、
<div id="sideRight">
</div>
を入力しなくてはならないのでしょうか。。

HTMLの全くわからない人に、ページの新規作成を頼んだりするので
できれば、ソースコードはいじらせたくないのですが、何か
良い方法はないでしょうか。

よろしくお願いいたします。

35 Posts

zephir Reply #4, 16 years, 3 months ago

こんちは。

えーっと実際何をどうしたいのかイマイチ分からんのですが、TinyMCEでの編集画面で
CSSを適用させるんですから、サイト表示用のCSSから[*contents*]の外側に適用される部分を
取りあえず全部外してみれば狙ってるイメージに近い感じになりますよ。

MEGUさんも書いてますが

<div id="wrapper">
[*contents*]
</div>

id=wrapper に定義しているCSSは、適用されないんじゃないでしょうか。
（ちゃんと検証していないので曖昧ですが...）。

だとすると、例えば、

wrapper h3 {
定義
}

としていると、編集画面のテキストエリアの中では、その定義は適用されないですよね...。

上記の例でh3に適用した定義を反映させるならただ単に
h3 {
定義
}
とだけ書いておけば良いって事で、専用CSSが必須という事です。

TinyMCEでの編集画面はcontents部分だけなのでカラムのサイズとか書いても意味ないですよ。
カラムってサイドカラムとかの事ですよね？^^;

17 Posts

nana Reply #5, 16 years, 3 months ago

こんにちは、回答ありがとうございます。

説明が分かりづらく申し訳ございません。

上記の例でh3に適用した定義を反映させるならただ単に
h3 {
定義
}
とだけ書いておけば良いって事で、専用CSSが必須という事です。

h3等のタグに関しては、上記で解決なのですが、

・背景についてはbodyに指定した背景が適用され、id="wrapper"で指定した
　背景は表示されません。
・カラムのサイズについては、[*contents*]をかこんだid="sideRight"の幅の指定
　がきかない為、TinyMCEでの編集画面のサイズによって、フロートしたボックスが
　カラム落ちしてしまいます。
　説明がわかりづらいですね。
　[*contents*]の中に、さらにボックスが2つあり、フロートで横に並べてあります。
　そのボックスには、widthが指定してある。
　TinyMCEでの編集画面の横幅が、上記2つのボックスを並べたより狭いと、
　カラム落ちしてしまうのです。
　ここで、TinyMCEでの編集画面の横幅が少なくても横スクロールバーが表示され
　カラム落ちしないようにしたいのです。

上記2点の解決方法としては、やはり[*contents*]内に
<div id="sideRight">
</div>
を記載しなくては、ならないのかと悩んでます。

ご意見よろしくお願いいたします。

補足：
・3カラムで、ヘッダー、メイン左、メイン右([*contents*])でサイトを作成しています。
以下のような感じです。
=====================
<body>
<div id="wrapper">
<div id="hedder> </div>
<div id="sideLeft> </div>
<div id="sideRight">
[*contents*] 　←この中に、さらにボックスが2ありフロートで横に並べてあります。
</div>
</div>
</body>
=====================

892 Posts

MEGU Reply #6, 16 years, 3 months ago

こんにちは。

うーんと。

背景についてはbodyに指定した背景が適用され、id="wrapper"で指定した
　背景は表示されません。

これは、bodyに指定すれば良いんで、簡単だと思うのですが、
カラム落ち対策は、難題かも。。

まず、管理画面の編集エリア（内容）の部分の幅を決定しているのが、
システム側であること。ちょっとみてみましたが、mutate_content.dynamic.phpという
ファイルのようです。

RTEじゃない場合、

<div style="width:100%;">
            <textarea id="ta" name="ta" style="width:100%; height: 400px;" onchange="documentDirty=true;"><?php echo htmlspecialchars($htmlContent); ?></textarea>

のとこのtextareにたとえば、overflowの処理を入れると該当箇所に適用されますが、
RTEにすると、インタフェイスがTinyMCE側に依存の形になるのか、適用が無視されたような状態になりました。

つまり、TinyMCEのどこかのファイルに手を入れないといけないのかも知れません。

それを考えると、contentsの内部にwidthを指定したボックスを大囲いとして
入れる方が簡単のような気がしますが。。

みなさまいかがでしょうか。。

それとnanaさんに確認なのですが、テキストエリア（内容）は、ウィンドウサイズを大きくすると
伴って幅も広がりますが、それでは足りないということなんですね？（それでスクロールバーを出したい...と）。

あ、あと、管理画面のドキュメントツリーは、隠せるんですが、それでも
テキストエリアの幅は足りませんか？TinyMCE側にも全画面表示というのがあって
多少幅も広がるようですが。。

17 Posts

nana Reply #7, 16 years, 3 months ago

こんにちは。　細かい悩みにお付き合いいただきありがとうございます。

これは、bodyに指定すれば良いんで、簡単だと思うのですが、

bodyには、id="wrapper"とは別の背景が指定してあるので
指定できないのです。。

それとnanaさんに確認なのですが、テキストエリア（内容）は、ウィンドウサイズを大きくすると
伴って幅も広がりますが、それでは足りないということなんですね？（それでスクロールバーを出したい...と）。

足りないわけではないのですが、(カラム落ちは直ります)広げただけ左右に広がって
しまいます。
できるかぎり、デザインが変わって見えないようにしたいと思ってます。

それを考えると、contentsの内部にwidthを指定したボックスを大囲いとして
入れる方が簡単のような気がしますが。。

やはり、そうなるのでしょうか。
ソースはいじらせたくないのですが、仕方なさそうですね。

それか既存のドキュメントを複製して内容を入れ替えてもらえば
ソースはいじらなくてもよさようですね。

また、質問があった時にはよろしくお願いいたします。
ありがとうございました。

35 Posts

zephir Reply #8, 16 years, 3 months ago

あぁ、やっぱ外してましたか^^;

単純な疑問なんですが

<body>
<div id="wrapper">
<div id="hedder> </div>
<div id="sideLeft> </div>
<div id="sideRight">
[*contents*] 　←この中に、さらにボックスが2ありフロートで横に並べてあります。
</div>
</div>
</body>

フロートのボックス2つはDittoで呼び出して、お客さんには参照元を編集してもらうってのはダメ？