django備忘録22 Styling MVP Landing Part 3

ホームページを修正する

• base.html → home.html　にjumbotronの編集のコードを移す。

{% block jumbotron %}
<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h1>Design Learning Lab</h1>
                <p>コメント1</p>
                <pコメント</p>
                <p>
                  <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">Sign up, fellow! &raquo;</a>
                </p>
            </div>
            <div class="col-sm-6" style="background-color:black;min-height:300px"></div>
        </div>
    </div>
</div>
{% endblock %}

• また、.jumbotronのcss styleを変更する。 検証→color-pickerで編集可能。

background-color の変更 color →テキストデータの文字色変更

home.html

<style>
{% block style %}
.jumbotron {
    background-color:rgb(109, 209, 110);
    color:#FFF;
}
{% endblock %}
</style>

• navbarを編集するには、navbar-static-top.css に追記する。

navbar-static-top.css

.navbar-static-top {
  margin-bottom: 19px;
  background-color:rgb(109, 209, 110);
}

• home.html のstyle blockに、.navbar-static-top　の修正をする。navbarのjumbotronのmarginを変更する。（marginをなくす）

home.html

<style>
{% block style %}
.navbar-static-top {
    margin-bottom: 0px!important;
}

.jumbotron {
    background-color:rgb(109, 209, 110);
    color:#FFF;
}
{% endblock %}
</style>

!important は、要は上書きをさせないstyleのことのようです。以下のリンクがわかりやすかったです！

CSS基礎知識〜!importantルールを使う〜

• この辺でcollectstatic をしておく。statifileを更新したので。

• navbar-static-top.css　に、navbar-static-top, navba-default .navbar-brand さらに、:hover（マウスを置いたときの状態）

body {
  min-height: 2000px;
}

.navbar-static-top {
  margin-bottom: 19px;
  background-color: rgb(109, 209, 110);
  border-color: #FFF;
}

.navbar-default .navbar-brand{
  color: #FFF;
}

.navbar-default .navbar-brand:hover{
  color: #FFF;
}

• 最終的に、navbar-static-top.cssは、以下のように修正した

body {
  min-height: 2000px;
}

.navbar-static-top {
  margin-bottom: 19px;
  background-color: rgb(109, 209, 110);
  border-color: #FFF;
}

.navbar-default .navbar-brand{
  color: #FFF;
}

.navbar-default .navbar-brand:hover{
  color: #777;
}

.navbar-default .navbar-nav>li>a{
  color: #FFF;
}

.navbar-default .navbar-nav>li>a:hover{
  color: #777;
}

.navbar-default .navbar-toggle {
    border-color: transparent!important;
}

.navbar-toggle:hover {
    background-color:#FFF!important;
}

.navbar-toggle {
    background-color:rgb(109, 209, 110)!important;
}