Archive

Posts Tagged ‘CSS’

Кастомні шрифти в Magento – @font-face

Грудень 6, 2010 7 коментарів

Якщо ви хочете якось виділити ваш магазин з поміж інших – ви можете використати якісь оригінальні та не стандартні шрифти для цього. Та оформити ними заголовки сторінок, назви категорій та продуктів.

font-face

Найкращою технікою на даний час можна вважати @font-face оскільки він інтуїтивно підтримується браузерами та за допомогою певних маніпуляцій буде працювати майже у всіх браузерах.
Детальніше…

Advertisements
Категорії:CSS, How to (як зробити?), Magento Позначки:, , , ,

Як підключити css файл в Magento?

Травень 25, 2010 1 Коментарій

[tweetmeme source=”magentoua” only_single=false https://magentoua.wordpress.com/2010/05/25/magento-add-css%5D
Часто потрібно підключити сторонній css файл в Magento. Наприклад, якщо ви хочете підключити Shadowbox чи Lightbox, або просто потрібно винести частину css в окремий файл. Хотілось би уточнити і вкотре нагадати, що якщо у вас є можливість об’єднати css файли то краще так і зробіть, чим менше файлів ти менше запитів до сервера.

Перш за все вам потрібен сам css файл. Припустимо наш файл має назву external.css. Помістіть його в папку тієї теми з якою ви працюєте: skin/frontend/vash_package/vasha_tema/css. Усе, тепер потрібно його грамотно підключити.

Для цього йдемо в папку app/design/fronted/vash_package/vasha_tema/layout/ та підключимо його у файлі page.xml за допомогою методу addCss. В блоці <block name="head" ... > прописуємо наступне:

<block type="page/html_head" name="head" as="head">
	<action method="addCss"><stylesheet>css/external.css</stylesheet></action>
</block>

Оце і все, файл підключений і готовий виконувати свої функції. Далі…

Категорії:CSS, How to (як зробити?), Magento Позначки:, , ,

25 неймовірно корисних CSS трюків про які ти повинен знати

Грудень 25, 2009 6 коментарів

25 неймовірно корисних CSS трюків про які ти повинен знати

1. Зміна кольору підсвітки тексту

Ти можливо не знав цього раніше! За допомогою CSS ти можеш контролювати кольори виділеного тексту принаймні для браузерів які підтримують веб-стандарти – такі як Safari або Firefox.

::selection{ /* Safari and Opera */
background:#c3effd;
color:#000;
}
::-moz-selection{ /* Firefox */
background:#c3effd;
color:#000;
}

Детальніше…

Категорії:CSS Позначки:,

10 принципів CSS самурая

Грудень 2, 2009 6 коментарів

10 Принципів майстра CSS

Коли доходить до CSS, у всесвітній павутині можна знайти силу-силенну ресурсів і так званих “порад від експертів”. Це поради від неперевірених та самопроголошених “гуру”, які часто не мають ніякого відношення до веб-дизайну. Так як вони інколи дають корисні поради, то як взнати чи це корисний ресурс чи просто невипробуваний хак?

Замість того, щоб покладатися на невідомі джерела, давайте уважніше прислухаємося до дизайнерів, які мають солідний стаж і зробили собі ім’я. Ці CSS поради зібрані від найбільш поважних дизайнерів планети. У них є солідні портфоліо, які є підґрунтям цих порад, тому ви можете бути впевненими, що кожна з порад є найвищої якості.

Нижче наведені 10 принципів, які кожен веб-розробник чи дизайнер може знайти корисними, значущими чи багатообіцяючими. Зважте на поради людей, які пройшли довгу та тернисту дорогу дизайнерської майстерності. Це справжні майстри CSS. Візьміть побільше їхніх знань та використайте їхню мудрість у вашому наступному проекті. Детальніше…

Категорії:CSS Позначки:,

Створення нової теми в Magento

Жовтень 7, 2009 10 коментарів

Отже, ми проінсталювали Magento тепер можна створювати свою оригінальну тему.

Першим кроком буде дублювання структури папок дефолтової теми (default), так щоб ми завжди мали страховку на випадок якщо ми щось зіпсуємо. Структура дефолтової теми Magento показана знизу, саме ці дві папки потрібно здублювати. Дублювання в нашому випадку означає створення нової папки з тим самим вмістом що і оригінальна. Найпростішим методом є копіювання папки з оригінальної теми або дублювання за допомогою SSH чи подібного клієнта.

Базова структура папок:
/app/design/frontend/default/default/ – налаштування теми
/skin/frontend/default/default/ – де знаходяться css і малюнки теми

Давайте назвемо новий проект new_package. Тоді структура папок буде виглядати так:
/app/design/frontend/default/default/ – дефолтова (оригінальна) тема
/app/design/frontend/new_package/default/ – наша нова, скопійована тема
/skin/frontend/default/default/ – де знаходяться css і малюнки теми
/skin/frontend/new_package/default/ – наша нова, папка з скінами

Базова структура папок

Базова структура папок

Структура з новим пакаджем

Структура з новим пакаджем

blank
Детальніше…

Категорії:How to (як зробити?), Magento Позначки:, , , , , ,