Перейти к содержанию
IPSGuru.ru - Сообщество веб администраторов

Наши реквизиты

Severniy

Автор Severniy
в Боковые блоки

Рекомендуемые сообщения

  • Администраторы
Severniy Исследователь

Severniy

Опубликовано
  • Администраторы
Опубликовано

Наши реквизиты

Доделал блок с реквизитами, посмотреть можно у нас. Эффект при наведении.

4.png5.png

  • Заходим в Стили и Шаблоны - CSS - ipb_styles.css
  • В самый низ 
/* Блок реквизиты */
img#bg {
    /* Stretch background */
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:-3;
}
/*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.fflip-container, .front, .back {
    width: 294px;
    height: 300px;
    display:inline-block;
    margin:0px 0px;
  
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:#fff;
    transform: rotateY(-180deg);
    border-bottom:4px solid rgba(29,84,167,0.7);
    border-top:4px solid rgba(29,84,167,0.7);
}


/*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 294px;
    height: 300px;
    display:inline-block;
    margin:0px 0px;
  
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}


/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:#fff;
    transform: rotateY(-180deg);
    border-bottom:4px solid rgba(29,84,167,0.7);
    border-top:4px solid rgba(29,84,167,0.7);
}


.tops {
display:inline-block;
width:294px;
height:300px;
background:#fff;
    border-bottom:4px solid rgba(29,84,167,0.6);
    border-top:4px solid rgba(29,84,167,0.6);
  
}

.tops:hover {
opacity:1;
}

.top-host {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:284px;
position:absolute;
bottom:20px;
left:5px;
height:30px;
line-height:30px;
color:#1f1f1f;
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,0.9) 0%, rgba(237,237,237,0.9) 47%, rgba(244,244,244,0.9) 0.900%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0.9)), color-stop(47%,rgba(237,237,237,0.9)), color-stop(0.900%,rgba(244,244,244,0.9))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* Chrome0.90+,Safari5.0.9+ */
background: -o-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* Opera 0.90.9.0.90+ */
background: -ms-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* IE0.90+ */
background: linear-gradient(to bottom,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:0 5px;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
font-weight:normal;
font-style:italic;
}


.top-img {
width:294px;
height: 278px;
margin:0 auto;
}

.top-img img {
width:294px;
height: 278px
}

.top-ico {position:absolute;top:6px;left:5px;}
.top-ico img {}

.top-free-price {
margin:0 auto;
width:264px;
height:35px;
line-height:35px;
background:#70aeb4;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
color:#484848;
text-shadow: 1px 1px 1px rgba(226, 226, 226, 1);
border-top:1px solid rgba(185,210,212,0.4);
}

.top-free-buy a{
display:block;
background:#1aabb8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height:40px;
line-height:40px;
width:284px;
margin:0 auto;
margin-top:14%;
color:#fff;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
text-shadow: 1px 1px 1px rgba(48, 48, 48, 1);
}


.top-free-buy a:hover {
background:#2a8f98;
}

.top-map ,.top-player,.top-ip,.top-time{
width:294px;
padding:0 0 0 5px;
background:#adadad;
height:30px;
line-height:30px;
margin:2px 0;
border-bottom:1px solid #2C3E50;
}

.top-time a {font-size:11px;color:#2C3E50;}
.top-link a {}

.bg-top {
padding:0;
margin:0 auto;
}
/***************************************/
  • В css так же указан код от контактов.
  • Теперь через приложение Дополнительные блоки или с помощи правки
  • Вставляем и редактируем под себя 
<h3 class="ipsWidget_title ipsType_reset">Наши реквизиты</h3>

<div class=" bg-top"="">      
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <div class="tops">
<div class="top-host" style="background:url(https://zone-cs.ru/banners/0000FF.png)  repeat; color: #fff;"><script>document.write('Наведите курсор мыши на изображение');</script></div>
<div class="top-img"><img class="img_mp" src="https://zone-cs.ru/banners/11111.png" alt=""></div>
<div class="top-ico">
<img src="https://zone-cs.ru/banners/ru.gif" alt="">
<i class="fa fa-university" aria-hidden="true"></i>
<span class="label label-primary">IPSGuru.Ru</span>
</div>
</div>
        </div>
        <div class="back">
      
<div class="top-map"><input onclick="сopyToClipboard()" type="" value="R366815514973"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; WebMony WMR</span> </div>
        
<div class="top-player"><input onclick="сopyToClipboard()" type="" value="Z414161003592"><span style="color:#2c3e50;"><i class="fa fa-usd"></i>&nbsp; WebMony WMZ</span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="+79103437519"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; QIWI </span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="41001419992177"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; Yandex </span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="4276130010537110"><span style="color:#2c3e50;"><i class="fa fa-cc-visa"></i>&nbsp; VISA Сбербанк</span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="4272290789540220"><span style="color:#2c3e50;"><i class="fa fa-cc-visa"></i>&nbsp; VISA ВТБ24</span></div>                 
<div class="top-time"><b><i class="fa fa-comments-o"></i>  <a href="https://zone-cs.ru/topic/298-таблицы-пополнения-для-раскрутки/#comment-1718" title="Тема для обсуждения">Тема для обсуждения</a></b></div>
<div class="top-link">
<div class="IPSG_Contacts_block">
<div class="ipsType_center">
    <div class="ipsAreaBackground_light" style="padding:0px;">
<a href="http://ipsguru.ru/profile/1-vip/" data-ipshover="" data-ipshover-target="http://ipsguru.ru/profile/1-vip/?do=hovercard" class="ipsUserPhoto ipsUserPhoto_tiny" title="Перейти в профиль .V.I.P." id="ips_uid_7056_14">
        <img src="http://ipsguru.ru/uploads/monthly_2016_07/944199698468633163df79633735174_160x120x17170090.jpg.e9633ff4271b9c3d0d1409a186105a9c.thumb.jpg.cbcd4b0ba46f948e71f4b12b41bb69e2.jpg" alt=".V.I.P." itemprop="image">
    </a>
    <div class="IPSG_Contacts_info">
        <a href="http://ipsguru.ru/profile/1-vip/" data-ipshover="" data-ipshover-target="http://ipsguru.ru/profile/1-vip/?do=hovercard" title="Перейти в профиль .V.I.P." class="ipsType_break"><span style="color: #CF000F; font-weight: 500;">.V.I.P. <i class="fa fa-user-secret"></i></span></a> | Руководитель проекта IPSGuru.Ru
    </div>
    <a href="le=system&amp;section=notifications&amp;do=follow&amp;follow_app=core&amp;follow_area=member&amp;follow_id=1" target="_blank" data-ipstooltip="" class="IPSG_Contacts" _title="Подписаться на пользователя"><i class="fa fa-user-plus"></i></a>       <a href="http://www.privatelink.de/?https://vk.com/id231547330" target="_blank" data-ipstooltip="" class="IPSG_Contacts" _title="Вконтакте"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a href="skype:butek.383?chat" target="_blank" title="Скайп" data-ipstooltip="" class="IPSG_Contacts"><i class="fa fa-skype" aria-hidden="true"></i></a>
<a href="http://ipsguru.ru/messenger/compose/?to=1" target="_blank" title="Отправить сообщение" data-ipstooltip="" class="IPSG_Contacts"><i class="fa fa-inbox"></i></a><br><br>     
</div>      
    </div>      
    </div>         
<br>       
          </div>
</div>      
    </div>      
    </div>
  • Что бы изменить размеры в css находим и меняем
  • Ширина width: 294px;
  • Высота height: 300px;
Ссылка на комментарий
  • 1 месяц спустя...
  • Ответов 22
  • Создана
  • Последний ответ

Топ авторов темы

Популярные дни

Топ авторов темы

Популярные дни

Популярные посты

frenzo
frenzo

Все работает, видимо не так сделал что то

MarTeNo Новичёк

MarTeNo

Опубликовано
Опубликовано
5 часов назад, frenzo сказал:

Все работает, видимо не так сделал что то

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

Ссылка на комментарий
  • Администраторы
Severniy Исследователь

Severniy

Опубликовано
  • Автор
  • Администраторы
Опубликовано
1 час назад, __KEHT__ сказал:

тут же все работает 

  Показать содержимое

 

Там IPS 4 не IPB 3.4

Ссылка на комментарий
  • Администраторы
Severniy Исследователь

Severniy

Опубликовано
  • Автор
  • Администраторы
Опубликовано

@Виталий Матросов сегодня поставлю на ипб

Ссылка на комментарий
  • Администраторы
Severniy Исследователь

Severniy

Опубликовано
  • Автор
  • Администраторы
Опубликовано

В css 

/* Блок реквизиты */
img#bg {
    /* Stretch background */
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:-3;
}
/*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.fflip-container, .front, .back {
    width: 240px;
    height: 298px;
    display:inline-block;
    margin:0px 0px;
  
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}
/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:#fff;
    transform: rotateY(-180deg);
    border-bottom:4px solid rgba(29,84,167,0.7);
    border-top:4px solid rgba(29,84,167,0.7);
}


/*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }
    .flip-container:hover .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 240px;
    height: 298px;
    display:inline-block;
    margin:0px 0px;
  
}

/* flip speed goes here */
.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}


/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    background:#fff;
    transform: rotateY(-180deg);
    border-bottom:4px solid rgba(29,84,167,0.7);
    border-top:4px solid rgba(29,84,167,0.7);
}


.tops {
display:inline-block;
width:240px;
height:298px;
background:#fff;
    border-bottom:4px solid rgba(29,84,167,0.6);
    border-top:4px solid rgba(29,84,167,0.6);
  
}

.tops:hover {
opacity:1;
}

.top-host {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width:220px;
position:absolute;
bottom:0px;
left:5px;
height:30px;
line-height:30px;
color:#1f1f1f;
background: rgb(252,252,252); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(252,252,252,0.9) 0%, rgba(237,237,237,0.9) 47%, rgba(244,244,244,0.9) 0.900%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,0.9)), color-stop(47%,rgba(237,237,237,0.9)), color-stop(0.900%,rgba(244,244,244,0.9))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* Chrome0.90+,Safari5.0.9+ */
background: -o-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* Opera 0.90.9.0.90+ */
background: -ms-linear-gradient(top,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* IE0.90+ */
background: linear-gradient(to bottom,  rgba(252,252,252,0.9) 0%,rgba(237,237,237,0.9) 47%,rgba(244,244,244,0.9) 0.900%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#f4f4f4',GradientType=0 ); /* IE6-9 */

-webkit-box-shadow: 0px 0px 4px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 4px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 0px 4px 0px rgba(50, 50, 50, 0.75);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding:0 5px;
text-shadow: 1px 1px 2px rgba(255, 255, 255, 1);
font-weight:normal;
font-style:italic;
}


.top-img {
width:235px;
height: 278px;
margin:0 auto;
}

.top-img img {
width:235px;
height: 278px
}

.top-ico {position:absolute;top:6px;left:5px;}
.top-ico img {}

.top-free-price {
margin:0 auto;
width:214px;
height:35px;
line-height:35px;
background:#70aeb4;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
color:#484848;
text-shadow: 1px 1px 1px rgba(226, 226, 226, 1);
border-top:1px solid rgba(185,210,212,0.4);
}

.top-free-buy a{
display:block;
background:#1aabb8;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
height:40px;
line-height:40px;
width:230px;
margin:0 auto;
margin-top:14%;
color:#fff;
text-transform:uppercase;
font-weight:bold;
text-decoration:none;
text-shadow: 1px 1px 1px rgba(48, 48, 48, 1);
}


.top-free-buy a:hover {
background:#2a8f98;
}

.top-map ,.top-player,.top-ip,.top-time{
width:235px;
padding:0 0 0 5px;
background:#adadad;
height:30px;
line-height:30px;
margin:2px 0;
border-bottom:1px solid #2C3E50;
}

.top-time a {font-size:11px;color:#2C3E50;}
.top-link a {}

.bg-top {
padding:0;
margin:0 auto;
}
/***************************************/

В блок

  • Заходим в шаблоны boardindexTemplate
  • Находим 
<foreach loop="side_blocks:$side_blocks as $block">
							{$block}
					</foreach>
  • До или после добавляем код что ниже 
<div class='ipsSideBlock clearfix'>
	<h3>Наши реквизиты</h3>
<div class=" bg-top"="">      
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
        <div class="front">
            <div class="tops">
<div class="top-host" style="background:url(https://zone-cs.ru/banners/0000FF.png)  repeat; color: #fff;"><script>document.write('Наведите курсор мыши на изображение');</script></div>
<div class="top-img"><img class="img_mp" src="https://zone-cs.ru/banners/11111.png" alt=""></div>
<div class="top-ico">
<img src="https://zone-cs.ru/banners/ru.gif" alt="">
<i class="fa fa-university" aria-hidden="true"></i>
<span class="label label-primary">IPSGuru.Ru</span>
</div>
</div>
        </div>
        <div class="back">
      
<div class="top-map"><input onclick="сopyToClipboard()" type="" value="R366815514973"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; WebMony WMR</span> </div>
        
<div class="top-player"><input onclick="сopyToClipboard()" type="" value="Z414161003592"><span style="color:#2c3e50;"><i class="fa fa-usd"></i>&nbsp; WebMony WMZ</span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="+79103437519"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; QIWI </span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="41001419992177"><span style="color:#2c3e50;"><i class="fa fa-rub"></i>&nbsp; Yandex </span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="4276130010537110"><span style="color:#2c3e50;"><i class="fa fa-cc-visa"></i>&nbsp; VISA Сбербанк</span></div>
        
<div class="top-ip"><input onclick="сopyToClipboard()" type="" value="4272290789540220"><span style="color:#2c3e50;"><i class="fa fa-cc-visa"></i>&nbsp; VISA ВТБ24</span></div>                 
<div class="top-time"><b><i class="fa fa-comments-o"></i>  <a href="https://zone-cs.ru/topic/298-таблицы-пополнения-для-раскрутки/#comment-1718" title="Тема для обсуждения">Тема для обсуждения</a></b></div>
<div class="top-link">
<div class="IPSG_Contacts_block">
<div class="ipsType_center">
    <div class="ipsAreaBackground_light" style="padding:0px;">
<a href="http://ipsguru.ru/profile/1-vip/" data-ipshover="" data-ipshover-target="http://ipsguru.ru/profile/1-vip/?do=hovercard" class="ipsUserPhoto ipsUserPhoto_tiny" title="Перейти в профиль .V.I.P." id="ips_uid_7056_14">
        <img src="http://ipsguru.ru/uploads/monthly_2016_07/944199698468633163df79633735174_160x120x17170090.jpg.e9633ff4271b9c3d0d1409a186105a9c.thumb.jpg.cbcd4b0ba46f948e71f4b12b41bb69e2.jpg" alt=".V.I.P." itemprop="image">
    </a>
    <div class="IPSG_Contacts_info">
        <a href="http://ipsguru.ru/profile/1-vip/" data-ipshover="" data-ipshover-target="http://ipsguru.ru/profile/1-vip/?do=hovercard" title="Перейти в профиль .V.I.P." class="ipsType_break"><span style="color: #CF000F; font-weight: 500;">.V.I.P. <i class="fa fa-user-secret"></i></span></a> | Руководитель проекта IPSGuru.Ru
    </div>
    <a href="le=system&amp;section=notifications&amp;do=follow&amp;follow_app=core&amp;follow_area=member&amp;follow_id=1" target="_blank" data-ipstooltip="" class="IPSG_Contacts" _title="Подписаться на пользователя"><i class="fa fa-user-plus"></i></a>       <a href="http://www.privatelink.de/?https://vk.com/id231547330" target="_blank" data-ipstooltip="" class="IPSG_Contacts" _title="Вконтакте"><i class="fa fa-vk" aria-hidden="true"></i></a>
<a href="skype:butek.383?chat" target="_blank" title="Скайп" data-ipstooltip="" class="IPSG_Contacts"><i class="fa fa-skype" aria-hidden="true"></i></a>
<a href="http://ipsguru.ru/messenger/compose/?to=1" target="_blank" title="Отправить сообщение" data-ipstooltip="" class="IPSG_Contacts"><i class="fa fa-inbox"></i></a><br><br>     
</div>      
    </div>      
    </div>         
<br>       
          </div>
</div>      
</div>      
</div>
</div>

Естественно кнопки что тут не будут работать, так что добавляем свои

 

Ссылка на комментарий

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

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйтесь. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...