Складність уроку: Середній
Сьогодні ми в черговий раз поговоримо про редагування стандартного шаблону Joomla. У попередніх уроках ми говорили про те, як працювати з кодом сторінки і файлами стилів. а так само створили шапку для нашого сайту. Сьогодні розберемо не менш важливе питання - як оформити контентную частина сторінки (заголовки, параграфи, зображення). Крім того навчимося працювати зі шрифтами і підберемо гарний шрифт для нашого сайту.
Оформлення зображень на сайті
Для початку давайте розберемося з зображеннями на сайті і почнемо з зображення повного тексту матеріалу.
За замовчуванням зображення повного тексту матеріалу можна виводити по лівому або по правому краю, а як бути, якщо з'явилося бажання розмістити його строго по центру? Для цього доведеться написати власні CSS стилі для оформлення зображення.
Тут немає нічого складного, знаходимо блок, в якому у нас знаходиться зображення, визначаємо застосовані до нього класи і пишемо необхідні стилі. У шаблоні Protostar зображення повного тексту матеріалу знаходиться в блоці
Щоб правильно оформити саме це зображення не торкнувшись інші, доведеться оперувати наведеними вище класами. Для того щоб розташувати зображення повного тексту матеріалу по центру сторінки пишемо такі стилі в CSS файл:
Тепер якщо зберегти зміни і подивитися на результат, то можна переконатися в тому, що зображення знаходиться по центру сторінки.
Оформлення мініатюр зображень
Наступним кроком необхідно оформити мініатюри зображень, які створюються плагіном mAvik Thumbnails (якщо ви його використовуєте, а якщо немає, то дуже рекомендую). Якщо чесно проблем з ним практично не виникає, але чому то саме в шаблоні Protostar є особливості виведення мініатюр зображень на мобільних пристроях - вони вилазять за межі області контенту. Щоб позбутися від подібної проблеми можна застосувати до них такі стилі:
Ми вказали, що ширина рамки містить мініатюру зображення не повинна бути більше ширини області контенту. Ця рамка оформлена у вигляді посилання з класами «thumbnail» і «zoomin». Далі ми говоримо браузеру, що висота картинки повинна бути підібрана автоматично, щоб уникнути небажаної зміни пропорцій зображення.
Медіа-запит @media (max-width: 420px) вказує, що вкладені в нього стилі будуть застосовні тільки для пристроїв з шириною екрану 420 пікселів і менше.
У підсумку ми отримаємо ось такий результат:
оформлення тексту
Основна складова будь-якого сайту крім усього іншого це текст і зображення, з зображеннями розібралися, тепер займемося оформленням тексту на сайті.
Під оформленням тексту можна розуміти як зміна його параметрів, таких як розмір, колір, вирівнювання тощо так і зміна шрифту. Для початку давайте визначимося зі шрифтами.
Для зміни шрифту на сайті служить певний CSS властивість:
Шрифти можна перераховувати через кому, таким чином, якщо у користувача на комп'ютері немає буде встановлено перший шрифт, то буде використовуватися наступний після нього і так далі.
Такий підхід по-своєму гарний, але можна піти й іншим шляхом - завантажувати шрифти з онлайн сервісів (CDN-хостингу). В цьому випадку можна бути впевненим, що вказаний шрифт буде працювати на будь-якому комп'ютері. Все що необхідно зробити, це підключити сподобався Вам шрифт і використовувати його на свій розсуд, але тут варто бути обережним і не завантажувати надто багато шрифтів, це може вплинути на швидкість завантаження сторінки.
Один з таких онлайн сервісів з безкоштовними шрифтами це Google Web Fonts. Сервіс зі шрифтами від Гугла хороший тим, що ви можете наочно подивитися на наявні шрифти, вибрати вподобані і довантажити їх на свій сайт. Все простіше простого, переходимо на сторінку Google Web Fonts і шукаємо шрифт, який нам сподобається:
На сторінці Google Web Fonts можна налаштувати відображення наявних шрифтів на свій розсуд, наприклад, вибрати тільки російські шрифти, сімейство шрифтів і т.д. Крім того можна подивитися як буде виглядати шрифт застосувавши до нього різні стилі такі як розмір, накреслення та інше.
Після того як з шрифтом визначитеся, тиснемо по значку «+» (таким же чином можна вибирати кілька шрифтів). Внизу сторінки з'явиться спливаюче вікно, в якому наведено невеликий код необхідний для розміщення обраних шрифтів на сайті:
На даному етапі нас цікавить два рядки коду, які запропонував Гугл, вони можуть відрізнятися в залежності від обраних Вами шрифтів. Перший рядок вставляється в індексний файл шаблону між тегами
. в моєму випадку вона виглядає так:Файл index.php повинен вийти приблизно наступного вигляду:
Другий рядок вставляємо в файл стилів. або для всього документа (сторінки), або для кожного елемента окремо (заголовок, параграф, список і т.д.). Я, наприклад, вибрав відразу три шрифту Alice. Lobster (рукописний шрифт) і Open Sans і застосував їх до різних елементів.
Спочатку для всього тексту я вибрав шрифт Alice і прописав його в такий спосіб:
Потім окремо для заголовків застосував інші шрифти:
Стилі в файлі CSS можна розміщувати де завгодно на ваш розсуд, якщо необхідно вказати на пріоритет того чи іншого стилю тоді необхідно дописати параметр «! Important» до символу ";".
Ось таким чином можна підключити гарні шрифти і не турбується про те, що їх може не виявитися у відвідувачів сайту.
Інші властивості тексту
Тепер давайте напишемо ще кілька стилів для тексту нашого сайту, тим самим зробимо його більш привабливим і читабельним.
Для початку збільшимо розмір тексту до 16 пікселів для параграфів, і списків. Для цього напишемо наступне:
Зверніть увагу що стилі до списків будуть застосовані не до всіх, а тільки до тих які знаходяться в області контенту (.item-page), це зроблено для того щоб зазначені стилі не були застосовані до меню на сайті, і хлібним крихтам які в свою чергу побудовані на базі списку.
Тепер додамо параграфів і списками відступи знизу і зробимо вирівнювання тексту по ширині сторінки:
Тепер можна зберегти всі зміни і подивитися, що у нас вийшло. А вийшло у нас таке - текст сайту став більш привабливим і краще читається, а посилання помітні відразу.
В результаті код файлу стилів у мене вийшов таким:
Звичайно, це далеко не повний список всіляких стилів, які можна застосувати до тексту на сайті, але цього цілком достатньо.
На цьому даний урок підійшов до кінця, а в наступному уроці ми поговоримо про те, як підправити оформлення правого меню і навігатора сайту (хлібні крихти), а так само зробимо симпатичну кнопку «Вгору» провідну в початок сторінки.