Виджет для магазина

Хостинг игровых серверов
Ketuoki

Ketuoki

Новичек
16 Апр 2018
13
5
34
https://vk.com/immelman_ke
Привет,подрезал тут виджет,показался мне интересным,переделал его(с 0 написал в итоге:D)
Может кому будет он интересен.Т.к у многих замечал товар"пополнение без комиссии"

Кому надо думаю смогут под себя пильнуть:)
P.S не силен в html -css писал интуитивно черпая инфу с рунета.Камнями не кидайте.Просто подумал что фича интересная,и кому-то может быть полезна)
код:
Код: 
<div class="text-center panel panel-body panel-default" style="padding: 0 !important; background-color: #0000 !important;">
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#donateModal" style="color: wheat !important;width: 100%;">
<b id="“blinked”">TEXT</b>
</button>
<!-- Modal -->
<div id="donateModal" class="modal fade" style="display: none" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">TEXT</h4>
</div>
<div class="modal-body text-center">
<div style="color: darkred;" <h4=""><b><p style="
margin-bottom: 27px;
">TEXT</p></b></div>
TEXT<br>
TEXT<br>
<div class="text-left col-xs-offset-1">
<ul style="
margin-top: 30px;
margin-left: -75px;
">
<li>TEXT<b>TEXT</b></li>
<li>TEXT</li>
<li>TEXT</li>
<li>TEXT</li>
<button type="button" class="btn btn-default" style="
margin-top: 34px;
margin-left: 216px;
margin-bottom: -43px;
"><a href="https://vk.com/immelman_ke" target="_blank">Администратор</a></button>
<!-- тема primary -->

</ul>

<div class="modal-footer" style="text-align: center !important;background: #0000;border-bottom: 0;">
<h3><button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button></h3>
</div>
</div>

</div>
</div>
</div>
 
Последнее редактирование модератором:
Басотник

Басотник

Команда форума
Продавец
Меценат
Местный
Обитатель
Прохожий
21 Окт 2017
1,619
329
Как эта тема относиться к виджетам?
 
Басотник

Басотник

Команда форума
Продавец
Меценат
Местный
Обитатель
Прохожий
21 Окт 2017
1,619
329
в разделе веб добавляют файлы и данные. ты ничего не добавил
 
Ketuoki

Ketuoki

Новичек
16 Апр 2018
13
5
34
https://vk.com/immelman_ke
Немного доработал виджет,добавил пару изображений,подправил визуально его малость в общем.
Код понятен и дураку,с настройкой цвета под себя проблем быть не должно.Кто совсем дурак,пишите,настрою под вас-ваш дизайныч.Один фиг практика нужна)
Завтра сделаю замену текстовых элементов на изображения(для тех кто умеет играть в фш но не понимает ничего в том что ниже.Так думаю будет проще отредачить под себя
Код:

HTML: 
<div class="text-center panel panel-body panel-default" style="padding: 0 !important; background-color: #0000 !important;">
<!-- Кнопка -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#donateModal" style="color: wheat !important; width: 100%;">
<span style="color: powderblue; font-size: 1.2em;"><b>Текст на кнопке</b></span>
</button>
<!-- Модальное окно -->
<div id="donateModal" class="modal fade" style="display: none" role="dialog">
<div class="modal-dialog container-fluid">

<!-- Содержимое окна -->
<div class="modal-content">
<div class="row">
<div class="col-xs-12">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" style="color: red"><b>Х</b></button>
<h4 class="modal-title">Шапка <img src="https://gamestores.pictures/images/2018/05/04/4XEQh.png"></h4>
</div>
<div class="modal-body text-center">
<p style="margin-bottom: 8px;color: red; font-size: 1.6em;"><b>Текст по центру ниже шапки</b></p>
</div>
<p>
Текст<br/>
                                                        Текст</p>
<div class="text-left col-xs-11" style="margin-top: 12px; margin-left: 22px;">
<ul>
<li>Текст - <b style="color: red; font-size: 1.1em">Текст</b></li>
<li>Текст</li>
<li>Текст</li>
<li>Текст</li>
<li>Текст <b>+Текст</b></li>
</ul>
<div>
                 <img src="https://gamestores.pictures/images/2018/05/04/4XEQh.png">
<div style="text-align: center; margin: 26px 0 0 0;">
<button type="button" class="btn btn-default" style="padding-left: 20px; padding-right: 20px;">
<a href="сслыка на которую перекидывает кнопка." target="_blank">Текст кнопки которая снизу</a>
</button>
</div>
</div>
</div>
</div>
<div class="row" style="margin-top: 18px; padding: 0 16px 16px 16px;">
</div>
</div>
</div>
</div>
</div>
</div>
4XHwN.jpg
 
  • Like
Реакции: Басотник
Ketuoki

Ketuoki

Новичек
16 Апр 2018
13
5
34
https://vk.com/immelman_ke
Как и обещал,кидаю вариант где все заменено на изображения.
4gt3m.png

Код:

Код: 
<div class="text-center panel panel-body panel-default" style="padding: 0 !important; background-color: #0000 !important;">
  <!-- Кнопка -->
  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#we" style="color: wheat !important; width: 100%;">
    <span style="color: powderblue; font-size: 1.2em;"><img src="https://gamestores.pictures/images/2018/05/04/4XEQh.png"></span><!--218*68-->
  </button>
  <!-- Модальное окно -->
  <div id="we" class="modal fade" style="display: none" role="dialog">
    <div class="modal-dialog container-fluid">

      <!-- Содержимое окна -->
      <div class="modal-content">
        <div class="row">
          <div class="col-xs-12">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" style="color: red"><b>Х</b></button>
              <h4 class="modal-title"><img src="https://gamestores.pictures/images/2018/05/04/4gsh8.png"></h4><!--538*50-->
            </div>
            <div class="modal-body text-center">
              <p style="margin-bottom: 8px;color: red; font-size: 1.6em;"><img src="https://gamestores.pictures/images/2018/05/04/4gBvR.png"></p><!--528*50-->
            </div>
            <p>
              <img src="https://gamestores.pictures/images/2018/05/04/4gJbE.png"><!--143*38-->
            </p>
            <div class="text-left col-xs-11" style="margin-top: 12px; margin-left: 22px;">
            
            
              <div style="text-align: center; margin: 26px 0 0 0;">
                <button type="button" class="btn btn-default" style="padding-left: 20px; padding-right: 20px;">
                  <a href="https://vk.com/immelman_ke" target="_blank"><img src="https://gamestores.pictures/images/2018/05/04/4ghVj.png"></a>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="row" style="margin-top: 18px; padding: 0 16px 16px 16px;">
        
          </div>
        </div>
      </div>
    </div>
  </div>
У каждого изображения указан комментарий с размером.Думал сделать всего 2 изображения,но решил что 3 будет лучше почему-то)
Кнопка теперь тоже имеет изображение.
Сейчас хочу сделать виджет со вкладками,по такому же типу,где можно переходить по вкладкам с текстом например о последних обновлениях на сервере.Надеюсь кому-то это полезно тоже будет)
.
P.S делаю это только для практики,так что если вдруг найдется верстальщик который начнет кидать камнями то земля тебе металлом)
 
  • Like
Реакции: Басотник
Ketuoki

Ketuoki

Новичек
16 Апр 2018
13
5
34
https://vk.com/immelman_ke
Сделал дропменю,в него можно вложить некую информацию.Сделал по дефолту 4 вкладки.Думаю не мало не много.По размерам не подгонял т.к под каждый дизайн свой размер.Кто умеет сам подгонит размеры,кто не умеет пусть в вк мне пишет.В течении недели эту менюшку по функционалу расширю,пока что знаний не хватает к сожалению).Следите за темой кому интересно.Буду сюда закидывать разные фичи для сайта.В дальнейшем css стили и т.п.
4PxDD.png

HTML: 
<div class="btn-group dropleft"
     data-target="#gl">
    <a href="#"
       class="btn dropdown-toggle btn-large btn-danger"
       data-toggle="dropdown"
    style="padding-left: 83px;">Информация о сервере
        <span class="caret"></span></a>

    <ul class="dropdown-menu"
        style="padding: 22px;">
        <li style="list-style-type: none;">
            <button class="btn btn-danger"
                    data-toggle="modal"
                    data-target="#novosti"
                    style="margin-left: -23px:width: 100%;">Новости и обновления</button>
        </li>
        <li style="list-style-type: none;">
            <button class="btn btn-danger"
                    data-toggle="modal"
                    data-target="#donat"
                    style="width: 100%;">Донат без комиссии</button>
        </li>
        <li style="list-style-type: none;">
            <button class="btn btn-danger"
                    data-toggle="modal"
                    data-target="#info"
                    style="width: 100%;"> Что то еще.</button>
        </li>
        <li style="list-style-type: none">
        <button class="btn btn-danger"
        data-toggle="modal"
        data-target="#komandi"
                style="width: 100%;">Команды на сервере</button>
        </li>
    </ul>
    <div id="komandi"
         class="modal fade"
         tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close"
                            data-dismiss="modal"><img src="https://gamestores.pictures/images/2018/05/06/4Pmx7.png"></button>
                    <h4 class="modal-title text-center"
                        style="color: #990e0e; font-size: 1.2em;"><b>Команды на сервере</b></h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>/kit-открыть окно для просмотра доступных наборов</li>
                        <li>И т.д</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <p></p>
                        <div class="modal-footer" style="
    margin-left: -60px;
    margin-right: -19px;
">
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="novosti"
         class="modal fade"
         tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close"
                            data-dismiss="modal"><img src="https://gamestores.pictures/images/2018/05/06/4Pmx7.png"></button>
                    <h4 class="modal-title text-center"
                        style="color: #990e0e; font-size: 1.2em;"><b>Последние обновления</b></h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>Добавленно какое-то дерьмо которое делает что то я хз что</li>
                        <li>То что мы добавили не работает,но фиксить впадлу.</li>
                        <li>Скиньте денег на сиги</li>
                        <li>Тут должен быть текст</li>
                        <li>Но можно его убрать</li>
                        <li>И вставить картинку</li>
                        <p></p>
                        <div class="modal-footer" style="
    margin-left: -60px;
    margin-right: -19px;
">
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="donat"
         class="modal fade"
         tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close"
                            data-dismiss="modal"><img src="https://gamestores.pictures/images/2018/05/06/4Pmx7.png"></button>
                    <h4 class="modal-title text-center"
                        style="color: #990e0e; font-size: 1.2em;"><b>Донат</b></h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <p></p>

                        <div class="modal-footer" style="
    margin-left: -60px;
    margin-right: -19px;
">
                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="info"
         class="modal fade"
         tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close"
                            data-dismiss="modal"><img src="https://gamestores.pictures/images/2018/05/06/4Pmx7.png"></button>
                    <h4 class="modal-title text-center"
                        style="color: #990e0e; font-size: 1.2em;"><b>Инфо</b></h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>Text</li>

                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <li>Text</li>
                        <p></p>
                        <div class="modal-footer" style="
    margin-left: -60px;
    margin-right: -19px;
">

                        </div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
 
  • Like
Реакции: AXESOUL, SkiTles55 и Басотник
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу