Генератор кнопок соцсетей

А на вимео можо добавить, добрый человек?)

Да, можно. Сейчас соберу иконку и цвет для кнопки вимео и добавлю новую кнопочку.

Поклон вам, сделайте ещё кнопочку доната у себя на сайте)

Готово. Добавил Vimeo.

А чтобы размер изменить, мне нужно строчку добавить ещё одну?

Размер, это в css свойства для класса .social a. Вот такие строки:

    width: 48px;
    height: 48px;

width - это ширина, height -высота кнопки. Можно эти значения изменять.

Добрый день. Получилось установить кнопки. В полной версии сайта все хорошо работает, а когда смотришь с мобильного, то кнопки становятся ЧБ и безразмерные. Подскажите как исправить?

Не должно быть такого.

У вас или стили переопределяются (тут нужно смотреть на кнопки чтобы точно установить, может у вас на сайте уже прописаны какие то стили для тега svg, может для чего другого),

или может вы добавили стили внутри медиа запроса для широких экранов и поэтому на мобильном стили не подключаются. Медиа запрос это типа:

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
}

или может у вас в браузере стили закешировало и берёт стили из кеша где ещё нет стилей для этих кнопок. Тогда нужно просто почистить кеш браузера.

мобильной версии на сайте вообще нет, в мобильном оно все отображается так же как и в компе.

@media (min-width: 768px) {
    /* где то тут вы вставили стили */
} 

такого запроса у себя тоже не нашел...

Что я могу сделать еще или вам прислать на проверку?

Оставьте ссылку на сайт, я её потом затру.

Чтобы по быстрому решить и не гадать в чём причина, нужно в живую увидеть что к чему и из за чего.

-----была_ссылка-----

я их сейчас разместил под меню слева, но вообще до этого они были над шапкой сайта.. в самом верху...

и так и так, все равно через телефон проблема остается

Проверил - у меня всё норм, если не считать что сайт без адаптации под мобильные экраны и всё в масштабе просто уменьшилось. Но это не касается кнопок.

Наверное у вас просто закешировало файл стилей в браузере мобильного. Кеш браузера телефона почистите и всё станет норм. Просто он файл style.css не скачивает с сервера а берёт из кеша, а в кеше у него сохранился файл до того как вы в него внесли изменения, добавив эти стили кнопок. Почистите кеш в браузере смартфона.

благодарю, да, видимо все таки дело в кеше... просто в браузере инстаграма кеш никак не удалить, если только само приложение...

а можем где-то обсудить мобильную версию сайта? если вы этим занимаетесь конечно. Благодарю!

Чтобы кнопки встали по аккуратней чем сейчас, оберните кнопки в вот такой див:

<div class="social__block">
    <!-- вместо этой строки html-код ваших кнопок -->
</div>

И добавьте такой css:

.social__block {
    display: block;
    width: max-content;
    margin: 15px auto;
}

Кеши только придётся снова почистить чтобы изменения увидеть. Так кнопки встанут по центру и добавятся отступы. Будет лучше чем сейчас.

А что касается мобильной версии, оно конечно сделать можно и тематика очень интересная. Но есть но. Я сайт немного полистал чтобы ознакомится. Он на вордпрессе сделан, а я с таким даже связываться не хочу. На самих страницах сайта есть битые ссылки ведущие вникуда, отсутствующие изображения и куча других косяков по мелочи. Там если браться делать, то переделывать полностью, то есть делать сайт с нуля, с проверкой, редактированием и переносом всего существующего контента. Итого это по времени выйдет долго (точно больше месяца). Отсюда и цена получится которую даже не прилично озвучивать.

А сделать просто на скорую руку адаптив из существующего - получится соответствующий итог на скорую руку. Будет некрасиво. Поэтому извините, я наверное вам не подойду для такой работы. Вам наверное проще и дешевле будет найти кого то кто сделает вам тему на вордпресе или натянет на ваш сайт тему из каталога тем вордпреса.

я понял, благодарю!

А подскажите пожалуйста еще такой момент, сейчас соц кнопки перекинул в верхнюю часть сайта, а можно как-то подложку под них сделать определенного цвета? чтобы была просто полоса вверху на всю ширину страницы?

Да, конечно можно, хоть полоску определённого цвета, хоть изображение.

Давайте обернём наш код ещё одним дивом. Даже по более современному не дивом, а тегом section, так как семантически это у нас отдельный блок:

<section class="social__section">
    <div class="social__block">
        <!-- вместо этой строки html-код ваших кнопок -->
    </div>
</section>

И добавим вот такой css:

.social__section {
    background-color: #ffae4a;
    padding: 20px 0 100px;
}
.header {
    margin-top: -100px;
}

Так же чтобы увидеть изменения чистим кеши.

Если делать просто полоской, то получается не очень. Поэтому я сделал что полоска под шапку сайта опускается. Цвет можно поменять, у свойства background-color поставьте значение нужного вам цвета.

Вот можете цвет выбрать:

Кликните по кнопочке выше, в появившемся окошке переключите на HEX (там есть стрелочки после названия формата). Подберите цвет который нравится и укажите его значением для background-color

о, благодарю!

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

и может можно регулировать его прозрачность?

Во первых, в html вы два раза вставили <div class="social__block">. Один из них уберите и закрывающий див </div> перед </section> тоже уберите.

По стилям уберите то что я дал в предыдущем посте выше. Вместо того вставьте:

.social__section {
    background-color: #555d66;
    margin-bottom: 20px;
    padding: 5px 0;
}

Цвет поменять также для background-color задаёте значение.

Если хотите кнопки выровнять по центру, измените в style.css 482 строка:

.social__block {
    display: block;
    width: max-content;
    margin: auto;
}

Благодарю! Вроде поправил.

Единственное в мобильной версии полоска с сдвигом влево получается, не сильно критично конечно, но есть такой момент.

Удалите в файле style.css 494 строку:

.header {
    margin-top: -100px;
}

В строке 488 вместо:

.social__section {
    background-color: #e5e3e4;
    margin-bottom: 100px;
    padding: 0px 0;
}

замените на:

.social__section {
    background-color: #e5e3e4;
    width: 1100px;
}

На мобильном ширина страницы 112 %. При этом нет горизонтального скрола. А вот полоска заняла все 100%. Чтобы полоску сделать одноцветной, указал ей ширину 1100px, как ширина контентной части.

Вы сайт наверное смотрите на нотбуке или на планшете. У меня вот монитор 22 дюйма и кнопки соцсетей смотрятся совсем подругому, поэтому я предлагал их центровать.

в телефоне теперь нормально, но на компьютере есть смещение. И я так понимаю, чем больше экран, тем больше смещение будет.

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

Точно, мы же ширину задали 1100px и когда монитор больше 1100px тогда у нас блок с кнопками (эта полоска) остаётся 1100px. Упустил я это, не могу редактировать ваш css поэтому не увидел.

Поправить это просто. Добавьте в css ещё такой стиль:

@media (min-width: 1100px) {
    .social__section {
        width: 100%;
    }
}

Этот css означает что когда ширина экрана 1100px и больше, то ширина блока кнопок будет 100%. Теперь будет нормально отображаться.

Благодарю! Все получилось!

Добрый день! Не хватает кода для Facebook-messenger Плиз - Вы могли бы добавить код в генератор кнопок, или в ответном комментарии. Спасибо большое!

Сейчас посмотрю что это такое, если есть - добавлю. Вроде если не ошибаюсь они вацап когда то себе купили, а про Facebook-messenger я даже и не слышал никогда.

Добавил. Кнопка называется Messenger.

Отлично! Спасибо Вам!!!

Было бы великолепно, если в Ваш генератор добавить такую опцию - ВЫБОР : МЕССЕНДЖЕР | СОЦ СЕТЬ. Например я на своём сайте добавил два вида кнопок (два кода): месседжер - кнопки сделал прямоугольные, и все коды исправил .social на .messenger (что бы не конфликтовали коды меж собой, да и вообще работали!). А кнопки соц сетей оставил на Вашем коде, круглые. Тем самым, на сайте: если нужно написать в мессенджер - пользователи используют цветные прямоугольные кнопки удобных для них мессенджеров. А если нужно посмотреть инфо в соц сетях - пользователи используют круглые кнопки соц сетей. Куда и зачем нажимать (действия) - естественно указаны заголовками над кнопками. В итоге = два кода, для двух разных действий. Однако, если соц сети - это все имеющиеся кнопки генератора (кроме мессенджер фейсбук получается), то самих месседжеров 4 шт. в вашем генераторе должно тогда показываться для выбора. Есть ещё один новый к стати мессенджер: Яндекс! Во как! И он интересный, но ещё не раскрученный. А так - было бы классно! Полноценный генератор для: мессенджеров и для соц сетей! Спасибо!