Табличная вёрстка в теме prosilver (профиль слева)немного подредактировал тему от 6 июля 2017 года.
Некоторым пользователям и администраторам больше нравится, когда профиль автора темы размещается слева (в стандартном просилвере - справа). Описания переноса профиля влево в стандартном варианте много в сети в любом исполнении, поэтому нет смысла их "просто копировать". для табличной вёрстки (вероятно) тоже есть, но я предлагаю свой. как один из вариантов.
Выглядеть будет так:
Вложение:
table_prosilver_left.png [ 90.44 КБ | Просмотров: 17 ]
table_prosilver_left.png
Поехали.
Правки css-файлов:
Открыть
theme/content.cssНайти
Код: Выделить всё
/* Poster profile block
----------------------------------------*/
Вставить после найденного
Код: Выделить всё
.postprofile2 {
width: 200px;
margin: 0;
color: #666666;
float: left;
display: inline;
}Открыть
theme/colours.cssНайти
Код: Выделить всё
.online {
background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
}Добавить в код
margin-top: -5px;
margin-right: -10px;
так, чтобы получилось
Код: Выделить всё
.online {
background-image: url("{IMG_ICON_USER_ONLINE_SRC}");
margin-top: -5px;
margin-right: -10px;
}Теперь внимательно.
Меняем местами вывод профиля и поста.
(самое простое решение - скопировать
весь код вывода минипрофиля и поставить его перед кодом поста, после чего
удалить код вывода минипрофиля оттуда, где он был вначале.)
Вывод минипрофиля и его перемещение:
Открыть
viewtopic_body.htmlправка (1)
Найти
Код: Выделить всё
<!-- IF not postrow.S_IGNORE_POST -->
<dl class="postprofile" id="profile{postrow.POST_ID}">
<dt>
<!-- IF postrow.POSTER_AVATAR -->
<!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
<!-- ENDIF -->
<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
</dt>
<!-- IF postrow.RANK_TITLE or postrow.RANK_IMG --><dd>{postrow.RANK_TITLE}<!-- IF postrow.RANK_TITLE and postrow.RANK_IMG --><br /><!-- ENDIF -->{postrow.RANK_IMG}</dd><!-- ENDIF -->
<dd> </dd>
<!-- IF postrow.POSTER_POSTS != '' --><dd><strong>{L_POSTS}:</strong> {postrow.POSTER_POSTS}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_JOINED --><dd><strong>{L_JOINED}:</strong> {postrow.POSTER_JOINED}</dd><!-- ENDIF -->
<!-- IF postrow.POSTER_FROM --><dd><strong>{L_LOCATION}:</strong> {postrow.POSTER_FROM}</dd><!-- ENDIF -->
<!-- IF postrow.S_PROFILE_FIELD1 -->
<!-- Use a construct like this to include admin defined profile fields. Replace FIELD1 with the name of your field. -->
<dd><strong>{postrow.PROFILE_FIELD1_NAME}:</strong> {postrow.PROFILE_FIELD1_VALUE}</dd>
<!-- ENDIF -->
<!-- BEGIN custom_fields -->
<dd><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}:</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
<!-- END custom_fields -->
<!-- IF not S_IS_BOT -->
<!-- IF postrow.U_PM or postrow.U_EMAIL or postrow.U_WWW or postrow.U_MSN or postrow.U_ICQ or postrow.U_YIM or postrow.U_AIM or postrow.U_JABBER -->
<dd>
<ul class="profile-icons">
<!-- IF postrow.U_PM --><li class="pm-icon"><a href="{postrow.U_PM}" title="{L_PRIVATE_MESSAGE}"><span>{L_PRIVATE_MESSAGE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_EMAIL --><li class="email-icon"><a href="{postrow.U_EMAIL}" title="{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}"><span>{L_SEND_EMAIL_USER} {postrow.POST_AUTHOR}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_WWW --><li class="web-icon"><a href="{postrow.U_WWW}" title="{L_VISIT_WEBSITE}: {postrow.U_WWW}"><span>{L_WEBSITE}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_MSN --><li class="msnm-icon"><a href="{postrow.U_MSN}" onclick="popup(this.href, 550, 320); return false;" title="{L_MSNM}"><span>{L_MSNM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_ICQ --><li class="icq-icon"><a href="{postrow.U_ICQ}" onclick="popup(this.href, 550, 320); return false;" title="{L_ICQ}"><span>{L_ICQ}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_YIM --><li class="yahoo-icon"><a href="{postrow.U_YIM}" onclick="popup(this.href, 780, 550); return false;" title="{L_YIM}"><span>{L_YIM}</span></a></li><!-- ENDIF -->
<!-- IF postrow.U_AIM --><li class="aim-icon"><a href="{postrow.U_AIM}" onclick="popup(this.href, 550, 320); return false;" title="{L_AIM}"><span>{L_AIM}</span></a></li><!-- 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 -->
</dl>
<!-- ENDIF -->
<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>Вставить перед
Код: Выделить всё
<div class="postbody">
<!-- IF postrow.S_IGNORE_POST -->
<div class="ignore">{postrow.L_IGNORE_POST}</div>
<!-- ELSE -->Найденный код удалить оттуда, откуда вы его скопировали, то есть весь первый код, который начинался с
Код: Выделить всё
<!-- IF not postrow.S_IGNORE_POST -->
<dl class="postprofile" id="profile{postrow.POST_ID}">
после переноса необходимо удалить с того места в файле, где он был.
Это только кажется страшно - ничего сложного в этом нет. делайте внимательно и всё получится.
Часто спрашивают, как именно переделывать, если стоят уже какие-то модификации.
Все модификации, установленные в минипрофиле, находятся
внутри того кода, что вы копируете и, соответственно, "переедут" вместе с ним.
Перенесли? Теперь начинаем править код:
правка (2)
Найти
Код: Выделить всё
<!-- 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 -->">Удалить часть кода
Код: Выделить всё
<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->Чтобы получилось
Код: Выделить всё
<!-- 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 -->">этот код убирает полоску "в сети" над минипрофилем справа.
правка (3)
Найти
Код: Выделить всё
<div class="inner"><span class="corners-top"><span></span></span>Вставить после найденного
Код: Выделить всё
<table width="100%">
<tr>
<td style="width:200px;border-right:1px solid #069;padding:0 10px;" valign="top">где
border-right:1px solid #069; - цвет разграничительной полоски
правка (4)
Найти
Код: Выделить всё
<dl class="postprofile" id="profile{postrow.POST_ID}">Заменить на
Код: Выделить всё
<dl class="postprofile2<!-- IF postrow.S_ONLINE and not postrow.S_IGNORE_POST --> online<!-- ENDIF -->" id="profile{postrow.POST_ID}">эта правка выведет полоску "в сети" на новом месте минипрофиля - слева.
правка (5)
Найти
Код: Выделить всё
<!-- ENDIF -->
<!-- ENDIF -->
</dl>
<!-- ENDIF -->
<div class="back2top"><a href="#wrap" class="top" title="{L_BACK_TO_TOP}">{L_BACK_TO_TOP}</a></div>Вставить после найденного
Код: Выделить всё
</td>
<td style="width:100%;padding-left:10px;" valign="top">правка (6)
Найти
Заменить найденное на
Найти
Код: Выделить всё
<!-- IF postrow.BUMPED_MESSAGE --><div class="notice"><br /><br />{postrow.BUMPED_MESSAGE}</div><!-- ENDIF -->
<!-- IF postrow.SIGNATURE --><div id="sig{postrow.POST_ID}" class="signature">{postrow.SIGNATURE}</div><!-- ENDIF -->
<!-- ENDIF -->
</div>Вставить после найденного
Вроде ничего не перепутал. :-D Ставьте, пробуйте. Будут проблемы - обращайтесь.
Не забывайте чистить кэш! Правки css файлов обычно проявляются только после обновления кэша браузера (истории). У кого как, конечно.
Сейчас создам файл
viewtopic_body.html от "чистого" prosilver c внесёнными изменениями (специально здесь пометил
правка (1) и так далее), в самом файле все изменения тоже помечены. это как учебное пособие. файл полностью рабочий, конечно.
Вложение:
viewtopic_body.rar [3.82 КБ]
Скачиваний: 1
