Jump to content
Дизайн и модификация IPS Community IPBSkinsBETA
Search In
  • More options...
Find results that contain...
Find results in...
Sign in to follow this  
Dzi

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

Recommended Posts

Добрый день.

в блоке 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

Share this post


Link to post
Share on other sites

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

 

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

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

Edited by Атаман

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Разницы нет.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...