Главная / Каталог скриптов для uCoz / Вид материалов

Вид материалов для новостей или блога в светлом стили для ucoz

Добавлено 17-03-2022 в 23:55

Категория Вид материалов
Авторwaak
Просмотры541
Комментарии1
Понравилось6

Вид материалов для новостей или блога в светлом стили для ucoz

Здравствуйте! Сегодня я решил написать вид материалов и посидев подумав для какой тематики его сделать и пришел к решению что он будет либо новости или блог а лучше что бы подходил и туда и туда.

Долго думал каким же его сделать визуально открыл фотошоп но не придумал нечего и решил писать из головы мол как пойдёт и вот представляю вам то что у меня вышло!

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

Скриншоты вида материалов

Полный вид

Уменьшенный вид

Ну и для тех кому всё ещё не совсем понятно как и что прикрепляю видео демонстрацию на которой показано более подробнее как он меняется при разных размерах как плавает панель с датой и с счечкиком просмотров лайков и комментариев материала ладушки смотрим видео

Видео демонстрация

Ну и для тех кому понравился данный вид материалов и хотелось бы его видеть на своем сайте ucoz предлагаю приступить к его установке на свой сайт

Установка вида материалов

И в первую очередь давайте решим для какого модуля мы будем его ставить? и пока вы думаете я покажу на примере модуля блог а для этого нам нужно зайти в панель управление дизайном модуль блог вид материалов и заменить весь код что там есть на код что находится ниже

Код

<div class="widwaaknevs">
  <div class="waaknevsl">
  <div class="widwaaknevsld">
  <div class="datawaak" id="datawaak$ID$">24.mart.2022</div>
  <div class="bc" title="Просмотры"><i class="fa fa-eye" aria-hidden="true"></i> $READS$</div>
  <div class="bc" title="Комментарии"><i class="fa fa-commenting-o" aria-hidden="true"></i> $COMMENTS_NUM$</div>
  <div class="bc" title="Оценки"><i class="fa fa-heart-o" aria-hidden="true"></i> $RATED$</div>
  </div>
  </div>
  <div class="waaknevsr">
  <a href="$ENTRY_URL$"><h2>$TITLE$</h2></a>
  <div class="widwaaknevsdata"><i class="fa fa-folder-open" aria-hidden="true"></i> Категория <span> $CATEGORY_NAME$</span></div>
  <span>
  $MESSAGE$
  </span>
  <div class="waaknevslfoot">
  <a href="$PROFILE_URL$"><span class="waaknevslfootava"><img src="$AVATAR_URL$" alt=""></span>
  <span class="widwaaknevsname">$USERNAME$</span></a>
  <span class="waaknevsrssmat"><a href="$ENTRY_URL$">подробнее</a></span>
  <div class="clr"></div>
  </div>
  </div>
</div>

<script>
  var str = $("#datawaak$ID$").html();
var mas = str.split('.');
var code='';
for (i=0; i<mas.length; i++){
  code+= '<div>'+mas[i]+'</div>';
}
$("#datawaak$ID$").html(code);
</script>

Отлично не забываем сохранить!

Так как в данном виде материалов я меняю формат даты скриптом что бы привести его к такому видо то у вас на сайте должно быть отключено в общих настройка настройки даты пункт Вывод даты как сегодня в противном случае дата будет выводить просто словом сегодня пока не пройдет пару дней так как ещё будет слова вчера более подробней о скрипте изменения даты можно почитать по ссылки Меняем вид даты в виде материала а мы продолжим дальше установку

Следующим пунктом установим стили нашего вида материалов для этого перейдём в таблицу стилей и вставим туда в самый конец код что указан ниже

Таблица стилей

Код

.datawaak div {
  text-align: center;
}

/*дата*/
  .datawaak div:nth-child(1) {
  font-size: 40px;
  font-weight: bold;
  padding: 10px 0 0;
  }
/*месяц*/
  .datawaak div:nth-child(2) {
  font-size: 16px;
  text-transform: uppercase;
  }
/*год*/
  .datawaak div:nth-child(3) {
  font-size: 11px;
  }

.widwaaknevs {
  background: #FFF;
  margin: 50px 150px;
  border: 1px solid #ddd;
  display: flex;
}
.waaknevsl {
  min-width: 100px;
  background: #f1f1f1;
  text-align: center;
  padding: 10px 0;
}

.waaknevsr {
  padding: 20px;
  width: calc(100% - 100px);
}
.waaknevsr h2 {
  color: #434343;
  font-size: 26px;
  display: block;
  padding: 10px 0;
}
.waaknevsr span {
  line-height: 22px;
}

.bc {
  cursor: pointer;
  margin: 10px;
  border-radius: 5px;
  background: #434343;
  font-size: 16px;
  line-height: 45px;
  color: #FFF;
}
.bc:hover {
  background: #323232;
}
.bc i {
  margin-right: 10px;
}
.widwaaknevsdata {
  margin: 0 0 20px;
  font-size: 13px;
  color: #434343;
}

.waaknevslfoot {
  padding: 20px 0 0;
}
.waaknevslfootava {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  overflow: hidden;
  display: inline-block;
  float: left;
}
.waaknevslfootava img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}
span.widwaaknevsname {
  display: inline-block;
  line-height: 40px;
  font-size: 16px;
  color: #434343;
  padding: 0 20px;
}
.waaknevsrssmat a {
float: right;
font-size: 16px;
text-transform: none;
text-decoration: underline;
display: inline-block;
line-height: 40px;
margin: 0 20px;
color: #FFF;
background: #434343;
padding: 0 20px;
border-radius: 5px;
  }
.waaknevsrssmat a:hover {
  background: #323232;
}
  .widwaaknevsld {
  position: sticky;
  top: 20px;
  }

Отлично не забываем сохранить!

Нам ещё нужно подключить шрифтовые иконки от font-awesome но только в том случае если они у вас ещё не подключены в противном случае повторно этого делать не нужно, ну а для тех у кого их нет то просто в самый вер первой строчкой в таблице стилей пропишите код ниже

Код

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css);

Последним шагом нам осталось очистим кеш у браузера комбинацией клавиш Ctrl+F5 и на этом установка завершена!

Жду ваших комментариев о данном виде материалов ну и если вдруг что то не понятно или не получается у вас установка настройка пишите не стесняйтесь.

Оставить комментарий

Добавлять комментарии могут только зарегистрированные пользователи.

Регистрация Вход

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

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

27-01-2024 в 15:12 материал

di dinyslamsinger

От души