ownCloud 10.0 でデザイン変更

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

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

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

core の cssや画像の場所

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

core/css
core/images

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

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

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

https://doc.owncloud.org/server/10.0/developer_manual/core/theming.html

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

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

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

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

<?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>

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

$CONFIG = array (
    ・
    ・
  'theme' => 'theme-xxx',
    ・
    ・
);

デザインカスタマイズ

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

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

/* 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 */
}

ロゴ画像のカスタマイズ

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

#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;
}

管理画面の設定

ownCloud の管理画面でアプリ管理のメニューを開き、「show disabled apps」をクリックして無効になっているアプリの一覧を表示します。

先ほど追加したテーマがアプリとして出てきますので、これを有効にします。

これで、ログイン画面とヘッダのバックグラウンドカラーと、ロゴ画像の変更が反映されます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • ad