Inter-Net.PRO

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

  • 216 50
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, а симих логотипов соцсетей нет. Что делать?
Спасибо.

  • 216 50
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 от Кирилл
Добрый день. Спасибо огромное. Да, всё появилось. Только логотипы соцсетей находятся не в центре круга, видимо это тоже связанно с настройками шаблона, т.к. и стрелочки кнопок "вверх", "вниз" тоже приподняты, но с этим можно и смириться.)
Спасибо!

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

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

  • 216 50
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;
}

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

  • 216 50
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 можно творить чудеса.:) Можно я тогда Вас ещё побеспокою в последний раз, обещаю.) Хотелось бы поднять их вот сюда (см. картинку) Я понимаю, что для этого надо создать две новые позиции в шаблоне, но не где угодно, а именно на этих местах, а как это сделать я не понимаю (языками не владею), простите пожалуйста.
Спасибо.
Вложения:

  • 216 50
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, только хотелось бы сделать это личным сообщением - сами понимаете - на всякий случай.)

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

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

  • 216 50
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 от Сергей Проформа
Спасибо помогло, назрел такой вопрос, могу ли я расположить данніе кнопки в шахматном порядке?

  • 216 50
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 кнопки?
Сейчас напишу.

  • 216 50
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; (то что в предыдущем посте) больше ничего не меняя у того класса.
Вложения:
Спасибо сказали: Сергей Проформа

Авторизация

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