左右の枠を白色に変更方法

困った時はこちらで質問してください。回答を担当する人は特に決まっていませんので、分かる方は回答をお願いします。
アバター
IT新米美
記事: 27
登録日時: 2010/11/01 18:10

左右の枠を白色に変更方法

投稿記事by IT新米美 » 2011/2/14 16:27

いつもお世話になっております。

 何回も大変お手数をおかけいたします。実は私何回もZenCartをインストールし何回も途中に止めて失敗しております。なにもわからない私は今回はきちんと勉強してはいけないと思います、なにどうぞよろしくお願いいたします。

私の情報は下記でございます何も中身は変わってないです。
サーバのバージョン: 5.0.82-community-log
プロトコルバージョン: 10
サーバ: mysql73.heteml.jp
phpMyAdmin - 2.11.2.2
Zen Cart 1.3.0.2-l10n-jp-6
PHP バージョン: 5.2.8 (Zendのバージョン: 2.2.0)

http://twoyear.heteml.jp
?左右枠のうすいグレーの変更方法
?カテゴリの色背景の色変更方法

どうか教えていただければ幸いです。
よろしくお願いいたします。
IT 新米美
アバター
k
記事: 28
登録日時: 2006/2/25 20:17

Re: 左右の枠を白色に変更方法

投稿記事by k » 2011/2/15 09:48

おはようございます。
このあたりについては、まずはCSSについて学ばれるのが良いかと思いますが、Firefoxというブラウザをインストールし、Firebugというアドオンを追加してみると良いかと思います。
もしくは、Google Chromeあたりでも。

この二つのブラウザには、見ているページのhtmlタグを簡単に見ることが出来ます(見たい部分で右クリック→要素を調査)ので、どこにどんな要素が指定されているかがすぐ分かります。

?については、/includes/templates/classic/css/stylesheet_original.css内に、
tr.leftboxheading, tr.rightboxheading, tr.centerboxheading, tr.singleboxheading {
background: #ABBBD3;
background-image: url(../images/tile_back.jpg);
}
という部分がありますので、background-image: url(../images/tile_back.jpg);を別なものに変える、

?については、/includes/templates/classic/css/stylesheet_new.css内に、
#navColumnOne {
padding: 0.5em;
border-left: 1px solid #CCC;
}
という部分がありますので、border-left: 1px solid #CCC;を別なものに変えることで、ラインの色が変わります。
tableタグでデザインされているようですので、#navColumnTwo他も変える必要がありますが、まずは先ほど挙げたブラウザにて、どんなタグが使われているかチェックしてみることをお勧めします。

がんばってください :D
最後に編集したユーザー k on 2011/2/15 10:04 [ 編集 1 回目 ]
アバター
げすと

Re: 左右の枠を白色に変更方法

投稿記事by げすと » 2011/2/15 10:02

http://zen-cart.jp/pukiwiki/401.html

「デザインカスタマイズ事例」の「ボックスをカスタマイズ」に多少掲載されています。
左右スペースに関しては、掲載がありません。
「トップページをカスタマイズ」のページは不可解なので、何のヒントも得られないでしょう。

ブラウザからページを右クリックし、ソースを表示するとどのテンプレートが読み込まれているかがわかります。

<link rel="stylesheet" type="text/css" href="includes/templates/classic/css/stylesheet_new.css" />
<link rel="stylesheet" type="text/css" href="includes/templates/classic/css/stylesheet_original.css" />
<link rel="stylesheet" type="text/css" media="print" href="includes/templates/classic/css/print_stylesheet.css" />

よって、ベースになるのはclassic/stylesheet_original.cssでBODY部分のbackground-colorを変更すると左右スペース色が変更出来ます。
ちなみにボックスは/*SIDEBOX CSS*/から開始されているので、そのbackgroundを指定すればいいです。

何がどの部分かわからない場合、ソースを見ればわかります。
というか、繰り返せば自然にわかってくると思います。

コアメンバーの方々には、ドキュメントの見直しを期待します。
アバター
IT新米美
記事: 27
登録日時: 2010/11/01 18:10

Re: 左右の枠を白色に変更方法

投稿記事by IT新米美 » 2011/2/16 16:29

いつも お世話になっております。

 大変ありがとうございましたご指導通りにやってみました、はじめはうまくいかなかったですが。K様 げすと様と皆様は親切なご指導ですので最後まで頑張ってました。結果は出来ました。

 お手数をおかけいたしましたどうもありがとうございました。

またいろいろお世話になりますので是非何どうぞよろしくお願いいたします。
IT新米美

“Zen Cart 質問コーナー” へ戻る