ownCloudで一部見た目を変更してみる¶
ownCloudで一部の見た目を変更してみます。ownCloudでは一見するとスキン/テーマ機能があるようにも見えますが
確認してみたところ、これが何処まで機能しているのかがよく分かっていません。ほとんど効いていないのでは？
実際にデザインを定義しているのは？¶
調べてみたところ、下記のパスにあるリソースでデザインを定義しているようです。
/owncloud/core/css /owncloud/core/img
注意点としては、このパスは独立したテーマフォルダではなく、システムコアのディレクトリです。そのため
システムのアップデートで上書きされてしまいます。更新履歴・バックアップを取るようにしてアップデートの
際には修正内容を上書きロストしないように注意してください。
画像ファイルについて¶
画像ファイルはSVG形式という「XML定義をブラウザで描画するベクター形式の画像ファイル」を使用しています。
絵描きさんがペン入れレイヤとして使うことがあるアレです。描画時に計算してレンダリングするので、拡縮
しても画像が崩れることがありません。そのため、ブラウザサイズが異なっても見た目が非常に綺麗です。
それはさておき、このSVGファイルですが、扱えるソフトがPhotoshop/Illustratorなど限られています。
そのため、今回は透過PNGを使用します。なにかで扱えればソフト情報など含めて記事を更新しようと思います。
追記：SVGファイルはベクター画像なので扱えるペイントソフトは限られますが、中身はXML形式なので色を変える
だけであれば、テキストエディタで開き「fill」の値を変更することで対応できます。
画像ファイルの種類¶
目立つものがいくつかありますので、必要に応じてSVGまたは透過PNGで作成します。
ここではタイトルロゴ、メニュー左の縮小版ロゴ、ブックマークのfaviconを変更します。ベクター画像を使わないので、通常サイズと縮小版を分けて作成します。ファイル名が衝突
しないように、接頭に「custom_」を付しています。
- タイトルロゴ
- custom_logo.png
- 252x120
- アイコン版ロゴ
- custom_logo_mini.png
- 62x34
- ブラウザ版favicon
- custom_favicon.png
- 32x32
- スマートフォン版favicon
- custom_favicon-touch.png
- 128x128
イメージを作成できたら、「/owncloud/core/img」にアップロードしてください。
ロゴを替えるには¶
先ほどの画像を設定しているCSSファイルを編集します。
- /owncloud/core/css/header.css
#header .logo { background-image: url(../img/custom_logo.png); ←ファイル名の変更 background-repeat: no-repeat; background-size: 175px; background-position: center 30px; width: 252px; height: 120px; margin: 0 auto; } #header .logo-icon { /* display logo so appname can be shown next to it */ display: inline-block; background-image: url(../img/custom_logo_mini.png); ←ファイル名の変更 background-repeat: no-repeat; width: 62px; height: 34px; }
これでタイトルロゴとログイン後の上部メニューのロゴが更新されました。
faviconを替えるには¶
下記の箇所にそれぞれfavicon.pngおよびfavicon-touch.pngに関する記載があります。- /owncloud/core/templates/layout.base.php
- /owncloud/core/templates/layout.guest.php
- /owncloud/core/templates/layout.user.php
<link rel="shortcut icon" type="image/png" href="<?php print_unescaped(image_path('', 'favicon.png')); ?>"> <link rel="apple-touch-icon-precomposed" href="<?php print_unescaped(image_path('', 'favicon-touch.png')); ?>">
この記載をcustom_favicon.pngとcustom_favicon-touch.pngに変更します。オリジナルの
faviconを上書きした場合は変更しなくても大丈夫です。
ログイン画面の背景色を変えるには¶
下記のスタイルシートに記載されている値を変更します。それぞれ反映場所は同じなのですが、ブラウザの種類ごとに
個別に設定を行っています。背景のグラデーションを定義していますので「#16進数(上→下)」と「パーセンテージ」を
変更します。 最初の古いブラウザ向けの定義ではグラデーションでは無く単色になっています。
- /owncloud/core/css/style.css
#body-login { text-align: center; background: #1d2d44; /* Old browsers */ background: -moz-linear-gradient(top, #35537a 0%, #1d2d44 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#35537a), color-stop(100%,#1d2d44)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #35537a 0%,#1d2d44 100%); /* IE10+ */ background: linear-gradient(top, #35537a 0%,#1d2d44 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */ }
背景色の関係で、フォーム/テキストが見にくくなった場合は、関連するCSSを修正する必要があります。特に、明るい
画面にしてしまった場合に見えにくくなる「パスワード保存」「最下部のownCloudの表記」は下記で修正します。
デフォルトでは「#ccc」となっている箇所を変更します。
- style.css
#body-login form input[type="checkbox"]+label { text-align: center; color: #ccc; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; opacity: .6; } #body-login .tipsy-inner { font-weight: bold; color: #ccc; } #body-login p.info a, #body-login #showAdvanced { color: #ccc; }
ログインボタンに関しては下記で定義されています。
通常表示とホバー・フォーカス（カーソル合わせの状態）、アクティブ（押した状態）があり、
「background-color」（ボタン色）と「color」（文字色）をそれぞれ変更します。
/* Primary action button, use sparingly */
.primary, input[type="submit"].primary, input[type="button"].primary, button.primary, .button.primary {
border: 1px solid #1d2d44;
background-color: #35537a;
color: #ddd;
}
.primary:hover, input[type="submit"].primary:hover, input[type="button"].primary:hover, button.primary:hover, .button.primary:hover,
.primary:focus, input[type="submit"].primary:focus, input[type="button"].primary:focus, button.primary:focus, .button.primary:focus {
border: 1px solid #1d2d44;
background-color: #304d76;
color: #fff;
}
.primary:active, input[type="submit"].primary:active, input[type="button"].primary:active, button.primary:active, .button.primary:active {
border: 1px solid #1d2d44;
background-color: #1d2d44;
color: #bbb;
}
チェックボックスについては下記で定義しています。SVGで定義しているので、今回は変更しません。
- style.css
html:not(.ie8) input[type="checkbox"].checkbox + label:before { content: ""; display: inline-block; height: 20px; width: 20px; vertical-align: middle; background: url('../img/actions/checkbox.svg') left top no-repeat; opacity: 0.7; }
ログイン後のメニューバーの背景色を変えるには¶
ログイン後の上部メニューの背景を変更するには下記「background-color」を変更します。
- header.css
#body-public #header { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; height: 45px; line-height: 2.5em; background-color: #1d2d44; -moz-box-sizing: border-box; box-sizing: border-box; }
これによって「ファイル(header-appname)」「ユーザ名(settings)」などのメニューが見えにくくなる
場合があります。これを変更するには下記の「color」設定をそれぞれ変更します。
- header.css
.header-appname { display: inline-block; position: relative; color: #fff; font-size: 16px; font-weight: 300; margin: 0; margin-top: -24px; padding: 7px 0 7px 5px; vertical-align: middle; } #settings { float: right; color: #bbb; cursor: pointer; }
検索、プルダウンについては前述のようにsvgファイルで定義しているのでここでは変更しません。
ログインページのフッタについて¶
ものすごく個人的なことだけど、デフォルトでは「ownCloud – あなたが管理するウェブサービス」
となっていて、外部公開するには地味にださいので、ここを「Powerd by ownCloud」とします。
- /usr/local/owncloud/lib/private/defaults.php
public function getShortFooter() { if ($this->themeExist('getShortFooter')) { $footer = $this->theme->getShortFooter(); } else { $footer = 'Powerd by <a href="'. $this->getBaseUrl() . '" target="_blank"' . ' rel="noreferrer">' .$this->getEntity() . '</a>'; } return $footer; }