Xoopsテーマのインストール方法

XOOPSのテーマは、多くのテーマ配布サイトでリンク切れとなっていたのが気になります。WordPressのテーマをネットで検索すると、リンク切れにあうことは、まずありません。やはり、現在、最も活発に活動しているのは、WordPressのようです。
今回は、XOOPSのテーマで、以前からよく使わせていただいていたOcean-Netのcocoaというテーマをインストールします。

テーマのダウンロード

テーマの検索

CMS Theme Finder(cmsthemefinder.com)にアクセスして、テーマを選びます。

テーマのダウンロード

テーマが決まりましたら、ダウンロードします。

テーマのインストール

テーマの解凍

テーマのアップロード

テーマをサーバーにアップロードします。

WinSCPの起動

themesフォルダにUPLOAD

テーマの設定

サイトの起動

管理者メニューから「テーマ選択」タブをクリックします。

テーマの選択

該当のテーマにレを付して、「選択」をクリックします。

テーマの確認

該当のテーマに変更されたか「ホームページ」をクリックして確認します。

変更されました。が、ファンクション等が文字化けしています。
注意:メニューやフォーラム一覧は、別のテーマで入力していた内容です。このテーマに設定されてあるデータではありません。

文字化けの修正

TeraPadの起動

theme.htmlの文字コードを、TeraPadでUTF-8に変更します。

変更画面の表示

文字コード指定保存

何も変更せず、ファイル→文字/改行コード指定保存をクリックして、文字コードをUTF-8Nに変更して「OK」をクリックします。

theme.htmlのUPLOAD

文字コードをUTF-8に変更したtheme.htmlをWinSCPでUPLOADします。

文字化けの確認

テーマのカスタマイズ

ヘッダーに画像を挿入

ヘッダーに画像を挿入する為、hearder.htmlを変更します。

ヘッダー画像の挿入

以下のheader.pngを挿入します。

ヘッダー画像と、theme.htmlのupload

変更の確認

ヘッダーの横幅の変更

現在、760pxとなっているので、これを980pxとします。

980pxの画像の用意

style.cssの変更

style.cssと、画像のupload