По скольку вопрос оформления/уменьшения кнопок в данной ветке всплывал не раз, я решил поделиться своим опытом настройки внешнего вида кнопок при помощи CSS. Сам просидел пару дней, пока разобрался что к чему, буду рад если кому-либо пригодится.
И так последовательность действий такая.
Качаем gimp - графическая программка, бесплатная, на подобии фотошопа(у меня версия gimp 2.8.2 рус).
Качаем спрайт большой из поста zikkuratvk #160 стр 6 распаковываем его и кладём его в папку modules\mod_slogin\media, переименовываем в тот, который уже имеется, старый удаляем.
заходим в админку - модули - slogin в настройках разметка, выбираем - по умолчанию, сохраняем.
Заходим в: modules\mod_slogin\tmpl\default открываем файл slogin.css
находим класс (.slogin-buttons span)
мне нужны были кнопки меньшего размера и их я подгонял под свои нужды, по этой логике можно сделать свои.Значения ширины и высоты картинки-кнопки я сделал такие:
height: 25px;
width: 25px;
В классе (.slogin-buttons a, .slogin-buttons a:hover)
все радиусы сделал по 5px
В этом классе (.slogin-buttons a)
изменил ширину кнопки до 20px и поменял значение padding:5px 10px 5px 5px;
Для того что бы картинки кнопок из спрайта, отображались в кнопках, открываем скаченный спрайт при помощи gimp, который кстати уже должен лежать тут: modules\mod_slogin\media.
В Gimpe идём инструменты-преобразование-кадрирование (на мой взгляд для необходимой нам операции наиболее подходящий инструмент). Щёлкать мышью нигде не нужно, просто наводим этот крестик в верхний левый угол блока кнопок(см картинку в спойлере 3 блок слева направо, кнопка linkedin второй ряд последняя кнопка), нужного нам размера. В нижнем левом углу программы gimp, вы увидите координаты нужной нам картинки-кнопки например 272*473 (см картинку, обведено красным маркером )
. Соответственно у каждой кнопки в блоке, свои координаты, передвигаем на следующую нужную вам кнопку, наводим на левый верхний угол нужной кнопки крестик - получаем координаты новой кнопки.
Координаты каждой кнопки мы прописываем в классах,(вместо координат которые там были) отвечающих за размещение картинки данной кнопки, .slogin-buttons .googleslogin (не трудно догадаться что в этом классе нам нужно прописать координаты кнопки гугл+). Далее в зависимости от названия соцсети. Свои значения я указывал в отрицательных координатах, у вас может быть по другому, поэкспериментируйте.
.slogin-buttons .odnoklassnikislogin {
background-position: -303px -474px;
Сохраняем, проверяем, радуемся маленьким кнопочкам. В спойлере код моего slogin.css (default)
02.02.2022, 18:54:24