「お知らせモジュール」に独自CSSを組み込むテスト。ボックスの背景色、文字色、罫線色をリンクで変更するCSSを入れる
CSSファイルを読み込ませることに苦労する。このテストには、「FireBug」がとても役に立った。いろいろ試しても、独自のCSSがを読み込まれないことがFireBugで直ぐに確認出来るのだ。
「お知らせモジュール」には、元々CSSフォルダもファイルもないのである。テンプレートとしては、「default」だけがある状況。
そこで行ったのが、お知らせのテンプレートは「default」なので、CSS用に同じ名前のフォルダで以下のように試して見た。
1.以下のファイルに「css」フォルダを作成
webapp/modules/announcement/files/css
2.上記のフォルダの下に「default」フォルダを作成
webapp/modules/announcement/files/css/default
3.CSSファイルを読み込ませるため、下記のファイルを修正
webapp/modules/announcement/view/main/init/maple.ini
ファイルの先頭から以下の2行を追加
[HeaderInc]
css = "announcement:{$temp_name}/style.css"
4.作成したCSSファイルを「default」フォルダにアップロード
5.管理画面からモジュール管理、一括アップデート
☆ ボタンのHTMLソース
<div class="test-btn">
<div class="test-btn01">
<p class="test-btn01p">
<a href="#">
ボタン1
</a>
</p>
</div>
</div>
☆ 挿入したCSSファイルの内容
.test-btn {
width:150px;
}
p.test-btn01p {
text-align: center;
font-weight: bold;
}
.test-btn01 a {
text-decoration:none;
font-weight:bold;
border-top:solid 1px #cccccc;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #000080;
border-left:solid 3px #000080;
background-color:#b3d9ff;
color:#000080;
padding:0.1em;
display:block;
width:150px;
}
.test-btn01 a:hover {
border-top:solid 1px #cccccc;
border-right:solid 1px #cccccc;
border-bottom:solid 1px #006600;
border-left:solid 3px #006600;
background-color:#acf25e;
color:#006600;
}