Рейтинг: 5/5
Ось і вирішив розповісти сьогодні, як створити самому посилання на соцмережі на сайті Joomla 3, використовуючи лише деякі досить поверхневі знання HTML і CSS, залишаючи код свого ресурсу максимально чистим, а паралельно піклуючись про зниження навантаження на сервер з боку і так численних модулів і плагінів .
Ми розглянемо, як закріпити посилання на соцмережі в будь-якому кутку сторінки, зробити їх нерухомими і напівпрозорими. А при наведенні на кожну з посилань вона буде ставати повністю непрозорою.
Готуємо картинки для створення власних посилань на соцмережі
Створюємо нову позицію в шаблоні сайту Joomla 3
Далі я створив нову позицію в використовуваному шаблоні Joomla 3. Для тих, хто не знає, як це зробити, поясню трохи докладніше. Всередині папки з шаблоном, який використовується на вашому сайті за замовчуванням треба спочатку відкрити файл INDEX.php і додати в нього наступний рядок:
Я для цього зазвичай вибираю місце відразу за останньою позицією модуля в шаблоні (зазвичай це «debug», який не укладається в теги DIV. Прямо за ним я і ставлю свою позицію під назвою soc-seti.
Після цього, для того, щоб назва позиції відображалося у нас при створенні нового модуля всередині Joomla, треба додати нову позицію в файл templateDetails.xml нашого шаблону:
Її я також додаю після всіх елементів з тегами POSITION.
Створюємо модуль Joomla для виведення власних посилань на соцмережі
Далі нам треба вивести нашу позицію на сам сайт. Для цього вже в адмінці сайту створюємо новий модуль типу HTML (а ще краще Flexy Custom Code, якщо це розширення у вас встановлено).
У позиції вибираємо нашу soc-seti, а в сам HTML-код записуємо щось подібне:
Спочатку створюється загальний контейнер DIV, всередині якого в окремих контейнерах будуть знаходитися всі картинки-посилання. Цьому головному DIV ми вказуємо CSS властивості:
position: fixed; - робимо положення модуля фіксованим, нерухомим при прокручуванні.
top: 5px; - задаємо відстань від верхнього краю сторінки (можна і від нижнього: bottom: 5px;)
right: 10px; - задаємо відстань від правого краю сторінки (можна і від лівого: left: 5px;)
Отже, наш поки віртуальний і невидимий контейнер розташувався на своєму місці - нерухомо в правому верхньому куті (ну, або який ви виберете)
Якщо в цей момент ми опублікуємо модуль і подивимося, як він виглядає, то побачимо, що вже дуже навіть пристойно. Однак між нашими картинками немає відстані - вони немов злиплі. Немає і ефекту напівпрозорості, зникаючого прінаведеніе на посилання.
Саме для реалізації всього цього я і зробив висновок кожну картинку в контейнер DIV, якому присвоєно клас soc-seti.
Додаємо стилі в css файл шаблону
Тепер йдемо в scc файл нашого шаблону і дописуємо там такі рядки:
Трохи поясню. Параметр clear: both; - дозволяє картинкам залишатися один над одним. Якщо вам захочеться вибудувати їх по горизонталі, то можна замінити цей параметр на float: left;
Далі йде margin-top: 5px; - зверху від кожної картинки з'являється відступ 5 пікселів.
Параметр opacity: 0.7; задає прозорість картинки. Можна використовувати число від 0 до 1, де один - повністю непрозора картинка.
У наступному рядку задаємо поведінку наших елементів при наведенні миші. Для цього до класу soc-sety додаємо псевдоклас: hover, який відповідає за оформлення елемента при наведенні миші. тут ми вказуємо тільки те, що в такому випадку картинка повинна ставати повністю непрозорою.
Передбачаю, що знайдеться чимало фахівців, які почнуть доводити, що все потрібно робити зовсім по-іншому і можна набагато простіше. А тому відразу відповідаю: це лише один з можливих варіантів.
Зокрема, ми могли б опису CSS класу не забирати в файл нашого шаблону, а розмістити прямо в коді нашого модуля. В такому випадку до вмісту модуля треба додати код:
Я зробив це таким чином:
soc-seticlear: both;
margin-top: 5px;
margin-right: 5px;
opacity: 0.5;
transition: all 2s;
-moz-transition: all 2s;
-o-transition: all 2s;
-webkit-transition: all 2s;
>
.soc-seti: hoveropacity: 1;
transform: translate (-15px, 0);
-webkit-transform: translate (-15px, 0);
-moz-transform: translate (-15px, 0);
-o-transform: translate (-15px, 0);>
В даному коді ми задаємо параметри не тільки для класу soc-seti, але і для нього ж при наведенні курсору миші (soc-seti: hover). При цьому селектор transition: all 2s вказує браузеру, що до всіх елементів потрібно застосувати ефект переходу між двома станами тривалістю 2 секунди.
Що виходить з усього цього можна подивитися на моєму сайті.