Jump to content

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


Dzi
 Share

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

Link to comment
Share on other sites

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

 

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

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

Edited by Атаман
Link to comment
Share on other sites

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

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

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

Link to comment
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
Link to comment
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...