Виджет для магазина GameStores (информация)

[7erGO]

Доброго времени суток.

Делаю подобное впервые, строго не судите.
Меньше слов, больше дела.
Сейчас я покажу как можно сделать вот такой виджет:

Спойлер: Посмотреть скрины

Установка данного виджета очень проста. Для этого Вам нужно просто перейти в раздел "Внешний вид", далее нажать на "Виджеты", "Добавить виджет". Выбрать тип "Пользовательский виджет" и вставить в него следующий код:

Спойлер: Посмотреть код

<!-- Главная кнопка --> 
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal" style="width: 100%;font-size: 28px;font-weight: 800;">
  НАЖМИ НА МЕНЯ
</button>
<!-- Конец главной кнопка -->

<!-- Всплывающее окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
     
        <h4 class="modal-title" id="myModalLabel">Информация</h4>
      </div>
      <div class="modal-body">
        <center>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br></center>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Закрыть окно</button>
      </div>
    </div>
  </div>
</div>
<br>
<br>

Данный виджет настроен под мой стиль тестового магазина, т.е. под красный стиль. НО теперь напоследок давайте помогу с небольшими имеющимися настройками.

Спойлер: Главная кнопка

Изменяем главную кнопку.
Начнём с цвета.
Для того чтобы поменять оттенок кнопки нужно заметь тип класса. Вот список имеющихся классов:

class="btn btn-primary" - синий цвет
class="btn btn-secondary" - прозрачный цвет
class="btn btn-success" - зеленый цвет
class="btn btn-info" - голубой цвет
class="btn btn-warning" - оранжевый цвет
class="btn btn-danger" - красный цвет
Чтобы Вы понимали более точно как будет смотреться, вот скрин

Т.Е. Вы должны вместо слова danger в моём коде вставить нужное Вам.
Менять это в модуле между <!-- Главная кнопка --> и <!-- Конец главной кнопка -->

Также мы видим в коде кнопки style="width: 100%;font-size: 28px;font-weight: 800;"
где width: 100% отвечает за % заливки самой кнопки выбранным в классе цветом (!!!чтобы цвет убрать полностью поменяйте класс на прозрачный, так как выставить 0% не получится, маленький закрашенный квадратик будет!!!)
font-size: 28px; отвечает за размер шрифта.
font-weight: 800; отвечает за жирность шрифта, чем больше значение - тем жирнее

Изменения как бонус:
Вы можете удалить кнопку "Закрыть окно" и сделать всем привычный Х сверху справа, мне проще и удобнее с кнопкой "Закрыть окно"...
Кстати, цвет кнопки "Закрыть окно" меняется точно также, только тип класса уже нужно менять в модуле
<!-- Всплывающее окно --> ....
Что ещё.... Ах да, про Х...
Так вот:

Спойлер: Убрать кнопку "Закрыть окно"

Код виджета без кнопки "Закрыть окно" и уже с кнопкой Х для закрытия окна...

<!-- Главная кнопка -->
<button type="button" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#myModal" style="width: 100%;font-size: 28px;font-weight: 800;">
  НАЖМИ НА МЕНЯ
</button>
<!-- Конец главной кнопка -->

<!-- Всплывающее окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Информация</h4>
      </div>
      <div class="modal-body">
        <center>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br>
        Тут писать всё что Вам угодно!!!<br></center>
      </div>
    </div>
  </div>
</div>
<br>
<br>

Ну а так это смотрится:

В знак благодарности был бы рад Вашим лайкам) Да, да я еще тот лайкодрочер "D

 

[vintem87]

скрины не работают