Inter-Net.PRO

Кнопки соцсетей для сайта на чистом CSS

  • 250 60
25 сен 2017 18:43 - 12 март 2018 20:01 #1 от Inter-Net PRO
Кнопки социальных сетей для сайтов.

Кнопки для соцсетей  Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

  Миллиарды людей по всей планете пользуются социальными сетями и сервисами. В следствии этого на сайтах теперь как норма идёт вставка соцсетей на свои профили, каналы и группы.

  Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

Подробнее...

11 март 2018 18:17 #2 от Кирилл
Добрый день. А можете подсказать, как всё это организовать на Joomla? Я так понимаю, что можно сделать, создав html-модуль. Но если копировать html код в модуль, а css код просто вставить в css-файл шаблона, то каждая кнопка получается на новой строчке и представляет из себя просто серый круг, который при наведении просто меняет цвет согласно коду css, а симих логотипов соцсетей нет. Что делать?
Спасибо.

  • 250 60
11 март 2018 20:44 #3 от Inter-Net PRO

Кирилл пишет: Но если копировать html код в модуль, а css код просто вставить в css-файл шаблона, то каждая кнопка получается на новой строчке и представляет из себя просто серый круг, который при наведении просто меняет цвет согласно коду css, а симих логотипов соцсетей нет. Что делать?
Спасибо.

Скорей всего у вас к сайту не подключен иконочный шрифт FontAwesome, поэтому иконок не видно.

Подключить FontAwesome в Joomla можно добавив в файл www\templates\ваш_шаблон\index.php такой код:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Этот код вставляется в секцию <head>
Вставьте его с новой строки сразу после
<jdoc:include type="head" />
А из CSS уберите эту строчку:
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

Почистите кеш браузера . Иконки должны появиться.

Что касается кнопок - возможно конфликт стилей. Ссылка на сайт помогла бы (потом могу её затереть). В стилях для кнопок проставляется float: left; он должен кнопки в строку поставить. Класс fa-2x задаёт размер иконкам.
Попробуйте сначала вывести сами иконки, подключив их как я написал выше, а потом скиньте хотя бы скриншот полученного результата.

12 март 2018 15:17 - 13 март 2018 23:33 #4 от Кирилл
Добрый день. Спасибо огромное. Да, всё появилось. Только логотипы соцсетей находятся не в центре круга, видимо это тоже связанно с настройками шаблона, т.к. и стрелочки кнопок "вверх", "вниз" тоже приподняты, но с этим можно и смириться.)
Спасибо!

  • 250 60
12 март 2018 17:51 - 12 март 2018 19:58 #5 от Inter-Net PRO
Измените в css у класса .social a {} значения у этих свойств:
width: 36px;
height: 36px;
Это выровняет иконки по центру кнопок.

А вот с построением кнопок в одну линию я пока не пойму что происходит. Что то из шаблона переопределяет стили и я с ходу не могу отловить конфликт. Сейчас немного посижу, постараюсь найти причину и решение.

  • 250 60
12 март 2018 19:04 #6 от Inter-Net PRO
Нашёл в чём проблема - грязный код HTML + особенности вашего шаблона.
Если переключить редактор в режим HTML - то там лишние теги, куча пробелов и другого ненужного барахла.

Откройте этот модуль и переключите редактор в режим HTML. Удалите то что там сейчас и вставьте вот так одной строкой:
<br><br><span class="social vk"><a href="https://vk.com/3bteatr" target="_blank"><i class="fa fa-vk fa-2x"></i></a></span><span class="social facebook"><a href="https://www.facebook.com/3bukviteatr" target="_blank"><i class="fa fa-facebook fa-2x"></i></a></span><span class="social instagram"><a href="https://www.instagram.com/3_bukvi_teatr" target="_blank"><i class="fa fa-instagram fa-2x"></i></a></span><span class="social twitter"><a href="https://twitter.com/3_bukvi_teatr" target="_blank"><i class="fa fa-twitter fa-2x"></i></a></span><span class="social odnoklassniki"><a href="https://www.ok.ru/group/53186974122180" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a></span>
У вас в шаблоне к div-ам стили прописаны, поэтому я заменил их на span-ы.

Добавьте в настройках модуля CSS-префикс с названием - socialBlock
Перед названием должен быть один пробел!!!!!!


Затем в css-файл (туда где раньше вставляли стили кнопок) добавьте новый стиль:
.socialBlock{
	width: 310px;
	min-height: 80px;
	margin-bottom: 35px;
}

В результате должно получиться вот так:
Вложения:

  • 250 60
12 март 2018 19:27 - 12 март 2018 19:34 #7 от Inter-Net PRO

Кирилл пишет: и стрелочки кнопок "вверх", "вниз" тоже приподняты, но с этим можно и смириться.)

Если хотите стрелочки по центру кнопок - можно и такое устроить.
В файл www/templates/siteground-j16-32/css/template.css в 923-строчке перед закрывающей фигурной кавычкой } добавьте такое свойство:
line-height: 50px;
Тогда ваши кнопочки будут выглядеть вот так:
Вложения:

12 март 2018 21:44 #8 от Кирилл
Очень круто! Спасибо! Зная html и css можно творить чудеса.:) Можно я тогда Вас ещё побеспокою в последний раз, обещаю.) Хотелось бы поднять их вот сюда (см. картинку) Я понимаю, что для этого надо создать две новые позиции в шаблоне, но не где угодно, а именно на этих местах, а как это сделать я не понимаю (языками не владею), простите пожалуйста.
Спасибо.
Вложения:

  • 250 60
12 март 2018 22:59 - 12 март 2018 23:01 #9 от Inter-Net PRO
Поставить их туда можно и наверное нужно уменьшить в размере и поменять базовый цвет кнопок, НО...

Тут уже так модулем не вставить. Нужно в шаблон лезть в файл index.php шаблона, чтобы увидеть как вёрстка шапки реализована и куда вставить кнопки. Можно туда позиции для модулей прописать, но лучше прям в вёрстке всё это дело вставить чтобы не было кучи ненужных обвёрток от модулей. К тому же я заметил что в модулях стили с фоновой картинкой для заголовка модуля идут.
В идеале, чтобы реализовать ваше желание, нужен FTP-доступ к сайту.
Если сможете, откройте у себя этот файл и скопируйте из него часть кода начиная с места:
<div id="mainwrap">
до строки:
<div id="wrapper">
Посмотрим, может можно будет подсказать без доступа.

И я не пойму почему у вас кнопки соцсетей вставились обёрнутыми в тег <pre></pre>
Это хтмл-овский тег для вставки неформатированого кода. Его не должно быть.

12 март 2018 23:40 #10 от Кирилл
"файл" как бы не ссылка, поэтому я не понял какой файл. Я могу Вам написать логин и пароль к админке Joola, только хотелось бы сделать это личным сообщением - сами понимаете - на всякий случай.)

  • 250 60
13 март 2018 10:31 - 13 март 2018 13:42 #11 от Inter-Net PRO
Я вам написал со своей почты на почту с которой Вы зарегистрировались на этом сайте. Админка это конечно не фтп, но всё равно намного проще и быстрее чем угадывать и давать инструкции куда посмотреть и что сделать.

02 авг 2018 17:48 #12 от Сергей Проформа
Всем привет, подскажите где ошибся, мой сайт  . Там слева в меню, под нашими партнёрами, фон повставлялся, по кнопкам переходит, а знаков соц сетей не видно. помогите плз

  • 250 60
02 авг 2018 21:58 #13 от Inter-Net PRO

Сергей Проформа пишет: подскажите где ошибся

У вас не подключен иконочный шрифт Font Awesome. Именно в нём находятся сами иконки.
Можно в секции <head></head> где подключаются стили css подключить шрифт из CDN добавив такой код:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
Спасибо сказали: Сергей Проформа

03 авг 2018 12:52 #14 от Сергей Проформа
Спасибо помогло, назрел такой вопрос, могу ли я расположить данніе кнопки в шахматном порядке?

  • 250 60
03 авг 2018 14:17 - 03 авг 2018 14:18 #15 от Inter-Net PRO

Сергей Проформа пишет: Спасибо помогло, назрел такой вопрос, могу ли я расположить данные кнопки в шахматном порядке?

Посмотрел как у вас получилось с иконками - по моему сама иконка в кнопках ушла вверх по центру - получилось не центровано.
Как вариант можно или кнопки уменьшить, или иконку увеличить.
Мне больше нравиться если иконку увеличить.
В файле css/menu1.css добавьте к классу в 27 строке такое свойство:
font-size: 17px;
Можно после color: #000; по моему так лучше.

или можно высоту и ширину кнопок поставить по 24px (то что выше я написал - не добавлять), а вот эти свойства подправить:
width: 24px;
height: 24px;
Тогда кнопки станут меньше и поместятся в один ряд.


Шахматный порядок - я правильно понял, чтобы сверху 3, а снизу 2 кнопки?
Сейчас напишу.

  • 250 60
03 авг 2018 15:01 - 03 авг 2018 15:04 #16 от Inter-Net PRO

Сергей Проформа пишет: в шахматном порядке

Смотрите, у меня два варианта получилось - оба они похожи и отличаются только значением в одном свойстве CSS.
Я по разному пробовал стилями повлиять, но пришёл к такому решению:
я разбил на два блока 2 и 3 кнопки. Обернул их дивами с классом social-block.

Получается вот такой HTML
<h3>Подписывайтесь на наши группы в социальных сетях</h3>
<div class="social-block">
    <div class="social google-pluse">
        <a href="https://plus.google.com/109280914044868576598" target="_blank">
            <i class="fa fa-google-plus fa-2x"></i>
        </a>
    </div>

    <div class="social facebook">
        <a href="https://fb.com/groups/pr0forma/" target="_blank">
            <i class="fa fa-facebook fa-2x"></i>
        </a>
    </div>

    <div class="social youtube">
        <a href="https://youtube.com/channel/UCPn4ClDdkqTtXVp4TeEbtvQ" target="_blank">
            <i class="fa fa-youtube fa-2x"></i>
        </a>
    </div>
</div>

<div class="social-block">
    <div class="social vk">
        <a href="https://vk.com/kharkiv_proforma" target="_blank">
            <i class="fa fa-vk fa-2x"></i>
        </a>
    </div>

    <div class="social odnoklassniki">
        <a href="https://ok.ru/group/59115914133564" target="_blank">
            <i class="fa fa-odnoklassniki fa-2x"></i>
        </a>
    </div>
</div>

И теперь нужно добавить стили CSS для social-block.
Вот такой вариант CSS:
.social-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

И вот такой вариант: CSS:
.social-block {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

Правда на скринах я добавил font-size: 15px; (то что в предыдущем посте) больше ничего не меняя у того класса.
Вложения:
Спасибо сказали: Сергей Проформа

08 окт 2018 16:33 #18 от Сергей
Здравствуйте, прошу помощи. Не могу понять как сделать, что бы иконки были по середине страницы?

  • 250 60
08 окт 2018 21:22 - 08 окт 2018 21:23 #19 от Inter-Net PRO

Сергей пишет: прошу помощи. Не могу понять как сделать, что бы иконки были по середине страницы?

Это делается через стили CSS. Общего рецепта нет, так как могут быть зависимости.
Дайте ссылку на сайт (если нужно я ссылку потом удалю) и понятно опишите в каком месте должно быть по центру. Я посмотрю и подскажу вам решение.

09 окт 2018 08:30 #20 от Сергей
Буду очень благодарен за помощь!
Сайт  vagnn.ru/
Сейчас иконки справа, нужно что бы были по середине подвала.

Авторизация

Войти через соцсети: