Сообщений в теме: 12

[kocht]

Всем привет!

 

Очень приглянулись кнопки для расшаривания в социальные сети goodshares.js

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

 

Вот так это выглядит у меня после обычной установки:

 

 

Хочу сделать так:

 

 

Для этого нужно прописать куда-то какие-то стили CSS)

 

Хотелось бы узнать код стилей и куда все это вставлять)

 

Благодарю откликнувшихся

 

 

[jura6]

Попробуйте пожалуйста в ставить сперва картинку с сосети, потом выделить ее и спомощью значка в виде звена, добавить ссылку.

[кобряныч]

Кидай код что ли,- будем разбираться.

Как бы если подключил их библиотеку js там вроде бы ссылка есть подключение вместе с JQuery, то стили прописывать не нужно. 

[kocht]

Кидай код что ли,- будем разбираться.

Как бы если подключил их библиотеку js там вроде бы ссылка есть подключение вместе с JQuery, то стили прописывать не нужно. 

Вообщем с их сайта был установлен этот код в подвал сайта - 

<!-- Latest 3.2.x goodshare.js minify version from jsDelivr CDN -->
<script src="https://cdn.jsdelivr...oodshare.min.js"></script>    

и установлен этот код на страницу сайта -

<p>Поделитесь с друзьями в социальных сетях:</p>

      <!-- Блок с share-кнопками -->

 

      <a href="#" class="goodshare" data-type="vk">Vkontakte <span data-counter="vk"></span></a>

      <a href="#" class="goodshare" data-type="fb">Facebook <span data-counter="fb"></span></a> 

      <a href="#" class="goodshare" data-type="gp">Google Plus <span data-counter="gp"></span></a>

      <a href="#" class="goodshare" data-type="tw">Twitter <span data-counter="tw"></span></a>

      <a href="#" class="goodshare" data-type="po">Pocket <span data-counter="ok"></span></a> 

      <a href="#" class="goodshare" data-type="en">Evernote <span data-counter="mr"></span></a> 

      <a href="#" class="goodshare" data-type="tg">Telegram <span data-counter="mr"></span></a>

и получились кнопки такого вида :

Я так понимаю, Вы про второй код -

<!-- jQuery 1.11.3 minify version and latest 3.2.x goodshare.js minify version from jsDelivr CDN -->
<script src="https://[email protected]"></script>

 

   

Сейчас попробую установить этот вариант

К сожалению, изменений нет

Сообщение отредактировал kocht: 01 Ноябрь 2016 - 17:45

[Hedrek]

Так ты вставь ссылку на .css файл )

[kocht]

Так ты вставь ссылку на .css файл )

Где же его взять то?

[Hedrek]

Где же его взять то?

Дай ссылку где все это.

[кобряныч]

Вот стили кинь их в CSS файл 

<style>
html, body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: center;}
a {color: #ffffff; display: inline-block; text-decoration: none; 

width: 150px; padding: 10px; margin: 2px auto; cursor: pointer;}
a[data-type="vk"] {background: #45668e;}
a[data-type="fb"] {background: #3b5998;}
a[data-type="ok"] {background: #ed812b;}
a[data-type="mr"] {background: #168de2;}
a[data-type="gp"] {background: #dd4b39;}
a[data-type="li"] {background: #0976b4;}
a[data-type="tw"] {background: #55acee;}
a[data-type="lj"] {background: #004359;}
a[data-type="tm"] {background: #35465c;}
a[data-type="bl"] {background: #f57d00;}
a[data-type="pt"] {background: #cc2127;}
a[data-type="di"] {background: #000000;}
a[data-type="en"] {background: #7ac142;}
a[data-type="rd"] {background: #5f99cf;}
a[data-type="de"] {background: #3399ff;}
a[data-type="su"] {background: #eb4924;}
a[data-type="po"] {background: #d3505a;}
a[data-type="sb"] {background: #26B1F6;}
a[data-type="lr"] {background: #000000;}
a[data-type="bf"] {background: #323b43;}
a[data-type="ip"] {background: #428bca;}
a[data-type="ra"] {background: #990000;}
a[data-type="xi"] {background: #cfdc00;}
a[data-type="wp"] {background: #0087be;}
a[data-type="tg"] {background: #0088cc;}
a[data-type="vi"] {background: #8f5db7;}
a[data-type="wa"] {background: #43d854;}
a[data-type="ln"] {background: #00c300;}
a[data-type="bd"] {background: #2529d8;}
a[data-type="rr"] {background: #53a9d7;}
a[data-type="wb"] {background: #c53220;}
</style>

////////////////////////Если получилось отпишись нам

Сообщение отредактировал кобряныч: 01 Ноябрь 2016 - 23:12

[кобряныч]

Вообщем там толком кода не где и нет
вот можешь еще это добавить в CSS файл и ссылка в VK будет белой при нажатии

a[data-type="vk"]:active {background: #ffffff; border: 1px solid #45668e; color: #45668e;}

*

*

такие простые стили лучше самому прописать, я так понял ты хочешь взять возможность делится из goodshare, а кнопки тебе нужны из другова места, ты скажи где ты кнопку увидал(ссылку) я тебе руками напишу код. для CSS

 

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

http://share.pluso.ru/

Как по мне, там с кодом гораздо проще.

Сообщение отредактировал кобряныч: 01 Ноябрь 2016 - 23:39

[Hedrek]

Вот стили кинь их в CSS файл 

<style>
html, body {font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 24px; text-align: center;}
a {color: #ffffff; display: inline-block; text-decoration: none; 

width: 150px; padding: 10px; margin: 2px auto; cursor: pointer;}
a[data-type="vk"] {background: #45668e;}
a[data-type="fb"] {background: #3b5998;}
a[data-type="ok"] {background: #ed812b;}
a[data-type="mr"] {background: #168de2;}
a[data-type="gp"] {background: #dd4b39;}
a[data-type="li"] {background: #0976b4;}
a[data-type="tw"] {background: #55acee;}
a[data-type="lj"] {background: #004359;}
a[data-type="tm"] {background: #35465c;}
a[data-type="bl"] {background: #f57d00;}
a[data-type="pt"] {background: #cc2127;}
a[data-type="di"] {background: #000000;}
a[data-type="en"] {background: #7ac142;}
a[data-type="rd"] {background: #5f99cf;}
a[data-type="de"] {background: #3399ff;}
a[data-type="su"] {background: #eb4924;}
a[data-type="po"] {background: #d3505a;}
a[data-type="sb"] {background: #26B1F6;}
a[data-type="lr"] {background: #000000;}
a[data-type="bf"] {background: #323b43;}
a[data-type="ip"] {background: #428bca;}
a[data-type="ra"] {background: #990000;}
a[data-type="xi"] {background: #cfdc00;}
a[data-type="wp"] {background: #0087be;}
a[data-type="tg"] {background: #0088cc;}
a[data-type="vi"] {background: #8f5db7;}
a[data-type="wa"] {background: #43d854;}
a[data-type="ln"] {background: #00c300;}
a[data-type="bd"] {background: #2529d8;}
a[data-type="rr"] {background: #53a9d7;}
a[data-type="wb"] {background: #c53220;}
</style>

////////////////////////Если получилось отпишись нам

С тэгом <style> надо прописать в самом HTML или PHP файле.

[кобряныч]

С тэгом <style> надо прописать в самом HTML или PHP файле.

Благодарю,- БРО.

[kocht]

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

   

Но вот осталась еще запара с иконочными шрифтами fontello. 

Даже код есть, но не знаю куда правильно его подключить
 

@font-face { 

font-family: 'fontello'; 

src: url('http://site.com/temp...nt/fontello.eot'); 

src: url('http://site.com/temp...nt/fontello.eot') format('embedded-opentype'), 

url('http://site.com/temp.../fontello.woff.') format('woff'), 

url('http://site.com/temp...nt/fontello.ttf') format('truetype'), 

url('http://site.com/temp...nt/fontello.svg') format('svg'); 

font-weight: normal; 

font-style: normal; 

}

 

Пытался сделать что-то подобное со своим шаблоном BeTheme - ничего не изменилось(

Если кто силен, подскажите куда нужно (в какую папку) добавить файлы самого шрифта и куда вставить сам код. 

Сообщение отредактировал kocht: 03 Ноябрь 2016 - 21:16

[кобряныч]

Вот файлы вместе со шрифтами

https://cloud.mail.r.../9fYm/u47VfpLdS

у тебя такое же расположение файлов должно быть, у меня работает!

то что там иероглифы,- это говорит что сами шрифты у тебя не в том месте

можешь просто попробовать взять папку assets c облака и положить ее рядом со своим index.php 

Вот все лежит на моем, сервере все работает.

 

 

Сообщение отредактировал кобряныч: 03 Ноябрь 2016 - 22:50