вСкрипты для Юкоз

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

 
Сейчас чем проще тем лучше подходит к дизайну сайта и Светлый вид материалов для uCoz от Dimanik не исключение по конфигураций. Его плюсовые стороны, это безусловно оригинальность и вид его, а также не нужно забывать, что он уже настроен под мобильные устройства. Там остались детали, которые нужно убрать, и вы можете сами настроить, прочитав эту статью по той ситуаций, спрятать ту или иную функцию и она не будет видна к примеру на планшете. Это когда и какая категория и другое.

Установка:

Это сам каркас вид материала:

Код
<article class=»post»>  
  <div class=»visual»>  
  <a href=»$ENTRY_URL$» title=»$TITLE$» itemprop=»url»><img itemprop=»image» src=»$IMG_URL1$» alt=»$TITLE$» title=»$TITLE$»></a>  
  <div class=»v-panel»><a href=»$COMMENTS_URL$» class=»v-count» title=»Комментарии к $TITLE$»>$COMMENTS_NUM$</a>  
  <div class=»p-description»>  
  <em class=»date»>$DATE$</em>  
  <span class=»autor»><a href=»$CATEGORY_URL$»>$CATEGORY_NAME$</a></span><span class=»v-count1″ title=»Количество просмотров»></span>  
  </div>  
  </div>  
  </div>  
  <div class=»description»>  
  <h1 class=»list-post-title»><a rel=»bookmark» href=»$ENTRY_URL$» title=»$TITLE$» itemprop=»name»>$TITLE$</a></h1>  
  <div itemprop=»description»><p style=»text-align: justify;»>$MESSAGE$</p></div>  
  <span class=»bg-shadow»> </span>  
  </div>  
  <div class=»more-box»>  
<a href=»$ENTRY_URL$» class=»btn-more»>далее</a>  
  </div>  
</article>

Здесь стили CSS на его:

Код
.postheight: 1%;background: #fff;border: 1px solid #ccc;margin: 0 -1px 24px -1px;padding: 0 24px 0 0;position: relative;z-index: 7  
.post:aftercontent: «»;clear: both;display: block  
.post .visualfloat: left;width: 400px;height: 300px;position: relative;border-right: 1px solid #e0e0e0;margin: 0 24px 0 0  
.post .visual imgfloat: left;width: 100%;width: 400px;height: 300px  
.post .v-panelposition: absolute;left: 0;right: 0;bottom: 0;font-family: «Segoe UI», «Helvetica Neue», Helvetica, sans-serif;font-size: 13px;line-height: 28px;color: #fff;background: url(http://zornet.ru/Ajaxoskrip/Forma_skriptov/tygsa/hb_p_bg1.png);padding: 0 0 0 14px  
.post .v-panel .datefont-style: normal;float: left;min-width: 64px  
.post .v-panel .autorfloat: left  
.post .v-panel .autor acolor: #fff  
.post .v-panel .v-countfloat: right;width: 56px;font-size: 17px;line-height: 28px;text-align: center;background: #4ebaf6  
.post .v-panel .v-count,.post .v-panel .v-count acolor: #fff  
.post .v-panel .v-count1float: right;color: #babdbe;margin: 0 7px 0 0  

.post .descriptionoverflow: hidden;padding: 24px 0 0;height: 227px;position: relative;font-size: 13px;line-height: 18px;font-family: «Segoe UI», «Helvetica Neue», Helvetica, Tahoma, Arial, sans-serif;height: 224px  
@media screen and (max-width: 699px)  
  .post .descriptionfont-family: «Segoe UI», «Helvetica Neue», Helvetica, Tahoma, Arial, sans-serif}  
.post .list-post-title,.post h2font-size: 24px;line-height: 36px;font-family: «Segoe UI», «Helvetica Neue», Helvetica, Tahoma, sans-serif;font-weight: bold;margin: 0 0 5px;min-height: 22px;font-size: 19px;line-height: 20px  
  
@media screen and (max-width: 699px)  
  .post .list-post-title,.post h2font-family: «Segoe UI», «Helvetica Neue», Helvetica, Tahoma, sans-serif  
}  
.post .list-post-title a,.post h2 acolor: #000  
.post .list-post-title a:hover,.post h2 a:hovercolor: #0072bc;text-decoration: none  
.post pmargin: 0;color: #000.post .more-boxposition: absolute; z-index: 3;bottom: 0;right: 24px  
.post .btn-morefloat: left;font-family: «Segoe UI», «Helvetica Neue», Helvetica, sans-serif;font-size: 17px;line-height: 26px;color: #fff;background: #babdbe;padding: 0 12px 2px  
@media screen and (max-width: 699px).post .btn-morefont-family: «Segoe UI», «Helvetica Neue», Helvetica, sans-serif  
}  
.post .btn-more:hovertext-decoration: none;background: #4ebaf6  
.post .metafont-size: 10px;line-height: 28px;font-family: «Segoe UI», «Helvetica Neue», Helvetica, sans-serif;color: #858585;float: right;text-align: right;height: 28px;overflow: hidden;width: 363px

Если хотите, чтоб от название отходила черта по обеем сторонам как на изображение, то нужно добавить еще ниже стили.

Код
h1   
  overflow: hidden;  
  position: relative;  
  margin: 0;  
  text-align: center;  
  white-space: nowrap;  
  
h1:before,  
h1:after   
  content: »;  
  display: inline-block;  
  position: relative;  
  top: -1px;  
  width: 50%;  
  height: 1px;  
  vertical-align: middle;  
  background: black;  
  
h1:before   
  left: -10px;  
  margin-left: -50%;  
  
h1:after   
  left: 10px;  
  margin-right: -50%;  

Так смотреться на мобильнике будет:

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

источник: zornet.ru

Похожие посты