xoopsテーマの作成

  • ここでは新たな話題の追加投稿はできません。
  • ここではゲスト投稿が禁止されています

投稿ツリー




前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2019/8/13 21:44 | 最終変更
タツ  管理人   投稿数: 2011
xoops(xoops cube)のデザインテーマは以前作成していたサイトも無くなるなどますます気に入ったものが入手困難になっています。このサイトではxoops用ではなく普通のレスポンシブのテンプレートを編集して導入しています。

テンプレートはhtml5up-dopetropeでライセンスもCCA3.0という事で改変等自由に使えるものと解釈しています。携帯にも対応しお気に入りのテンプレートです。久しぶりに見るとバージョンが新しくなっていたので再度作成し直すこととしました。その時の備忘録です。

具体的な導入方法は、ダウンロード後、xoopsのthemeフォルダにフォルダごと名前を変更して設置しフォルダ内のテンプレートのright-sidebar.html(名前をtheme.htmlと変更)とassets/css/main.cssを編集すればxoopsのthemeとして機能させることができます。

theme.htmlを以下のように編集します。
head部分と最後のスクリプトをxoops用に変更します。
<head>
    <title>Dopetrope by HTML5 UP</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

この部分を

<head>
    <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
    <meta charset="<{$xoops_charset}>" />
    <meta name="robots" content="<{$xoops_meta_robots}>" />
    <meta name="keywords" content="<{$xoops_meta_keywords}>" />
    <meta name="description" content="<{$xoops_meta_description}>" />
    <meta name="rating" content="<{$xoops_meta_rating}>" />
    <meta name="author" content="<{$xoops_meta_author}>" />
    <meta name="copyright" content="<{$xoops_meta_copyright}>" />
    <meta name="generator" content="XOOPS Cube" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="<{$xoops_imageurl}>assets/css/main.css" />
    <link href="<{$xoops_url}>/favicon.ico" rel="ICON" />
    <!-- added script xoops.js -->
    <script type="text/javascript" src="<{$xoops_url}>/include/xoops.js"></script>
    <!-- RMV: added module header -->
    <{$xoops_module_header}>
</head>

また最後に記述されている<!-- Scripts -->の部分も変更が必要です。
<!-- Scripts -->
    <script src="<{$xoops_imageurl}>assets/js/jquery.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/jquery.dropotron.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/browser.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/breakpoints.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/util.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/main.js"></script>

次にメニューの作成です。メニューはxoopsモジュールのマルチメニューを利用しました。マルチメニューのブロック管理にてタイトルを「multi_menu1」(このタイトルを利用)とします。

<!-- Nav -->以下の部分を次のように変更し、マルチメニューをメニューに反映させます
<!-- Nav -->
<nav id="nav">
<ul>      
    <{if $xoops_isadmin}><li><a href="<{$xoops_url}>/admin.php">管理メニュー</a></li><{/if}>
        <li><a href="<{$xoops_url}>/">ホーム</a></li>       
        <{foreach item=block from=$xoops_lblocks}>
      <{if $block.title == "multi_menu1"}>
      <{$block.content}>
      <{/if}>
        <{/foreach}>
</ul>
</nav>

<!-- Content -->以下コンテンツを含む右のラインをの内容を変更します
<!-- Content -->
    <article class="box post">
    <{* xoops センターブロックcontents *}>
    <section>
    
        <div><{$xoops_contents}></div>
            
        <{if $xoops_showcblock == 1}>
            
            <{foreach item=block from=$xoops_clblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>

            <{foreach item=block from=$xoops_ccblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>
            
            
            <{foreach item=block from=$xoops_crblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>
            
        <{/if}>
        </section>
    </article>

<!-- Sidebar -->以下の部分を次のように変更します。この時マルチメニューの内容は表示しないようにします。
<!-- Sidebar -->
    <{* xoops 左右ブロック contents *}>
        <section class="box">
        <{if $xoops_showlblock == 1}>
        <{foreach item=block from=$xoops_lblocks}>
        <{if $block.title != "multi_menu1"}>
            <{if !$block.title|strstr:"none"}>
                <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
        <{/if}>
        <{/foreach}>
        <{/if}>
        <{if $xoops_showrblock == 1}>
        <{foreach item=block from=$xoops_rblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
        <{/foreach}>
        <{/if}>
    </section>

main.cssの編集
以下のような目立つ不具合がありassets→css→main.cssを編集します
  • checkboxが表示されない 68行目辺り
         inputのcssで  
        input, select, textarea {
            /*-moz-appearance: none;del checkbox 削除*/
            /*-webkit-appearance: none; del checkbox 削除*/
            /*-ms-appearance: none;del checkbox 削除*/
            /*appearance: none;del checkbox 削除*/
  • テーブルから文字がはみ出る 1500行目辺り
    /* Tables */
    
    table {
            table-layout: fixed; /* 追加 */
            width: 100%;
        }
    
            table tr {
                overflow-wrap: break-word; /* 追加 */
                word-wrap: break-word; /* 追加 */
                border-top: solid 1px #dddddd;
            }
    
                table tr:first-child {
                    border-top: 0;
                }
    
            table td {
                overflow-wrap: break-word; /* 追加 */
                word-wrap: break-word; /* 追加 */
                padding: 0.5em 1em 0.5em 1em;
            }
  • 文章がコンテンツ枠からはみ出る 2309行目辺り
    /* Main */
        #main {
            overflow-wrap: break-word; /* 追加 */
            word-wrap: break-word; /* 追加 */

  • ckeditor4のテキスト部分が背景色(#252122)が反映されそのままでは使えない
    85行目辺り
    /* Basic */
    body {
            /* background: #252122; 削除*/
            background-image: url("images/bg02.png");
    
    2337行目辺り
    /* Footer */
        #footer {
            background: #252122; /*追加 */
            position: relative;
            color: #858484;
            padding: 4em 0;
        }
    
    2663行目辺り
    #navPanel {
    
         background-image: url("images/bg02.png") 変更→ background: #252122;
         
        }
これで基本的なxoopsテーマとしての変更は終了です。ワードプレスのテンプレートと同様で海外のテンプレートなので日本語にするとデザインが崩れこのままだとあまり見栄えの良くないものです。あとはこのmain.cssの細部を編集して全体のデザインを整える必要があります。また、場合によってはxoops独自のcssもここに追加するのも良いでしょう。
投票数:1 平均点:10.00

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2019/8/14 9:33
nonn50  一人前   投稿数: 73
テーマにまでとは、随分と間口を広げましたね。
最近はXOOPSの広場も活気が無いようですが。
そのうち、こちらに飛び火してくるかも知れませんよ(笑)
暑い毎日です。バイクも吐息をついているのでは
投票数:1 平均点:10.00

前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2019/8/14 22:01 | 最終変更
タツ  管理人   投稿数: 2011
投稿ありがとうございます。日本ではxoops cubeが主体で長期間コアのバージョンアップがされてなく日本独自のものということもあり活気がないのはそのせいかもしれませんねぇ。一度本家のxoopsもインストールしてみましたが、確かにバージョンアップされている感は否めません。英語なので理解しにくいことと違和感がありテーマ、モジュールをどう導入すればよいのかよくわかりませんでした。近頃は暑くてバイクで走る気も失せております。そのうちメンテナンスをきっちりとして気持ちのいい旅に出たいと思っています。
投票数:0 平均点:0.00

  条件検索へ


旅と気ままなフォーラムメニュー

旅と気ままなフォーラム新着投稿

欲しい商品が必ず見つかるメジャーなネットショップ

このサイト内の検索

オンライン状況

25 人のユーザが現在オンラインです。 (2 人のユーザが 旅と気ままなフォーラム を参照しています。)

登録ユーザ: 0
ゲスト: 25

もっと...

Facebook,RSSリンク表示


RSSicon 最新記事のRSS