» »

Стандартный вид материалов в светлом для uCoz

Стандартный вид материалов в светлом для uCoz

Это доработанный вид материала, который идет в стандартном виде, где добавлено изображение и стили для кнопки на переход к основе статьи. Здесь больше как мануал будет идти, так как каждый может создать такой вид, что на светлом или на темном шаблоне. Это говорится о тех форматах, что предлагает система uCoz.

Где изначально ставим сам каркас, а потом добавляем в код расширение, чтоб вывести картинку, но и кнопка, она может быть разная, что взял простую, где добавлены тени, и каждый веб мастер может сам отредактировать под свою стилистику. Что после этого не нужно искать какой то оригинальное решение, что самостоятельно можно самому все сделать.

Это стандартный код, где добавлены классы:

HTML

Код
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?>
<div class="eTitle" style="text-align:left;"><a href="$ENTRY_URL$">$TITLE$</a></div>
<?if($MESSAGE$)?><div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">
<a href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="$TITLE$" title="Фильм $TITLE$" class="leftimg"></a>$MESSAGE$</div><?endif?>  
<div class="eDetails" style="clear:both;">
<a href="$ENTRY_URL$"><div style="float:right" class="zatukinas">Читать дальше</div></a>  
<?if($CATEGORY_NAME$)?><a class="e-category" href="$CATEGORY_URL$">$CATEGORY_NAME$</a><span class="ed-sep"> | </span><?endif?>
<span class="e-reads"><span class="ed-title">Просмотров:</span> <span class="ed-value">$READS$</span></span><span class="ed-sep"> | </span>

<?if($USERNAME$)?><span class="e-author"><span class="ed-title">Добавил:</span> <span class="ed-value"><a href="$PROFILE_URL$">$USERNAME$</a></span></span><span class="ed-sep"> | </span><?endif?>
<span class="e-date"><span class="ed-title">Дата:</span> <span class="ed-value" title="$TIME$">$DATE$</span></span>
<?if($COMMENTS_URL$)?><span class="ed-sep"> | </span><a class="e-comments" href="$COMMENTS_URL$">Комментарии ($COMMENTS_NUM$)</a><?endif?>
</div></td></tr></table>

CSS

Здесь нужно найти стиль, что отвечает за функциональность самого вида и в него добавить размер, что будет выводить изображение.

Находим, что то похожее, у каждого по своему будет.

Код
.eMessage img,.eText img{max-width:100%}

Заменяем:

Код
.eMessage img,.eText img {width: 201px;height: 265px;float:left;margin: 1px 10px 1px 0!important;border: 1px solid #5d5656;border-radius: 2px;padding: 1px;}


Подключаем кнопку:

Код
.zatukinas {
  text-align: center;
  display: block;
  padding-left: 0px;
  padding-right: 0px;
  background: #226f9a;
  color: #fff9f9;
  font-size: 12px;
  -webkit-border-radius: 56px;
  width: 110px;
  box-shadow: 0px 5px 10px 0px rgba(178, 178, 185, 0.5);
  border: 2px solid #ffffff;
  margin: -5.9px 0px 0px 0px;
  padding: 3px 0px 3px 0px;
}
.zatukinas:hover {text-decoration:none;background: #0b415d;}

На этом все, как видим не чего сложного.
17.02.2018 Просмотров: 560 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
PLAYTEX
PLAYTEX 07.04.2018 08:251
0
На многие сайты можно установить.
Kosten
Kosten 21.05.2018 00:392
0
Так стандартный вид, под такую тему и строился этот вид материалов, чтоб на многие тематики подошел.
avatar