» »

Светлый вид материалов для 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 на его:

Код
.post{height: 1%;background: #fff;border: 1px solid #ccc;margin: 0 -1px 24px -1px;padding: 0 24px 0 0;position: relative;z-index: 7}  
.post:after{content: "";clear: both;display: block}  
.post .visual{float: left;width: 400px;height: 300px;position: relative;border-right: 1px solid #e0e0e0;margin: 0 24px 0 0}  
.post .visual img{float: left;width: 100%;width: 400px;height: 300px}  
.post .v-panel{position: 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 .date{font-style: normal;float: left;min-width: 64px}  
.post .v-panel .autor{float: left}  
.post .v-panel .autor a{color: #fff}  
.post .v-panel .v-count{float: right;width: 56px;font-size: 17px;line-height: 28px;text-align: center;background: #4ebaf6}  
.post .v-panel .v-count,.post .v-panel .v-count a{color: #fff}  
.post .v-panel .v-count1{float: right;color: #babdbe;margin: 0 7px 0 0}  

.post .description{overflow: 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 .description{font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif}}  
.post .list-post-title,.post h2{font-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 h2{font-family: "Segoe UI", "Helvetica Neue", Helvetica, Tahoma, sans-serif}  
}  
.post .list-post-title a,.post h2 a{color: #000}  
.post .list-post-title a:hover,.post h2 a:hover{color: #0072bc;text-decoration: none}  
.post p{margin: 0;color: #000}.post .more-box{position: absolute; z-index: 3;bottom: 0;right: 24px}  
.post .btn-more{float: 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-more{font-family: "Segoe UI", "Helvetica Neue", Helvetica, sans-serif}  
}  
.post .btn-more:hover{text-decoration: none;background: #4ebaf6}  
.post .meta{font-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%;  
}


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



Вообщем такой вид, где вы можете сами его сделать совершенно другим, так как он настроен. Это заменить кнопку и по дизайну, что то от себя добавить.
29.10.2015 Просмотров: 526 Комментарий: (9)

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

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

Комментарий: 9
Brung
Brung 29.10.2015 21:511
0
Это что такое огромное, что так, нужно было скрин по пол вида сделать, да он так и сделан. Но видно, что категория на нем, а 5 что означает.
Kosten
Kosten 29.10.2015 21:562
0
Brung, найдите лучше, а что пять означает, это комментарий. Что написано устанавливайте и отлично будет. Говорю, его если нужно, то можно сделать не плохой вид, который настроен, от вас только голова и дизайн на его, поставить красивую кнопку и закрыть ее от мобильный устройств, ссылка в материале. Что думаете, сразу вид такой навороченный по самое не хочу, нужно немного и самому пошевелиться.
AnTron
AnTron 29.10.2015 21:593
0
Это самый нормальный вид и понятный, смотрю что то дизайнерских не стало, видать кнопка редактирование не дает нормально смотреться. Да они все, думаю подрят не пройдут даже проверку у гугл на адаптацию под мобилу. Так что сейчас такие еще нужно поискать.
ZruBkul
ZruBkul 29.10.2015 22:014
0
Здесь с AnTron не поспоришь, но есть еще одно, там стоит H1 а это значит на главной будет несколько, если пойдет вид на ее, а это не ась как хорошо.
Kosten
Kosten 29.10.2015 22:055
0
Сейчас с этим h1 вообще не понять, знаю что ставят только на главные заголовки, что на виде они являются. Просто приходилось видеть один кино сайт и несколько игровых, где прописано, и что. Там хостов мама не горюй, здесь точно не скажу, нужно или нет, если стояло по умолчанию, думаю не чего такого.
trem200
trem200 29.10.2015 23:276
0
А для тёмного дизайна такой вид материалов есть?
Kosten
Kosten 30.10.2015 00:017
+1
Не знаю, только про светлый известно.
First
First 30.10.2015 02:488
0
Да его под тёмный переделывать 5 минут
Kosten
Kosten 30.10.2015 03:139
0
First, вспомни свои профессиональные навыки и замути, что то оригинальное с этим кодом, чтоб можно было сказать, да ну не может быть.
avatar