｢お知らせモジュール｣に独自CSSを組み込むテスト。

ボックスの背景色、文字色、罫線色をリンクで変更するＣＳＳを入れる

CSSファイルを読み込ませることに苦労する。このテストには、｢FireBug｣がとても役に立った。いろいろ試しても、独自のCSSがを読み込まれないことがFireBugで直ぐに確認出来るのだ。
｢お知らせモジュール｣には、元々CSSフォルダもファイルもないのである。テンプレートとしては、｢default｣だけがある状況。
そこで行ったのが、お知らせのテンプレートは｢default｣なので、CSS用に同じ名前のフォルダで以下のように試して見た。

１．以下のファイルに｢css｣フォルダを作成
２．上記のフォルダの下に｢default｣フォルダを作成
３．CSSファイルを読み込ませるため、下記のファイルを修正
４．作成したＣＳＳファイルを｢default｣フォルダにアップロード

５．管理画面からモジュール管理、一括アップデート

☆　ボタンのHTMLソース
    <div class="test-btn">
        <div class="test-btn01">
            <p class="test-btn01p">
                <a href="#">
                    ボタン１
                </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;
    }