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


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

2368
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 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • sasha2016tv написал:
  • Хороший скрипт
    Ох. Вижу, что обсуждение очень старое. Но!
    На других CMS так же будет все это реализовано. На нормальных CMS.
    Такое решение может подойти лишь для landing сайтов. Но и то, не думаю, что там кто то заморачивается в написании какого либо контроллера генерирования шаблона и используют прямо в лоб чистый HTML, поэтому и будут для каждой страницы свои блоки делать.

    Поэтому лучше тут все же дописать решение именно для ucoz без загрузки этих лишних блоков на странице. Ведь используя условные операторы этот код даже не будет прогружаться на странице. (Лол. Это ж доли секунд загрузки...) И что? Но давайте делать оптимальнее
    Моё авторство:)
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 7
    Гостей: 7
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: