ホーム > デザインテーマについて > ウィジェトごとにレイアウトを変えたい

ウィジェトごとにレイアウトを変えたい

2010 年 2 月 10 日

uCartのテーマを使用させていただいています。
ウィジェトごとにレイアウトを変えれるようにCSSを当てたいと思うのですが、
どこに記述をすれば良いでしょうか?

例えば、
ウィジェトのタイトルの背景のデザインを個別に変えたいと思っています。

sidebar.phpに定義にされているものを変えれば良いかもしれませんが、
追加でウイジェットを変えるとき不都合がおきます。

オンラインマニュアルのウィジェットのカスタマイズのページを確認したり、

ウィジェットのカスタマイズ

\wp-content\plugins\usc-e-shop\widgets
のフォルダ内のwidgetsのソースを見て調べています。

adminフォルダで変えているような気がするのですが、
はっきりとわからないので、どのように変えるのが良いか
アドバイスいただければと思います。

関連記事
  1. nanbu
    2010 年 2 月 10 日 05:27 | #1

    こんにちは。

    コードを変更するのはお勧めできません。後々メンテが大変になります。

    背景を個別に替える程度でしたらCSSで十分です。
    編集すべき箇所は次の通りです。

    plugins/usc-e-shop/css/usces_cart.css 1343行目以降
    themes/ucart_default/style.css 311行目以降

    usces_cart.css を変更する際はテーマフォルダにコピーしてから、テーマフォルダのusces_cart.css をカスタマイズしてください。

    例えばタイトルに別のアイコンを表示したい場合は .sidebar .widget_title に背景画像を指定すると良いと思います。

    ウィジェットのデザインカスタマイズはCSSが複雑なため少々やりにくいかと思いますが、ウィジェットごとに個別のデザインは可能です。

    がんばってください!

  2. screny
    2010 年 2 月 10 日 16:35 | #2

    nanbu様

    ご連絡ありがとうございます。

    再度質問になって恐縮なのですが、

    例えば、ウイジェットで共通のdivになっています。

    div class=”widget_title”

    これをウイジェットごとにCSSを適応できるように

    例)
    div class=”widget_title_serarch”

    div class=”widget_title_category”

    変更したいです。

    sidebar.phpに書いて適応させることは簡単なことなのですが、追加で
    ウイジェットを入れた場合消えてしまいます。

    welcart側でdiv class=”widget_title”の共通項目を個別のウイジェット
    ごとに変えるには、どうするのが良いでしょか?

  3. nanbu
    2010 年 2 月 11 日 06:06 | #3

    style.css の最下行に以下のスタイルを追加してみてください。
     

    .sidebar .widget_welcart_calendar .widget_title {
      color: #FFFFFF;
      background-color: #000000;
      background-image: none;
    }

     
    カレンダーウィジェットのタイトルのみが変わるはずです。

  1. トラックバックはまだありません。