MyBlog Обновление #1
Обновления к шаблону MyBlog #1.


Список изменений:
Улучшена система адаптивного вывода блоков / CSS Grid system 
Теперь расстояние между блоками можно легко и быстро настраивать.Так же доработан адаптивный вывод при просмотре сайта со смартфонов.
Изменена страница статистики сайта.
Улучшен и настроен адаптивный вывод блоков. Изменена таблица вывода топ пользователей.
Добавлен новый вида футера.
Новый футер разделен на 4 адаптивный блока с информацией.
Добавлен еще один вид модального окна авторизации и профиля пользователя.
Новое модальное окно более компактное и удобное. Так же доработаны иконки для авторизации через соц сети.
Добавлен новый вид слайдера на главную страницу и еще один слайдер в правый блок шаблона.
Новый слайдер позволит выводить популярные новости на главной странице. Соответственно добавлен новый вид topnews.Новый вид topnews адаптивно выводит популярные новости как на главной странице так и в правом блоке шаблона.


Установка обновлений1. Расстояние между блоками
-Открываем файл шаблона gott.css и в самый конец добавляем:
.row.my{padding-right:7.5px !important;padding-left:7.5px !important}
.col-lg-1.my,.col-lg-10.my,.col-lg-11.my,.col-lg-12.my,.col-lg-2.my,.col-lg-3.my,.col-lg-4.my,.col-lg-5.my,.col-lg-6.my,.col-lg-7.my,.col-lg-8.my,.col-lg-9.my,.col-md-1.my,.col-md-10.my,.col-md-11.my,.col-md-12.my,.col-md-2.my,.col-md-3.my,.col-md-4.my,.col-md-5.my,.col-md-6.my,.col-md-7.my,.col-md-8.my,.col-md-9.my,.col-sm-1.my,.col-sm-10.my,.col-sm-11.my,.col-sm-12.my,.col-sm-2.my,.col-sm-3.my,.col-sm-4.my,.col-sm-5.my,.col-sm-6.my,.col-sm-7.my,.col-sm-8.my,.col-sm-9.my,.col-xs-1.my,.col-xs-10.my,.col-xs-11.my,.col-xs-12.my,.col-xs-2.my,.col-xs-3.my,.col-xs-4.my,.col-xs-5.my,.col-xs-6.my,.col-xs-7.my,.col-xs-8.my,.col-xs-9.my{padding-right:7.5px !important;padding-left:7.5px !important}
7.5px - это расстояние между блоками в адаптивной сетке. С левой стороны у нас 7.5px и с правой, в итоге между блоками нашей сетке будет 15px. Вы можете изменить данное значение. Например padding-right:4px; padding-left:4px; расстояние между блоками будет в 8 пикселей.- Открываем файл main.tpl и ищем строки:
 <div class="row">
     <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
           {info}
               {content}
     </div>
 <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
           {include file="sidebar.tpl"}
 </div> 
 </div>
- В класс сетки добавляем класс my. Должно получиться следующее:
<div class="row my">
 <div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 my">
 {info}
 {content}
 </div>
 <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 my">
 {include file="sidebar.tpl"}
 </div> 
 </div>


2. Новая страница статистики- Открываем файл шаблона stats.tpl и просто заменяем всё содержимое на это:
<div class="panel panel-default">
 <div class="panel-heading"><i class="fa fa-bar-chart" aria-hidden="true"></i> Статистика сайта</div>
 <div class="panel-body">
 
<div class="panel panel-info">
 <div class="panel-heading"> <i class="fa fa-circle-o" aria-hidden="true"></i> Общая статистика</div>
 <div class="panel-body" style="color: #55606e;">
 <ul class="list-group" style="margin:0;">
                <li class="list-group-item" style="background:#fff;"><b>За сутки</b> <span>{news_day} новостей и {comm_day} комментариев, зарегистрировано {user_day} пользователей</span></li>
                <li class="list-group-item" style="background:#fff;"><b>За неделю</b> <span>{news_week} новостей и {comm_week} комментариев, зарегистрировано {user_week} пользователей</span></li>
                <li class="list-group-item" style="background:#fff;"><b>За месяц</b> <span>{news_month} новостей и {comm_month} комментариев, зарегистрировано {user_month} пользователей</span></li>
                 <li class="list-group-item" style="background:#fff;">Общий размер базы данных: {datenbank}</li>    
 </ul>
 </div>
 </div>
 
<div class="row row-flex row-flex-wrap my">
 <div class="col-md-4 my">
 <div class="panel panel-info" style="width:100%;">
 <div class="panel-heading"><i class="fa fa-file-image-o" aria-hidden="true"></i> Статистика новостей</div>
 <div class="panel-body" style="font-size: 13px;color: #55606e;">
 <table class="table" style="margin:0;">
         <tbody>
         <tr>
          <td><i class="fa fa-caret-right" aria-hidden="true"></i> Общее кол-во новостей:</td>
         <td>{news_num}</td>
              </tr>
              <tr>
         <td><i class="fa fa-caret-right" aria-hidden="true"></i> Из них опубликовано:</td>
         <td>{news_allow}</td>
         </tr>
         <tr>
         <td><i class="fa fa-caret-right" aria-hidden="true"></i> Опубликовано на главной:</td>
         <td>{news_main}</td>
         </tr>
 <tr>
         <td><i class="fa fa-caret-right" aria-hidden="true"></i> Ожидает модерации:</td>
         <td>{news_moder}</td>
         </tr>
         </tbody>
</table>
 </div>
 </div>
 </div>
 <div class="col-md-4 my">
<div class="panel panel-info" style="width:100%;">
 <div class="panel-heading"><i class="fa fa-users" aria-hidden="true"></i> Статистика пользователей</div>
 <div class="panel-body" style="font-size: 13px;color: #55606e;">
 <table class="table">
         <tbody>
         <tr>
          <td><i class="fa fa-caret-right" aria-hidden="true"></i> Общее кол-во пользователей:</td>
         <td>{user_num}</td>
              </tr>
              <tr>
         <td><i class="fa fa-caret-right" aria-hidden="true"></i> Из них забанено:</td>
         <td>{user_banned}</td>
         </tr>
         </tbody>
</table>
 </div>
 </div> 
 </div>
 <div class="col-md-4 my">
<div class="panel panel-info" style="width:100%;">
 <div class="panel-heading"><i class="fa fa-comments-o" aria-hidden="true"></i> Комментарии</div>
 <div class="panel-body" style="font-size: 13px;color: #55606e;">
 <table class="table">
         <tbody>
         <tr>
          <td><i class="fa fa-caret-right" aria-hidden="true"></i> Кол-во комментариев:</td>
         <td>{comm_num}</td>
              </tr>
         <tr>
         <td><i class="fa fa-caret-right" aria-hidden="true"></i> <a href="/?do=lastcomments">Посмотреть последние</a></td>
         
         </tr>
         </tbody>
</table>
 </div>
 </div>
 </div>
 </div>
 <div class="panel panel-info">
 <div class="panel-heading"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Лучшие пользователи</div>
 <div class="panel-body">
 <table class="table table-hover" style="width: 100%;margin:0;font-size: 13px;">{topusers}</table>
 </div>
</div>
</div>
</div>

- Так же в наш файл gott.css в самый конец добавляем:
.row-flex, .row-flex > div[class*='col-'] { 
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
 align-content: flex-start;
 flex:0;
}

.row-flex > div[class*='col-'] {
     margin:-.2px; 
}
Изменения:1. Содержимое блока "Общая статистика" выровняли.
2. Блоки "Статистика новостей" "Статистика пользователей" "Комментарии" теперь имеют общую высоту. т.е все три блока выравниваются по высоте с самым высоким.
3. Изменили стиль таблицы топ пользователей.


3. Новый вид футера (заглушка)Открываем файл footer.tpl удаляем содержимое и вставляем:
<div class="row row-flex row-flex-wrap my">
 <div class="col-xs-6 col-sm-3 my"><div class="ram"><center class="flogo hidden-xs">MyBlog</center></div></div>
 <div class="col-xs-6 col-sm-3 my"><div class="ram">
 <h3>Добро пожаловать!</h3>
 <p>Ваш текст. Сообщение</p>
 <div class="btn-group btn-group-justified" role="group" aria-label="...">
 <div class="btn-group" role="group">
 <button type="button" class="btn btn-primary">Кнопка</button>
 </div>
 <div class="btn-group" role="group">
 <button type="button" class="btn btn-primary">Ссылка</button>
 </div>
 </div>
 </div></div>

 <div class="clearfix visible-xs-block"></div>

 <div class="col-xs-6 col-sm-3 my"><div class="ram">
 Eu te aute aliqua sunt, proident nisi 
 quibusdam pariatur, a tamen sed malis 
 iis noster a laboris an elit ad commodo 
 quo cillum quamquam an culpa quibusdam 
 </div></div>
 <div class="col-xs-6 col-sm-3 my"><div class="ram">
 <p style="font-size:12px;">
 Если вы нашли ошибку либо опечатку на сайте, выделив её нажмите <br>CTRL + ENTER. <br>Отправте сообщение о найденой ошибке, тем самым вы внесете огромный вклад в равитие проекта. Спасибо;)
 </p>
 </div></div>
</div>

Открываем файл gott.css и в самый конец дописываем:
.ram{
 width:100%;
 border: 1px solid #434a54;
 padding: 5px 10px 5px 10px;
}

Открываем файл bootstrap.css и на 1227 строке удаляем строки:
.h3 {
 margin-top: 20px;
 margin-bottom: 10px;
}





4. Слайдер в правый блок шаблона.
Открываем файл gott.css и добавляем:
#news .item{
 margin: 3px;
}
#news .item img{
 display: block;
 width: 100%;
 height: 180px;
 object-fit: cover;
}

.snip1273 {
 position: relative;
 float: left;
 width: 100%;
 color: #ffffff;
 text-align: left;
 background-color: #000000;
 font-size: 15px;
}
.snip1273 * {
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 -webkit-transition: all 0.4s ease-in;
 transition: all 0.4s ease-in;
}
.snip1273 img {
 position: relative;
 max-width: 100%;
 vertical-align: top;
}
.snip1273 figcaption {
 position: absolute;
 top: 0;
 right: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 padding: 20px 30px;
}
.snip1273 figcaption:before,
.snip1273 figcaption:after {
 width: 1px;
 height: 0;
}
.snip1273 figcaption:before {
 right: 0;
 top: 0;
}
.snip1273 figcaption:after {
 left: 0;
 bottom: 0;
}
.snip1273 h3,
.snip1273 p {
 line-height: 1.5em;
}
.snip1273 h3 {
 margin: 0 0 5px;
 font-weight: 700;
 text-transform: uppercase;
}
.snip1273 p {
 font-size: 0.8em;
 font-weight: 500;
 margin: 0 0 15px;
}
.snip1273 a {
 position: absolute;
 top: 0;
 bottom: 0;
 right: 0;
 left: 0;
 z-index: 1;
}
.snip1273:before,
.snip1273:after,
.snip1273 figcaption:before,
.snip1273 figcaption:after {
 position: absolute;
 content: '';
 background-color: #ffffff;
 z-index: 1;
 -webkit-transition: all 0.4s ease-in;
 transition: all 0.4s ease-in;
 opacity: 0.8;
}
.snip1273:before,
.snip1273:after {
 height: 1px;
 width: 0%;
}
.snip1273:before {
 top: 0;
 left: 0;
}
.snip1273:after {
 bottom: 0;
 right: 0;
}
.snip1273:hover img,
.snip1273.hover img {
 opacity: 0.4;
}
.snip1273:hover figcaption,
.snip1273.hover figcaption {
 opacity: 1;
}
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
 height: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after {
 width: 100%;
}
.snip1273:hover:before,
.snip1273.hover:before,
.snip1273:hover:after,
.snip1273.hover:after,
.snip1273:hover figcaption:before,
.snip1273.hover figcaption:before,
.snip1273:hover figcaption:after,
.snip1273.hover figcaption:after {
 opacity: 0.1;
}

Далее в файле sidebar.tpl в самое начало вставляем:
<div data-aos="zoom-in-up">
<div class="panel panel-default">
 <div class="panel-heading" style="background-color: #434A54;border-color: #656D78;color: #ddd;">Новости мира</div>
 <div class="panel-body" style="padding: 0px 0 3px; 0;">
 <div id="news">
 {custom category="9" template="news" limit="6" order="date" sort="desc" cache="no"}
 </div>
 </div>
</div>
</div>

Открываем файл main.tpl в самый конец перед тегом </body>  добавляем:
<script>
$(document).ready(function() {
 $("#news").owlCarousel({
 autoPlay: 3000,
 items : 1,
 itemsDesktop : [1199,3],
 itemsDesktopSmall : [979,3]
 });
});
</script>
Это наши параметры и id слайдера.

Теперь нам необходимо создать отдельный файл "news" который будет отвечать за внешний вид новостей в слайдере.
В той же админ панели есть кнопка "Создать новый файл" Клацаем на неё и в окне вводим просто "news" (без всяких .tpl)


Открываем созданный файл news.tpl и вставляем следующее:
<div class="item">
 <figure class="snip1273">
 <img src="{image-1}">
 <figcaption>
 <span style="font-size:16px;font-weight:bold;">{title}</span>
 <p>{short-story limit="100"}</p><br>
 <p> <i class="fa fa-clock-o" aria-hidden="true"></i> {date}, <i class="fa fa-eye"></i> {views}, <i class="fa fa-comment-o"></i> {comments-num}</p>
 </figcaption>
 <a href="{full-link}"></a>
</figure>
</div>
Готово! Теперь обновляем страницу CTRL+F5 и радуемся новому слайдеру ;) 

Как работает слайдер ?
Очень просто. Разберем строку {custom category="9" template="news" limit="6" order="date" sort="desc" cache="no"}
  • category="9" - ID категории новостей которые будут отображаться в нашем слайдере.
  • template="news" - шаблон который будет отвечать за внешний вид наших новостей в слайдере.
  • limit="6" - Количество новостей.
  • order="date" - Порядок сортировки новостей. 
  • sort="desc" - Принимает значения asc или desc. Указывает порядок сортировки новостей. При использовании значения desc публикации сортируются по убыванию, а при использовании asc по возрастанию
  • cache="no" - Принимает значения yes или no. Устанавливает кэшировать работу модуля или нет



Шаблоны DLE
Комментариев 2
  1. Fenrir
    Ещё несколько багов и некрасивостей, которые стоит исправить. relaxed
    Указанные ниже проблемы на узких экранах (телефон 800x480px к примеру), или если просто окно браузера сжать по вертикали.
    1. Текст-логотип в футере не-респонсибл, вначале при сужении окна браузера наезжает на текст, а потом вообще в сторону съезжает и не виден.
    2. Слайдер не-респонсибл, плющится по вертикали (соответственно картинки в нём искажаются).
    3. Картинки в кратких новостях слева от текста. Это красиво и удобно в блогах если ширина экрана достаточная. А на телефонах эти картинки милиписечные. Лучше на xs-размерах их растягивать на всю ширину формы и размещать над или под текстом краткой новости.
    4. Аватарка пользователя в добавленных комментариях - то же самое. На маленьких экранах её стоит не уменьшать, а обтекать текстом с некоторыми отступами справа и снизу.
    5. Меню Слайдер-Статистика-Новости-... становится вертикальным на узких экранах. Стоит сделать или сэндвичем или хотя бы перемещать в конец страницы (под новости).
    6. Меню Статистика. В каждой таблице разное расстояние между текстом и цифрами. Аккуратней будет цифры во всех таблицах одну под другой располагать.
    7. О проекте - на sm и xs размерах  картинка наезжает на текст.

    Дальше проблемы - при любых размерах экрана.
    1. Контакты - форму для Сообщения стоит сделать выше
    2. Контакты и комментарии к новости - формы имя и е-мейл чересчур широкие. Пользователь в них должен написать совсем чуть текста - одно-два слово, а формы растянуты на всю ширину экрана, некрасиво смотрится.
    3. Кнопка Отправить съехала влево. Её стоит разместить или под формой комментария или справа под формой комментария.
    4. Меню Новости. Картинки плющит по вертикали (особенно вертикальную картинку с коробкой DLE), смотрится некрасиво.

    Ещё на планшетах (sm-ширина) горизонтальное меню Слайдер-Статистика-Новости выглядит некрасиво. Если пункт меню длинный (Новости форума) - то он занимает две строки. При нажатии на него весь фон этого пункта меню изменяет цвет. А если нажать на пункт Слайдер или Статистика, то цвет изменяется только вокруг текста, а под ним цвет остаётся прежним. Некрасиво смотрится.
    1. Stanislavskiy11
      Спасибо за полезную информацию!
      Повторюсь что эта были первые шаблоны, и я как-то не обращал внимания на вид с планшетов.
      Обязательно учту, проверю и исправлю все эти недостатки в следующем обновлении. Почти всем пользователям которые приобрели данный шаблон, я все настроил и исправил, к счастью жалоб не было)
Гость, оставишь комментарий?
Имя:*
E-Mail:


Подписаться на комментарии
Актуальная версия DLE 11.3
Обновленияnew

Обновления к шаблону MyBlog #1. Легко и быстро.

Подробнее
Какого типа шаблоны вам больше нравятся?
Информация
Пошалим?

Добро пожаловать на FOR-DLE.ru!

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

Пройти регистрацию
Авторизоваться
Уже зарегистрированны? А ну-ка живо авторизуйтесь!

Войти на сайт