Красивое оформление кнопок. - Дизайн и модификация Invision Power Board

Перейти к содержимому

 

СвернутьПрикрепленные теги

Теги не найдены

Страница 1 из 1

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

#1 Пользователь не на сайте   Dzi ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 18
  • Регистрация: 21-Февраль 18
  • Репутация: 0
  • IPB version:4.1.x
 

Отправлено 21 Февраль 2018 - 09:52

Добрый день.
в блоке PostContainer у меня есть социальные кнопки.
Хочется чтобы они были по центру красивенько.
Только вот если не указывать их все, получается вот такое:
Вложение  PostContainer6.png (5,57К)
Количество загрузок: 12Вложение  PostContainer7.png (4,9К)
Количество загрузок: 11


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

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


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

Вложений


0

#2 Пользователь не на сайте   Атаман ответил: »

 
 
  • Advanced
  • Смотреть блог
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 2 565
  • Регистрация: 13-Апрель 12
  • Репутация: 401
  • Откуда:no
  • IPB version:1.x
 

Отправлено 21 Февраль 2018 - 09:58

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

вк - в левом углу
скайп - правее от вк

Сообщение изменено: Атаман (21 Февраль 2018 - 10:01)

0

#3 Пользователь не на сайте   Dzi ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 18
  • Регистрация: 21-Февраль 18
  • Репутация: 0
  • IPB version:4.1.x
 

Отправлено 21 Февраль 2018 - 10:31

А можете помочь оптимизировать CSS чтобы каждая кнопка была рядом друг с другом?
Буду крайне признателен за эту помощь..
Я просто не особо сильно шарю в CSS.
0

#4 Пользователь не на сайте   newbie ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 3 514
  • Регистрация: 26-Октябрь 11
  • Репутация: 1 379
  • IPB version:I have no IPB
 

Отправлено 21 Февраль 2018 - 12:51

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

1

#5 Пользователь не на сайте   Dzi ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 18
  • Регистрация: 21-Февраль 18
  • Репутация: 0
  • IPB version:4.1.x
 

Отправлено 21 Февраль 2018 - 13:34

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

#6 Пользователь не на сайте   newbie ответил: »

 
 
  • Advanced
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: IPB Skins.ru Team
  • Сообщений: 3 514
  • Регистрация: 26-Октябрь 11
  • Репутация: 1 379
  • IPB version:I have no IPB
 

Отправлено 21 Февраль 2018 - 13:44

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

#7 Пользователь не на сайте   Dzi ответил: »

 
 
  • Member
  • **
  • Insert nick to fast reply form
  • Quote selected text to fast reply form
  • Группа: Пользователи
  • Сообщений: 18
  • Регистрация: 21-Февраль 18
  • Репутация: 0
  • IPB version:4.1.x
 

Отправлено 21 Февраль 2018 - 19:22

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

Сообщить об этой теме:


Страница 1 из 1


Быстрый ответ

  

1 пользователей читают эту тему
0 зарегистрированных, 1 гостей, 0 скрытых


Контактная информация

Вопросы по работе сайта

+7 (917) 501-4765
C 10 до 20 в рабочие дни (время московское)

Техническая поддержка

Контактные данные специалистов

Дизайн форумов

IPB 3.x ¦ IPB 2.x

Бесплатные шаблоны

IPB 3.2 – 3.4 ¦ IPB 3.1 ¦ IPB 3.0 ¦ IPB 2.2 – 2.3 ¦ IPB 2.1 ¦ Клипарт
Лицензия на использование ¦ Ваша поддержка ¦ О проекте
Copyright © 2005-2018 IPBSkins.ru Team
При копировании материалов с сайта
прямая ссылка на источник обязательна