Перейти к публикации
Дизайн и модификация IPS Community IPBSkinsBETA
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...
Dzi

Красивое оформление кнопок.

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

Добрый день.

в блоке PostContainer у меня есть социальные кнопки.

Хочется чтобы они были по центру красивенько.

Только вот если не указывать их все, получается вот такое:

post-60308-0-32945100-1519195643_thumb.pngpost-60308-0-84084900-1519195648_thumb.png

 

 

А хочется чтобы независимо от количество указанных сайтов - кнопочки были по центру..

 

Код CSS кнопок:

.steam {
 margin-right: 5px;
   margin-left: 35px;
   margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;
}
.steam:hover {
   cursor: pointer;
   color: #FCFCFC
}
.vkontakte {
 margin-right: 5px;
   margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;
}
.vkontakte:hover {
   cursor: pointer;
   color: #FCFCFC
}
.skype {
 margin-right: 5px;
 margin-left: 47px;
   margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;
}
.skype:hover {
   cursor: pointer;
   color: #FCFCFC
}
.telegram {
 margin-right: 5px;
   margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;
}
.telegram:hover {
   cursor: pointer;
   color: #FCFCFC
}
.shikimori {
 margin-right: 5px;
   margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;
}
.shikimori:hover {
   cursor: pointer;
   color: #FCFCFC
}

 

Код в Дополнительных полях:

<div class="skype">
     <a href="skype:{content}?userinfo" title="{title}">
        <i class="fab fa-skype"></i>
     </a>
  </div>

 

Заранее спасибо.

post-60308-0-31875200-1519195636_thumb.png

Поделиться сообщением


Ссылка на сообщение
02/21/18 06:59 (изменено)

У Вас у каждой кнопки задано свое расположение и нужно править css для каждой кнопки.

 

вк - в левом углу

скайп - правее от вк

Изменено пользователем Атаман

Поделиться сообщением


Ссылка на сообщение

А можете помочь оптимизировать CSS чтобы каждая кнопка была рядом друг с другом?

Буду крайне признателен за эту помощь..

Я просто не особо сильно шарю в CSS.

Поделиться сообщением


Ссылка на сообщение

Нужно править шаблон, либо использовать js.

 

Плюс не нужно дублировать код. У Вас

    margin-bottom: 5px;
   margin-top: 9px;
   display: inline-block;
   font-size: 14px;
   color: #bcbcbc;
   width: 25px;
   height: 25px;
   line-height: 25px;
   background: white;
   background-color: #18191D;
   transition: all 0.7s ease-in-out;
   transform: rotate(0deg);
   border-radius: 5px;
   float: left;
   border-radius: 6px;
   box-shadow: 0px 0px 4px 0px #121317;

и

    cursor: pointer;
   color: #FCFCFC

идентичны для всех кнопок.

 

- Добавьте к каждой кнопке новый css класс cUserInfo_social

- Замените Ваш весь css-код на

.cUserInfo_social {
margin-bottom: 5px;
margin-top: 9px;
display: inline-block;
font-size: 14px;
color: #bcbcbc;
width: 25px;
height: 25px;
line-height: 25px;
background: white;
background-color: #18191D;
transition: all 0.7s ease-in-out;
transform: rotate(0deg);
border-radius: 5px;
float: left;
border-radius: 6px;
box-shadow: 0px 0px 4px 0px #121317;
}

.cUserInfo_social:hover {
cursor: pointer;
color: #FCFCFC;
}

- Добавьте js

$('.cUserInfo_social').parent('li').css('display', 'inline-block');

  • Upvote 1

Поделиться сообщением


Ссылка на сообщение

Куда JS код добавлять?

Поделиться сообщением


Ссылка на сообщение

Хоть в шаблоны, хоть в поле настройки "Custom tracking code".

Разницы нет.

Поделиться сообщением


Ссылка на сообщение

Спасибо, тему можно закрыть.

Поделиться сообщением


Ссылка на сообщение

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

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

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×
×
  • Создать...