Close icon
2018月10日31日

GrowiのCSSを上書きしてデザインが微妙で落ちてしまうモチベーションを上げる

社内ナレッジの蓄積周りの取り組みを出口がしてくれています。

以前、HackMDで社内ナレッジの蓄積を・・・みたいなことがあったのですが、結局HackMDで少し問題が発生してGrowiを導入するに落ち着きました。

Screen shot of Growi overridden by origial CSS

ただGrowiの画面がイケてない・・・って思うとCSSをオーバーライドする癖のある自分。今回もオーバーライド用のCSSを作ってみました。

一応デザインの雰囲気の方向性はGitHubに合わせる感じにしました。

以下、コピペで使えるCSSです。

body {
    font-family: 'Open Sans','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #666666;
}



h1, h2, h3, h4, h5, h6 {
    font-family: 'Open Sans','Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','Helvetica Neue',Helvetica,Arial,sans-serif;
    color: #666666;
}

a {
    color: #555555;
}

a:hover {
    color: #333333;
}

.btn-default {
    color: #666666;
}

.logo b {
  height: 66px;
    line-height: 66px;
    background-color: #333333;
}

.top-left-part .logo-mark {
    margin-top: 8px;
    fill: #333333;
}

.content-wrapper .top-left-part .logo .logo-mark svg {
    fill: #ffffff;
}

.navbar-header {
    background-color: #333333;
}

.navbar-header .open-close {
    display: none;
}

.navbar-top-links>li > a{
    padding-top: 8px;
    padding-bottom: 8px;
}

.search-box {
    margin-top: 8px;
}

#page-wrapper {
    background-color: #ffffff;
}

.main-container header.affix{
    background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 5px #999999;
}

  .logo .logo-mark svg {
    fill: #666666;
  }

.bg-title {
    padding: 20px 60px 20px 60px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
}

.main-container header h1#revision-path {
    font-size: 20px;
}

.main-container header h1#revision-path .separator {
    color: #cccccc;
}

.main-container header h1#revision-path .separator a {
    color: #cccccc;
}

.nav.nav-tabs > li > a {
    color: #555555;
}

.nav.nav-tabs > li > a:hover {
    color: #333333;
}

#main {
    background-color: #ffffff;
    padding: 0 60px;
}

#main .wiki {
    color: #333333;
}

#main .wiki a {
    color: #0366d6;
}

#main .tab-content {
    border-width: 0 1px 1px 1px;
    border-style: solid;
    border-color: #e0e0e0;
    padding: 30px;

}

#main .nav.nav-tabs > li.active > a {
    background-color: #ffffff;
}

.page-list .page-list-ul>li>a.page-list-link {
    color: #999999;
}

.page-comments-row {
    display: none;
}

.page-list .page-list-ul>li>a strong {
    font-weight: normal;
}

.on-edit #main {
    padding-left: 0;
    padding-right: 0;
}

body.on-edit .header-wrap {
    margin-top: -15px;
}

body.on-edit .bg-title {
    border-bottom: none;
}

body.on-edit .row.bg-title h1#revision-path {
    font-size: 16px;
}

body.on-edit #main .tab-content {
  padding: 0;
  }

.row.page-attachments-row.hidden-print {
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #ffffff;
  border-color: #ffffff;
}

ブラウザに合わせて・・・例えばChromeならStylusなど使えば簡単にできちゃいます。OSSのこういったものはデザインが開発者視点で施されていて、正直「ビミョー・・・」って思ってしまうものが結構ありますが、CSSでデザインだけ変えてあげると一気に(個人的には)使いやすくなるので、こういうことをよくやっています。

またこの手のCSSオーバーライドをした暁には、ここのラボにも書こうかなと思っています。

アトトックラボとは

株式会社アトトック のメンバーが技術の話、デザインの話、キャラクターの話、ときどき脱線してガジェットの話やライフハックの話など好きなことを書いています。


最近の記事


タグ