|
お知らせ カスタマイズは自己責任にてお願いします。 |
例として旧掲示板で行っていた左右入替えトピック表示。
初歩的なカスタマイズ例として、トピック表示ページのユーザープロフィール・トピック表示欄の
左右入れ替えを載せておきます。
この入れ替えでキーワードとなるのがfloatプロパティです。
floatは、指定された要素を左または右に寄せて配置する際に使用します。
後に続く内容は、その反対側に回り込みます。
尚、floatプロパティは、positionプロパティで static以外の値が指定されている要素には
適用されないので注意してください。
スタイルシートの書き換え
content.css
オリジナル
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: left;
clear: both;
}
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-left: 1px solid #FFFFFF;
width: 22%;
float: right;
display: inline;
}
書き換え後
.postbody {
padding: 0;
line-height: 1.48em;
color: #333333;
width: 76%;
float: right;
clear: both;
padding-left: 10px;
}
.postprofile {
/* Also see tweaks.css */
margin: 5px 0 10px 0;
min-height: 80px;
color: #666666;
border-right: 1px solid #888;
width: 22%;
float: left;
display: inline;
}
colours.css
オリジナル
.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
}
書き換え及び追加
.online {
background-image: url("{T_IMAGESET_LANG_PATH}/icon_user_online.gif");
margin-top: -5px;
}
.postprofile .online {
margin-top: -10px;
}
このままでは、ONLINE表示にズレが生じるので、該当するテンプレートHTMLを修正します。
viewtopic_body.html
オリジナル
<!-- BEGIN postrow -->
<!-- IF postrow.S_FIRST_UNREAD --><a id="unread"></a><!-- ENDIF -->
<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->">
<div class="inner"><span class="corners-top"><span></span></span>
赤色の部分をカットした状態
<!-- BEGIN postrow -->
<!-- IF postrow.S_FIRST_UNREAD --><a id="unread"></a><!-- ENDIF -->
<div id="p{postrow.POST_ID}" class="post <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF -->">
<div class="inner"><span class="corners-top"><span></span></span>
カットした赤色の部分を下記の追記箇所にペーストします。
オリジナル
<dl class="postprofile" id="profile{postrow.POST_ID}">
<dt>
追記後
<dl class="postprofile" id="profile{postrow.POST_ID}">
<div class="<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST -->online<!-- ENDIF -->" style="padding: 10px 0 0 10px;">
<dt>
<div>構文有効範囲</div>終了タグの箇所
オリジナル
<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
</ul>
</dd>
<!-- ENDIF -->
<!-- ENDIF -->
</dl>
<!-- ENDIF -->
追記後
<!-- IF postrow.U_JABBER --><li class="jabber-icon"><a href="{postrow.U_JABBER}" onclick="popup(this.href, 550, 320); return false;" title="{L_JABBER}"><span>{L_JABBER}</span></a></li><!-- ENDIF -->
</ul>
</dd>
<!-- ENDIF -->
<!-- ENDIF -->
</div>
</dl>
<!-- ENDIF -->