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

[Dzi 0]

Добрый день.

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

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

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

 

 

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

 

Код 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>

 

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

[Атаман 426]

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

 

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

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

Edited February 21, 2018 by Атаман

[Dzi 0]

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

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

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

[newbie 1,664]

Нужно править шаблон, либо использовать 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');

[Dzi 0]

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

[newbie 1,664]

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

Разницы нет.

[Dzi 0]

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