BurgerEditor導入時のテキストウィジェットの高さ不正の件

Yoshy > BurgerEditor導入時のテキストウィジェットの高さ不正の件 @ 2016/12/14 9:19
こんにちは

現在独自サーバ上にbaserCMS(nada_icons)を導入し社内ポータルの構築を行っております。

コンテンツをある程度作成した段階でBurgerEditorプラグインを導入した所、
一部ウィジェットのレイアウト(高さ) が崩れ対応に苦慮しております。

おそらくBurgerEditrで利用しているスタイルと重複しているのではと
思っております。

作成したウィジェットは、標準サイドバーにコアウィジェット(テキスト)で
作成しています。

添付ファイルのCSS1/CSS2は、FireFoxのデバックモードで表示したさいのものです。

本来は、CSS3の左上のシステムへのリンクのような表示(高さ)を行いたいです。

初心者の質問で申し訳ありませんが、具体的な対処方法についてご教示願います。


■ BaserCMSのバージョン:3.0.12
■ 追加プラグイン:Burger Editor 2.8.0
■ サーバ種別:独自サーバ
■ 設置フォルダ: [サブフォルダ]
■ 利用しているデータベース: [PostgreSQL]
■ PHPスキル(自己評価): [E]
■ OSの種類:CentOS 7.2
■ PHPのバージョン:5.4.16
■ CakePHPのバージョン:2.5.9
■ データベース種類・バージョン:PostgreSQL 9.2.15
■ セーフモード:Off
■ 適用テーマ:nada icon


css3.zip
katokaisya > Re: BurgerEditor導入時のテキストウィジェットの高さ不正の件 @ 2016/12/16 10:35
Yoshyさん こんにちは。

添付画像していただいている画像のcss2で、divタグについているpaddingが原因であることは、想像できるのですが、
そのpaddingがどこで指定されているのか添付の画像ではわかりません。

FireFoxのデバックモードで、左下のCSSの表示を「ボックスモデル」ではなく「ルール」に変更したら、どのCSSの何行目のスタイルが効いているのかわかります。
また、ブラウザ内でスタイルを書き換えた場合の見え方もプレビューできますので、まず、そちらで確認されてみてはどうでしょうか?


Yoshy > Re: BurgerEditor導入時のテキストウィジェットの高さ不正の件 @ 2016/12/19 11:01
katokaisyaさん

お返事が遅くなり申し訳ありません。

ご助言いただいたようにFireFoxのデバッグモードにてルールを見ながら確認しました。

どうもbaserCMSがテキストウィジェットで生成するHRに対しバーガーエディタの
bge_edtitor.cssのHR要素に対するスタイルが適用されているようです。

HR要素は、baserCMS側で生成しているようですので
取り急ぎ、baserCMSのソースを見てテキストウィジェット生成部を
確認してみます。




Yoshy > Re: BurgerEditor導入時のテキストウィジェットの高さ不正の件 @ 2016/12/19 15:31
本件、style.cssに直接下記定義を追加する事で、解決しました。

.widget hr {
margin: 0px;
}

katokaisyaさん デバックへの助言、とても参考になりました。

ほとんどCSSを触ったことがなかったので苦労しましたけど、
CSSの適用順番や優先順位について勉強することができました。

ご協力ありがとうございました。

ログイン
ユーザー名:
パスワード:


  新規登録 / パスワード紛失

検索

facebook
フォーラムで悩みが解決した場合など、よかったら「いいね!」をポチっとクリックしてください!質問の回答者や開発者の励みになります

フォーラムガイド


関連リンク

オンライン状況
21 人のユーザが現在オンラインです。 (21 人のユーザが フォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 21