Социальные иконки - боковая панель - 3.4.x

Опубліковано 13 жовтня, 20159 р

Адміністратор

Перейти Админ Панель-Внешний вид-Ваш стиль-Список форумов-boardIndexTemplate и найти:

<foreach loop="side_blocks:$side_blocks as $block">
				{$block}
			</foreach>

Ниже добавить:

<div class='ipsSideBlock'>
<h3>Социальные связи</h3>
<div class='_sbcollapsable'>
<div class="cartera">
  <div class="tarjeta tvkontakte">
    <a class="fa-facebook" href="https://vk.com/">VKontakte</a>
  </div>
  <div class="tarjeta tgoogle">
    <a class="fa-google-plus" href="https://plus.google.com/">Google+</a>
  </div>
   <div class="tarjeta ttwitter">
    <a class="fa-twitter" href="https://twitter.com/">Twitter</a>
  </div>
  <div class="tarjeta tlinkedin">
    <a class="fa-linkedin" href="https://www.linkedin.com/">Linkedin</a>
  </div>
  <div class="tarjeta tpinterest">
    <a class="fa-pinterest" href="https://www.pinterest.com/">Pinterest</a>
  </div>
  <div class="tarjeta tinstagram">
    <a class="fa-instagram" href="http://instagram.com/">Instagram</a>
  </div>
</div>
</div></div>

3. Сохранить.

4. Перейти Админ Панель-Внешний вид-Ваш стиль-css и нажмите кнопку Добавить CSS-файла.

5. Назовите его cartera

6. Поместите следующий код в нем:

.cartera, .tarjeta, .tarjeta a {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.cartera {
  position: relative;
  width: 100%;
  margin: 30px auto 0;
  text-align: center;
  line-height: 56px;
  font-size: 14px;
  font-family: sans-serif;
}
.tarjeta {
  position: relative;
  width: 100%;
  height: 30px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
  border-bottom: 3px groove #eee;
}
/* Estado normal */
.tarjeta a {
  position: relative;
  display: block;
  top: -6px;
  left: 50%;
  width: 96%;
  ;
  padding: 0 0 0 16px;
  line-height: 32px;
  font-weight: normal;
  border-radius: 16px 16px 0 0;
  text-decoration: none;
  box-shadow: 0 -2px 2px rgba(0,0,0,.1), 0 0 20px rgba(0,0,0,.2) inset;  
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  transition: all .2s linear;
}

.tarjeta a:hover {
  line-height: 52px;
  top: -26px;
  text-decoration: none;
}

.tarjeta a:before { 
  display: inline-block; *display: inline; zoom: 1;
  width: 20px;
  margin-right: 10px;
  text-align: center;
  font-family: Fontawesome;
  font-size: 18px;
}

.tarjeta a:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 102%;
  ;
  height: 2px;
  display: block;
  border-radius: 80px 80px 0 0 ;
  box-shadow: 0 -2px 6px #666;
  z-index: -1;
}

.tarjeta.ttwitter a {
  color: #ddd;
  background-color: #01AFEC;
  border-top: 2px solid #43CFFE;
}

.tarjeta.tgoogle a {
  color: #333;
  background-color: #DB4A37;
  border-top: 2px solid #E88C80;
}

.tarjeta.tvkontakte a {
  color: #ccc;
  background: #3B559F;
  border-top: 2px solid #6B83C9;
}

.tarjeta.tlinkedin a {
  color: #333;
  background: #007BB6;
  border-top: 2px solid #83A9CB;
}

.tarjeta.tpinterest a {
  color: #ccc;
  background: #CB2027;
  border-top: 2px solid #E88C80;
}

.tarjeta.tinstagram a {
  color: #ccc;
  background: #42719D;
  border-top: 2px solid #83A9CB;
}

Увійти

Социальные иконки - боковая панель

Рекомендовані відповіді

Для публікації повідомлень створіть обліковий запис або авторизуйтесь

Акаунт

Навігація

Пошук