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! »</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のことのようです。以下のリンクがわかりやすかったです!
この辺で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; }