Help us understand the problem. What is going on with this article?

テーマでアバターとログインIDを表示する

More than 5 years have passed since last update.

XOOPS Themes and Templates Advent Calendar 2012
⇒ 5日目の投稿 Suinさん:在来テーマのスタイルを利用したテンプレート
⇒ 7日目の投稿 kilicaさん:デザイナが知っておくべき XOOPS Cube Legacy 2.2 の新機能

今回のアドベントカレンダーの2回目のポストになります、竹原です。
師走とはよく言ったもので、こないだ4月になったばかりと思っていたらあっちゅう間に12月になってしまいましたし、なんでこんなに月日の経つのって早いんでしょうね。(歳だからってのは内緒だからね)
というわけで、今回もはりきっていっちゃいましょう!

最近のログイン可能なウェブサイトやウェブサービスでは、画面の右上などにログイン者名やアバターが表示されていることが多いと思います。

XOOPS Cubeでもテーマのちょっとしたカスタマイズで同じことが可能ですので、そのやり方を紹介したいと思います。

アバターとログイン者名を表示するコード

theme.html
<div class="management_bar">                                   # classを割当て
        <{if $xoops_isuser === true}>                          # ログインユーザか判定
                <span id="headerName">
                        <a href="<{$xoops_url}>/user.php">     # プロフィールへのリンク
                                <img src="<{$xoops_userid|xoops_user_avatarize}>" /> # アバターを表示
                                <{user_uname2name uname=$xoops_uname}>  # 本名があれば本名を表示、なければアカウント名を表示
                        </a>
                </span>
                <span id="headerLogOut">
                        <a href="<{$xoops_url}>/user.php?op=logout"><{$smarty.const._LOGOUT}></a>
                                                               # ログアウトリンク
                </span> 
        <{else}>                                               # ログインユーザでない場合
                <a href="<{$xoops_url}>/user.php"><{$smarty.const._LOGIN}></a> # ログインリンク
        <{/if}> 
        <{if $xoops_isadmin}>                                  # 管理者か判定
                <a href="<{$xoops_url}>/admin.php">ADMIN</a>   # 管理画面へのリンク
        <{/if}> 
</div>
style.css
.management_bar {
    position: relative;
    margin: 1px auto;
    max-width: 1024px;
    width: 100%;
    background: #000;
    padding: 1px 0 4px;
    color: #ff0000;
    text-align: right;
}
.management_bar a {
    color: #ff0000;
    text-decoration: none;
}
.management_bar a:hover {
    color: #ffb900;
}
.management_bar img {
    width: 1.2em;
    height: 1.2em;
    margin-top: 2px;
    vertical-align: text-bottom;
}
#headerLogOut {
    margin-left: 0.5em;
}

ログイン前の例
ログイン前の例

ログイン後の例
ログイン後の例

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away