Новое на форуме
  • Страница 1 из 1
  • 1
Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Блок с реквизитами + кнопки
Блок с реквизитами + кнопки
Offline VIP
Модератор
97

354 сообщения



Опубликовано: Воскресенье, 18.02.2018 (19:13) 1

[warning]Блок с реквизитами как у меня на IPSGuru[/warning]
[table]Идея была просто взять html таблицу и вставить номера, но система webmoney дала пинка и вот что вышло из этого :)
Что бы сделать такой блок для себя вам нужно скачать архив с изображениями и загрузить к себе в корень или куда вам угодно.
Для простоты и меньшего редактирования советую папку с изображениями закинуть в корень вашего FTP[/table]

В CSS добавляем
Код
/**** Блок с реквизитами ipsguru.ru ****/
.simple-little-table {
     font-family: Arial, Helvetica, sans-serif;
    color: #fbf9f9;
    font-size: 12px;
    /* text-shadow: 1px 1px 0px #fff; */
    /* background: #1177dc; */
    margin: 0px;
    border: #3d79e0 1px solid;
    border-collapse: separate;
    width: 400px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 2px #d1d1d1;
    -webkit-box-shadow: 0 1px 2px #d1d1d1;
    box-shadow: 0 1px 2px #d1d1d1;
      padding: 2px;
}

.simple-little-table th {
font-weight: bold;
    padding: 7px 0px 4px 0px;
    border-top: 0px solid #232626;
    border-bottom: 0px solid #e0e0e0;
    /* background: #ededed; */
    background: #1d1d1d url(http://bans.veizor.ru/themes/new_box/img/shattered.png);
    color: #fff !important;
    /* background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb)); */
    background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
.simple-little-table th:first-child{
    text-align: left;
    padding-left:15px;
}
.simple-little-table tr:first-child th:first-child{
    -moz-border-radius-topleft:3px;
    -webkit-border-top-left-radius:3px;
    border-top-left-radius:3px;
}
.simple-little-table tr:first-child th:last-child{
    -moz-border-radius-topright:3px;
    -webkit-border-top-right-radius:3px;
    border-top-right-radius:3px;
}
.simple-little-table tr{
    text-align: center;
    padding-left:20px;
}
.simple-little-table tr td:first-child{
    text-align: left;
    padding-left:0px;
    border-left: 0;
}
.simple-little-table tr td {
    padding:0px;
    border-top: 1px solid #ffffff;
    border-bottom:1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;

    background: #fafafa;
    background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
    background: -moz-linear-gradient(top,  #fbfbfb,  #fafafa);
}
.simple-little-table tr:nth-child(even) td{
    background: #f6f6f6;
    background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
    background: -moz-linear-gradient(top,  #f8f8f8,  #f6f6f6);
}
.simple-little-table tr:last-child td{
    border-bottom:0;
}
.simple-little-table tr:last-child td:first-child{
    -moz-border-radius-bottomleft:3px;
    -webkit-border-bottom-left-radius:3px;
    border-bottom-left-radius:3px;
}
.simple-little-table tr:last-child td:last-child{
    -moz-border-radius-bottomright:3px;
    -webkit-border-bottom-right-radius:3px;
    border-bottom-right-radius:3px;
}
.simple-little-table tr:hover td{
    background: #f2f2f2;
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
    background: -moz-linear-gradient(top,  #f2f2f2,  #f0f0f0);
}

.simple-little-table a:link {
    color: #fff;
    text-decoration:none;
}
.simple-little-table a:visited {
    color: #999999;

    text-decoration:none;
}
.simple-little-table a:active,
.simple-little-table a:hover {
    color: #d6d1d1;
    text-decoration:underline;
}
.ipsButton_vip {
    background: #9a9a9e8a;
    color: #ffffff;
}
.finance-card__header {
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 16em;
    height: 4em;
}
.finance-card__icon {
    border-radius: 50%;
    height: 1.8em;
    margin-right: 1em;
      margin: 4px;
}
.card--static {
    cursor: default;
    position: relative;
    top: auto;
    left: auto;
    font-size: 12px;
    z-index: 0;
    margin: 0px;
}

.card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* font-size: 6.6px; */
    /* width: 29.7em; */
    /* height: 18em; */
    /* padding: 1em; */
    border-radius: .7em;
    box-shadow: 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12), 0 3px 5px -1px rgba(0,0,0,.2);
}

.card_yanex {
background-color: rgb(0, 0, 0);
    background-image: url(/money/digital-currency.png);
    background-repeat: no-repeat;
    background-size: cover;
      height: 30px;
    line-height: 30px;
}
.card_wmr {
    background-color: rgb(0, 0, 0);
    background-image: url(/money/wmrfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wmz {
    background-color: rgb(216, 136, 49);
    background-image: url(/money/wmzfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wmu {
    background-color: rgb(51, 165, 164);
    background-image: url(/money/wmufon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wmg {
    background-color: rgb(216, 136, 49);
    background-image: url(/money/wmgfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wme {
    background-color: rgb(0, 0, 0);
    background-image: url(/money/wmefon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wmb {
    background-color: rgb(221, 98, 32);
    background-image: url(/money/wmbfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_qiwi {
    background-color: rgb(0, 0, 0);
    background-image: url(/money/qiwifon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wisabank {
    background-color: rgb(0, 0, 0);
    background-image: url(/money/bankfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.card_wmx {
    background-color: rgb(0, 0, 0);
    background-image: url(/money/wmxfon.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 30px;
    line-height: 30px;
}
.finance-card__text {
    font-size: 1em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Ipsinfo_money1 {
    padding-left: 0;
    display: inline-block;
    vertical-align: middle !important;
    width: 70px;
}
.ipsDataItem_icon_money {
    padding-left: 0;
    border-radius: 15px;
    width: 70px;
}
/**** Блок с реквизитами конец ****/


Теперь сам HTML в нужное вам место
Код
<table class="simple-little-table" cellspacing='0'>
    <tr>
  <th>Кошелёк </th>
  <th>Номер кошелька</th>
    </tr><!-- Table Header -->

    <tr>
  <td><div class="card_wmr card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMR.png" src="https://ipsguru.ru/money/WMR.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wmr card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMR.png" src="https://ipsguru.ru/money/WMR.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">R428555271173</span><!----> </div></div></td>
  </tr>
    <tr>
  <td><div class="card_wmz card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMZ.png" src="https://ipsguru.ru/money/WMZ.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wmz card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMZ.png" src="https://ipsguru.ru/money/WMZ.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">Z423028762977</span><!----> </div></div></td>
  </tr>
    <tr>
  <td><div class="card_wmg card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMG.png" src="https://ipsguru.ru/money/WMG.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wmg card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMG.png" src="https://ipsguru.ru/money/WMG.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">Z423028762977</span><!----> </div></div></td>
    
  </tr>
  <tr>
    <td><div class="card_wmu card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMU.png" src="https://ipsguru.ru/money/WMU.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wmu card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMU.png" src="https://ipsguru.ru/money/WMU.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">U946885792852</span><!----> </div></div></td>
    </tr>
    <tr>
  <td><div class="card_wme card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WME.png" src="https://ipsguru.ru/money/WME.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wme card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WME.png" src="https://ipsguru.ru/money/WME.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">E121197107416</span><!----> </div></div></td>
    </tr>
      <tr>
  <td><div class="card_wmb card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMB.png" src="https://ipsguru.ru/money/WMB.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WebMoney</span><!----> </div></div></td>
  <td><div class="card_wmb card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/WMB.png" src="https://ipsguru.ru/money/WMB.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">B243252705301</span><!----> </div></div></td>
    </tr>
  
  <tr>
  <td><div class="card_wmx card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/wmx.png" src="https://ipsguru.ru/money/wmx.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">Bitcoin Money</span><!----> </div></div></td>
  <td><div class="card_wmx card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/wmx.png" src="https://ipsguru.ru/money/wmx.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">X806633703696</span><!----> </div></div></td>
    </tr>
  <tr>
  
    <tr>
  <td><div class="card_yanex card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/yandex.money.png" src="https://ipsguru.ru/money/yandex.money.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">Yandex Money</span><!----> </div></div></td>
  <td><div class="card_yanex card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/yandex.money.png" src="https://ipsguru.ru/money/yandex.money.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">410016008998130</span><!----> </div></div></td>
    </tr>

    <tr>
  <td><div class="card_qiwi card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/qiwi.png" src="https://ipsguru.ru/money/qiwi.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">Qiwi Money</span><!----> </div></div></td>
  <td><div class="card_qiwi card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/qiwi.png" src="https://ipsguru.ru/money/qiwi.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">+79103437519</span><!----> </div></div></td>
    </tr>
  
   <tr>
  <td><div class="card_wisabank card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/wisa.png" src="https://ipsguru.ru/money/wisa.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">WISA Сбербанк</span><!----> </div></div></td>
  <td><div class="card_wisabank card card--static finance-card">
<div class="finance-card__header" ng-switch="$ctrl.entity.isWallet"> <img class="finance-card__icon" ng-src="https://ipsguru.ru/money/wisa.png" src="https://ipsguru.ru/money/wisa.png"> <!----> <!----><span class="finance-card__text" ng-switch-when="false">4276130024347232</span><!----> </div></div></td>
    </tr>
  <tr>
  <th><a href='#' class='ipsButton ipsButton_vip ipsButton_medium ipsButton_disabled'><i class="fa fa-comments" aria-hidden="true"></i> Обсудить в теме</a></th>
  <th><a href='#' class='ipsButton ipsButton_vip ipsButton_medium ipsButton_disabled'><i class="fa fa-vk" aria-hidden="true"></i> Связатся в вк</a></th>
    </tr>
  
</table>

[table]Есть один момент, возможно кнопки у вас не будут работать должным образом. Так как делал я для движков IPB/IPS 4[/table]
Изменено пользователем VIP - Воскресенье, 18.02.2018, 19:14
Прикрепления: 9715159.png(224.4 Kb) · money.zip(350.0 Kb)
Offline Timkalv
Пользователь
0

5 сообщений


Опубликовано: Среда, 07.03.2018 (02:11) 2
мило
Форум геймеров » Вебмастеру. Раздел сайтостроения » Скрипты для uCoz » Блок с реквизитами + кнопки
  • Страница 1 из 1
  • 1
Поиск: