Верстка вида материалов форума


Верстка вида материалов форума

2325
6.8 из 10
Проголосовало: 14




  • Скачать с сервера
  • Скачать
  • Смотреть демо

Вот решил сделать маленький подарок вебочке. Макет вида материалов форума был взять с сайта art-ps. В верстке всего одна картинка, сверстал sorokin_andrey (superuser). В архиве: картинка, код, psd.

Установка:

1) в css:
Code

.postTdTop {font-size:11px; font-family:tahoma; color:#6b6b6b; background: #e0e0e0; border-bottom:1px solid #c9c9c9; border-top:1px solid #f2f2f2; width:219px; height:14px; padding:7px; font-size:12px; font-weight:bold; text-shadow: 0px 1px 0px white; box-shadow: 0 1px 0 0 #f2f2f2; }
.postTdTop a, .postTdTop a:hover {text-decoration:none;color:#6b6b6b;}
.postAvatar {width:150px; margin:5px auto;}
.postinfo_top, .postinfo_center, .postinfo_bottom {background:url(http://s51.radikal.ru/i132/1210/58/3b1932f71e20.png)no-repeat; width:158px; height:17px; margin:0px auto; text-align:center; font-size:10px; color:#fff; padding-top:8px;}
.postinfo_center {background-position: 0 -25px; height:19px; padding-top:6px;}
.postinfo_bottom {background-position: 0 -50px; height:21px; padding-top:4px;}
.rep_left {float:left;}
.rep_right {float:right;}
.rep_left, .rep_right {margin:0 10px;}
.statusonline {color:#36a888!important;}


2) В вид материалов форума:
Code

<table border="0" width="100%" cellspacing="1" cellpadding="2" class="postTable">
<tr><td width="23%" class="postTdTop"><a href="javascript://" rel="nofollow" onClick="emoticon('[b]$USERNAME$[/b],');return false;">$USERNAME$</a><div style="float:right; color:#36a888;">$USER_STATUS$</div></td><td class="postTdTop"><?if($AWARDS_DO_URL$ && $USER_LOGGED_IN$ && $CUR_USER_ID$!=$UID$)?><div style="float:right"><a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-28-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="http://s61.ucoz.net/img/icon/thumbu.png" width="13" border="0" title="Хороший пост"></a> <a href="javascript://" rel="nofollow" onclick="new _uWnd('AwD','Вручить награду',380,200,{autosize:1,maxh:300},{url:'/index/55-$UID$-47-forum-$FID$_$TID$_$ID$_16_$TIMESTAMP$'});return false;"><img alt="" src="http://s61.ucoz.net/img/icon/thumbd.png" width="13" border="0" title="Плохой пост"></a></div><?endif?>Дата: $WDAY$, $DATE$, $TIME$ | Сообщение # $NUMBER$</td></tr>
<tr><td class="postTdInfo" valign="top">
   
<div class="postAvatar"><img title="$USERNAME$" src="$AVATAR_URL$" border="0" alt=""></div>
<div class="postinfo_top">Сообщений: $POSTS$</div>
<div class="postinfo_center">Замечания: <a class="banPercent" title="Смотреть историю замечаний" href="$READ_BAN_URL$">$BAN_RATING$</a></div>
<div class="postinfo_bottom"><a href="$DO_REP_URL$"><span class="rep_left">-</span></a><a href="$READ_REP_URL$" title="Смотреть историю репутаций">«$REP_RATING$»</a><a href="$DO_REP_URL$"><span class="rep_right">+</span></a></div>
   
</td><td class="posttdMessage" valign="top">$MESSAGE$
<?if($ATTACHMENT$)?> <div align="left" class="eAttach">Прикрепления: $ATTACHMENT$</div><?endif?>
<?if($SIGNATURE$)?><br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">$SIGNATURE$</span><?endif?>
<?if($EDITEDBY$)?><br><br><div class="edited">Сообщение отредактировал $EDITEDBY$</div><?endif?></td></tr>
<tr><td class="postBottom" align="center"><?if($USER_IP$)?><div class="postip">[ <a class="postIpLink" href="http://www.ripe.net/perl/whois?$USER_IP$" target="_blank">$USER_IP$</a><?if($POST_COUNTRY_ID$)?> (<a href="javascript://" rel="nofollow" onclick='prompt("","$POST_COUNTRY$");return false;'>$POST_COUNTRY_ID$</a>)<?endif?> ]</div><?else?> <?endif?></td><td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td>$USER_DETAILS_ICON_BAR$</td><td align="right" style="padding-right:15px;">$ENTRY_MANAGE_ICON_BAR$</td><td width="2%" nowrap align="right">$ON_TOP_ICON$$DEL_ENTRY_FIELD$</td></tr>
</table></td></tr></table>
Автор публикации: Загрузка
Загрузка
sorokin_andrey, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 10

MeVeR9
0
MeVeR9 написал: Написано 23 Ноября 2012 в 02:43
Комментарий №10
В какую места ставить код CSS скажите пожалуйсто мне очень нужно за рание спасибо

Гришок
+1
Гришок написал: Написано 02 Ноября 2012 в 19:44
Комментарий №9
всё поставил)

Гришок
0
Гришок написал: Написано 02 Ноября 2012 в 19:33
Комментарий №8
Может поможете?

InteGrant
0
InteGrant написал: Написано 02 Ноября 2012 в 19:22
Комментарий №7
Не думал что мой вид материалов может понравится стольки людям.
Когда ставил на оценку на одном портале,сказали что слишком уж легко...Ну все равно отослал на верстку и забыл. Видимо верстальщик его все-таки выложил в паблик)

Гришок
0
Гришок написал: Написано 02 Ноября 2012 в 19:14
Комментарий №6
Помогите пожалуйста.Очень понравился шаблон,но у меня криво отображается.Сам блок большой.По ширине в пол страницы.Как уменьшить?
[удалено]
Вот так отображается

ГришокОтвет от Администрации:

С такими вопросами на форум, в следующий раз будет наказание за сторонние ссылки


Сергей
0
Сергей написал: Написано 23 Октября 2012 в 15:44
Комментарий №5
Вау четкО просто!

z1MO_ok
0
z1MO_ok написал: Написано 22 Октября 2012 в 20:09
Комментарий №2
Sorry, не все можно сделать на css.. плохо макет разглядел)

Kostyan
0
Kostyan написал: Написано 22 Октября 2012 в 21:36
Комментарий №3
Мне это кажется, или ты сам с собой разговариваешь хД biggrin

z1MO_ok
0
z1MO_ok написал: Написано 22 Октября 2012 в 21:41
Комментарий №4
Не. Я просто не могу же редактировать свое сообщение, вот и написал. А тебе показалось biggrin

z1MO_ok
0
z1MO_ok написал: Написано 22 Октября 2012 в 20:07
Комментарий №1
Хаха.. Я тоже хотел сверстать, только ты меня опередил))) А что за картинка? Там же все можно на css сделать!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 8
    Гостей: 8
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: