ownCloud 10.0 でデザイン変更

ownCloud のデザインカスタマイズ

ownCloud でログイン画面のバックグラウンドカラーやヘッダ、ロゴ画像などを変更する場合、直接、coreファイルをカスタマイズすると、バージョンアップ時に差分を取ってオリジナルのソースに反映するなど手間がかかってしまいます。

owcCloud にはバージョンアップに影響されないようにテーマをカスタマイズした内容で上書きする仕組みがありますので、そちらを利用します。（Wordpressの子テーマのイメージです）

core の cssや画像の場所

core の css や画像は以下のディレクトリにあります。

core/css
core/images

上記に格納されている css や画像の設定を上書きする仕組みを利用してカスタマイズします。

デザインカスタマイズ用テーマの作成

こちらの公式マニュアルを参考にして作業を進めます。

doc.owncloud.org

Theming ownCloud :: ownCloud Documentation

公式マニュアルによると、10.0 では、カスタマイズ用テーマは apps 以下に置く必要があるようです。

まず、apps/theme-example をコピーしてカスタマイズ用テーマを作ります。作成するテーマフォルダの名前は、theme-xxx で作成すると判別しやすいです。

appinfo/signature.json は存在していると整合性エラーが出るようなので削除します。（10.0.3以降で解決されるそうです）

appinfo/info.xml を以下のように修正します。id にテーマフォルダ名を記載し、あとはデフォルトで大丈夫です。
types に <theme/> が設定されていることと、dependencies に稼働しているownCloudのバージョンが含まれていることを確認してください。

[code] <?xml version=”1.0″?>
<info>
<id>theme-xxx</id>
<name>Customize Theme</name>
<description>This App provides the ownCloud theme.</description>
<licence>AGPL</licence>
<author>Jyoto llc</author>
<version>1.0.0</version>
<types>
<theme/>
</types>
<dependencies>
<owncloud min-version=”10″ max-version=”10″ />
</dependencies>
</info>
[/code]

config/config.php の以下の設定を行います。

[code] $CONFIG = array (
　　　　・
　　　　・
‘theme’ => ‘theme-xxx’,
　　　　・
　　　　・
);
[/code]

デザインカスタマイズ

例：ログイン画面と背景のバックグラウンドカラーの変更

apps/theme-xxx/core/css に styles.css を作成し以下のように変更したい色を記述する。

[code] /* header color */
/* this is the main brand color */
#body-user #header,
#body-settings #header,
#body-public #header {
background-color: #d11616;
}

/* log in screen background color */
/* gradient of the header color and a brighter shade */
/* can also be a flat color or an image */
#body-login {
background: #1d2d44; /* Old browsers */
background: -moz-linear-gradient(top, #e65959 0%, #d11616 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e65959), color-stop(100%,#d11616)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e65959 0%,#d11616 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e65959 0%,#d11616 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #e65959 0%,#d11616 100%); /* IE10+ */
background: linear-gradient(top, #e65959 0%,#d11616 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e65959′, endColorstr=’#d11616′,GradientType=0 ); /* IE6-9 */
}
[/code]

ロゴ画像のカスタマイズ

変更したいロゴ画像を logo.svg/logo-icon.svg として作成し、apps/theme-xxx/core/img に置きます。
sapps/theme-xxx/core/css に header.css を作成し以下のようにロゴ画像の部分を記述する。これだけで特に core のものから変更しないでも、カスタマイズした画像が優先して読み込まれるようになります。

[code] #header .logo {
background-image: url(‘../img/logo-icon.svg’);
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/logo-icon.svg);
background-repeat: no-repeat;
width: 62px;
height: 34px;
}
[/code]