| Kosten | Воскресенье, 21 Мая 2017, 17:49 | Сообщение 1 |
| Сейчас очень можно и безусловно, чтоб код был без ошибок, устанавливать на свой сайт и вот Светлый вид материала Modulus для uCoz который сделан без ошибок. Проверен на на поисковую систему гугл и он не обнаружил ошибки и был его вердикт "Отлично! Страница оптимизирована для мобильных устройств" что так сильно сейчас исправляют.
Сам он выполнен по своей конфигураций в оригинальном виде, что можно сразу заметить. Изображение находиться в красивой светлой рамке, где будет название, там специально сделано для него. Сами знаки, которые должны по идее стоять под названием, находятся в правой стороне с красивыми кнопками. Был один минус, это редактирование, которое установлено было впереди и открывалось на половину. Пришлось его перенести в правую сторону и выровнять, чтоб смотрелось красиво. Также прописаны на его стили и вы можете сделать прозрачность этой функций.
Установка:
Так как был под новостной блог сделан, но все можно поменять и нам нужно выбрать модуль и в нем вид материала и поставить этот код, который будет идти со стилями.
Код <div class="news"> <div class="news_l"> <h2>$MODER_PANEL$ <a href="$ENTRY_URL$">$TITLE$</a></h2> <?if($IMG_URL1$)?><div class="img_news"> <img src="$IMG_URL1$" alt="$TITLE$"/> </div><?endif?> <p class="message"><?if($MESSAGE$)?>$MESSAGE$<?else?>Описание отсутствует<?endif?></p> <div class="clear"></div> </div> <div class="news_r"> <div class="date" title="$WDAY$ в $TIME$">$DATE$</div> <ul> <li><img src="http://zornet.ru/zorner_ru_1/Ven/user.png" alt=""/><a href="$PROFILE_URL$" title="автор материала">$USERNAME$</a></li> <?if($CATEGORY_NAME$)?><li><img src="http://zornet.ru/zorner_ru_1/Ven/cat.png" alt=""/><a href="$CATEGORY_URL$" title="категория">$CATEGORY_NAME$</a></li><?endif?> <li><img src="http://zornet.ru/zorner_ru_1/Ven/comm.png" alt=""/><a href="$COMMENTS_URL$" title="комментариев">$COMMENTS_NUM$</a></li> <li><img src="http://zornet.ru/zorner_ru_1/Ven/eye.png" alt=""/><span title="просмотров">$READS$</span></li> </ul> </div> </div><!--/news-->
CSS:
Код /* style news */
.clear {
clear:both;
}
.news {
width:auto;
position:relative;
margin-bottom:20px;
padding:15px;
background:#fff;
border:1px solid #d3d3d3;
font-family:helvetica, arial, sans-serif;
}
.news_l {
padding-right:145px;
min-height:150px;
}
.news_r {
width:140px;
height:100%;
background:#f4f4f4;
position:absolute;
top:0;
right:0;
text-align:center;
}
.news h2 {
margin:0;
background:url(http://mvcreative.ru/example/15/images/stripe.png) 0px 7px repeat;
height:20px;
overflow:hidden;
margin:10px 0 15px 0;
position:relative;
}
.news h2 a {
background:#fff;
padding:2px 10px 2px 0;
text-decoration:none;
color:#89a0af; /*цвет заголовка новости*/
font-size:16px;
}
.news h2 span a {
padding-right:0;
}
.img_news {
float:left;
display:inline-block;
margin:0 14px 5px 0;
padding:5px;
background:#EDF1F2;
border:1px solid #DDE1E2;
}
.img_news img {
width:220px;
border:1px solid #DDE1E2;
}
.message {
padding:0 0 10px 0;
margin:0;
font-size:12px;
line-height:19px;
text-align:justify;
}
.news_r .date {
display:inline-block;
position:relative;
font-size:13px;
padding:7px 10px 4px 10px;
margin:18px 0 -5px 0;
background:#6099bf; /*цвет блока с датой*/
border:1px solid #fff;
color:#fff;
text-align:center;
}
.news_r ul {
list-style:none;
margin:0;
padding:0;
text-align:left;
width:100px;
margin:18px auto 0 auto;
font-size:12px;
}
.news_r ul li {
padding:3px 0 3px 5px;
border-bottom:1px dotted #BEBEBE;
}
.news_r ul li img {
margin-right:10px;
position:relative;
top:4px;
}
.news_r ul li a, .news_r ul li span {
color:#707070;
text-decoration:none;
}
Под него посты с материала:
1. Вид по дизайну красивый, а если еще он проверен, то это редкость, чтоб гугл подходило. Они даже из за этого запросы понижают, если сайт некорректно отображается на мобильном телефоне, так понимаю на эту тему проверка и была.
2. А у этого вида материала подробнее присутствует кнопка?
3. surovov, нет ее нету, просто изначально так все было. Только кнопку редактирование исправил. А что до функций далее, то ее не проблема поставить.
4. Все правильно, проверял его на ошибки на мобильный телефон, думаю еще не кто не забыл, когда всем пришли письма, чтоб они свои ресурсы сделали доступными. Про дизайнерские шаблоны молчу, там нужно реально все менять, но больше всего вид материала на главной выдает бани и здесь нужно было проверить.
5. Но как видите по английски написано, но если перевести, то будет Отлично! Страница оптимизирована для мобильных устройств. А если красный цвет, то вам выдадут ошибки, все можно проверить.
6. Что тут сказать, админу спасибо, что проверяет и потом когда он реально нормально по всем параметрам подходит, то заливает на сайт.
7. Один только минус заметил, что категорий нужно писать не большие, а то они вниз будут уходить
8. Да такое есть, но это не ошибка и считаться ей не будет, здесь все от дизайнера зависело, хотя его как понимаю не рисовали а создавали, видать это не учли. Если будет большая категория, она не куда не вылазит и будет просто ниже прописана в своем блоке.
9. Вообщем в коде после описание нужно поставить небольшой код, который и будет отвечать за далее. Находим "MESSAGE" и после него ставим этот код.
Код <a href="$ENTRY_URL$" style="float: right;">Читать далее</a>
Что стоит br это ниже отпускает саму запись.
И вот как получиться:
10. Отлично все описано, это вид забираю, и немного переделаю, если получиться, а точнее убрать весь правый блог и поставить все стандартно.
11. Сейчас с этими письмами, хоть немного успокоили, на системе ucoz был специальный код прописан, который стоит на всех страницах. И когда ставишь стандартный шаблон, то он без ошибок, стоит только сменить вид материала и все, то ссылки близко, то текст маленький.
12. Просто сейчас взялись очень круто за мобильную адаптацию, так как с мобилы много выходят и они требуют.
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 21 Мая 2017, 18:02 | Сообщение 2 |
|
| Это первый вид, что подходил под адаптивность, что встретил в сети.
| | Страна: (RU) |
| |
| Kolinkor | Воскресенье, 21 Мая 2017, 18:06 | Сообщение 3 |
| С правой стороны кнопки точно лишнее, их можно и ниже расположить.
| | Страна: (RU) |
| |
