Как редактировать картинку в css

Как редактировать CSS шаблона в Joomla?

Друзья, статья под названием "Как редактировать CSS шаблона в Joomla?" является первой статьей нового раздела моего сайта, посвященного вопросами оптимизации и создания сайтов — CSS. Таким образом, я расширяю круг своих интересов в направлении создания сайтов и готов уже поделиться некоторыми решениями. Да и без элементарных знаний в веб-дизайне очень трудно сделать красивый сайт на заказ.

Сегодня я хочу рассказать о несложном, но очень полезном алгоритме редактирования CSS стилей шаблонов для сайтов на Joomla. Я бы сказал, что сам алгоритм намного универсальнее и подходит для любых типов движков и сайтов вообще, просто примеры я буду приводить именно редактируя дизайн шаблонов сайтов на Joomla, поскольку этим я довольно часто занимаюсь в последнее время.

Зачем редактировать CSS стили шаблонов?

Конечно, если Вы читаете эту статью, значит причина у Вас уже имеется, но многие только догадываются, зачем это нужно. Поэтому, например, можно сказать, что Вы создали сайт себе или кому-то, добавили интересующий Вас шаблон, но в итоге одна или несколько деталей Вас не устраивает по какой-то причине, например:

  • очень большой размер шрифта заголовков в стилях шаблона;
  • не устраивает цвет фона шаблона или отдельных элементов дизайна;
  • хочется изменить размер или расположение определенных элементов или полей, логотипа например и т.д.

Вот все эти казалось бы мелочи очень часто огорчают веб-мастеров и заставляют в итоге принять решение или о найме веб-дизайнера для его правки, или об установке другого шаблона. Данная статья поможет Вам самостоятельно и бесплатно редактировать шаблоны сайтов.

Где находится нужный CSS файл?

В современных шаблонах для Joomla и других CMS как правило содержится много папок, в которых располагаются файлы, обслуживающие работу определенных модулей, вывод стилей и т.д. Практически всегда, отвечающие за дизайн шаблона файлы находятся в папках шаблона под названием CSS. В таких шаблонах может быть несколько папок с таким названием, да и в самих папках можеть находиться много файлов с расширением .css и нужно четко понимать, какой именно файл нужно редактировать.

Для этого, в браузере Firefox есть такой полезный инструмент как исследование элементов. Далее буду приводить примеры. Давайте отредактируем положение, высоту и цвет фона поля, предназначеного для выведения шапки сайта.

Итак, на интересуемом участке, который нужно отредактировать (у нас это будет шапка сайта), кликните правой кнопкой мыши. В предложенном меню выберите пункт Исследовать элемент. После этого исследуемый элемент будет выделен пунктирной рамкой и откроется дополнительная консоль, где будет выведен код страницы и самого элемента (напомню, в примере шапка сайта) — смотрите скриншот ниже.

поиск нужного файла CSS

Должен сразу заметить, что у меня на ноутбуке установлена ОС Lubuntu, поэтому графика программ и приложений у Вас может отличаться, но это не имеет принципиального значения.

Справа видим HTML-код шаблона, но поскольку нам нужно отредактировать CSS-файл, отвечающий за стиль отображения шапки сайта, переходим сразу в него, нажав на его названии (кликните там, где показано в скриншоте выше красным). В итоге нам открывается нужный CSS файл (смотрите скриншот ниже).

ищем код для редактирования элементов

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

td.logoheader — имя шапки сайта в CSS-файле

background — фон шапки сайта, который состоит из картики (url(../images/123.png)) и из html-кода цвета фона (#4B6B94), а также из правила, которое указывает картинке не тиражироваться (no-repeat) и находиться внизу по центру (bottom center)

height — высота шапки сайта в пикселях (в данном случае — 146px)

width — ширина шапки сайта по отношению к шаблону, в примере выражена в % (100%)

Для изменения цвета фона, размера шапки сайта и самой фоновой картинки мы будем вносить изменения в параметры background и height, остальные не будем трогать.

Где следует вносить изменения в CSS-файл?

Самое интересное и приятное заключается в том, что изменения мы будем вносить в код прямо в редакторе таблиц стилей в браузере Firefox (смотрите второй скриншот). И что очень удобно, изменения будут отображаться в реальном времени и только для Вас! Таким образом Вы сможете провести эксперименты, найти оптимальное решение в дизайне и уже только потом внести остаточные изменения в CSS-файл шаблона! Согласитесь — это избавляет от массы проблем 🙂

Для наглядности, давайте сделаем следующие изменения:

  • сделаем высоту шапки сайта в 200 пикселей
  • поменяем цвет фона, например, на белый (html-код белого цвета #fff)
  • переместим положение картинки влево и вверх
  • ну и можем поменять саму картинку (второй вариант я заранее забросил по FTP на сервер в ту папку, в которой лежит существующая актуальная картинка. Название новой картинки header.jpg)

Кстати, чтобы точно узнать путь к папке, в которой лежит нужное изображение, нужно просто на самом изображении в браузере кликнуть правой кнопкой мыши, далее выбрать пункт Открыть фоновое изображение и в браузерной строке увидите полный путь от домена до названия самого файла 🙂

И еще раз напомню, все изменения в код я вношу прямо в редакторе браузера, поэтому результат всех вышепредложенных изменений смотрите в скриншоте ниже.

готовые изменения в CSS файле шаблона

С какими проблемами можете столкнуться при окончательном редактировании CSS-файла шаблона Joomla?

Вроде уже потренировались в редакторе браузера, определились с изменениями в дизайне. Заходите через FTP-клиент на сервер или через менеджер файлов хостинга, скачиваете нужный CSS-файла шаблона, открываете его в Notepad++ (или в текстовом редакторе JuffEd, если у Вас Ubuntu), вносите изменения в сам файл, сохраняете, заливаете измененный файл на сервер но никаких визуальных изменений в итоге не произошло? Что нужно сделать:

  • проверьте права доступа к изменяемому CSS-файлу. Если стоит chmod 444 или 644, то измените хотя бы на 755. После внесения изменений верните значение chmod в прежнее состояние.
  • обновите кеш браузера — нажмите одновременно клавиши CTRL+F5

Эти простые манипуляции должны помочь 🙂

На этой позитивной ноте заканчиваю статью "Как редактировать CSS шаблона в Joomla?", которая имеет универсальный алгоритм и может быть полезной для всех веб-мастеров, не зависимо от CMS сайта. Если Вам понравилась статья, можете поделиться ею в соцсетях, возможно, она будет для кого-то не менее полезной:) Успехов Вам в веб-дизайне и до встречи в следующих статьях!

А если у Вас возникли вопросы к данной статье, пожалуйста, спрашивайте через форму комментариев ниже 🙂

Фильтры в CSS для редактирования изображений.

Здравствуйте! В этой статье речь пойдет о фильтрах в css. До появления CSS фильтров вам оставалось или загружать несколько версий изображения, или манипулировать ими при помощи JavaScript. Если вы не хотите сами возиться с изображениями, вам помогут CSS фильтры. С помощью фильтров можно очень гибко редактировать изображения, а именно уменьшать или увеличивать яркость, контрастность, тень и.т.д. Но давайте обо всем по порядку.

Фильтры в CSS

Фильтр размытия

Фильтр применяет к изображению размытие по Гауссу. Необходимо указать длину, которая определяет количество взаимосмешиваемых пикселей. Чем больше значение, тем сильнее размытие. Радиус размытия нельзя задавать в процентах. Если данный параметр не задан, используется нулевое значение. Синтаксис фильтра:

Фильтр blur() не принимает отрицательные значения.

Фильтры CSS для изображений

Фильтр яркости

Фильтр применяет к изображениям линейный множитель, делая их ярче или темнее. Принимаются числа и проценты. Со значением 0% вы получите полностью черное изображение, а 100% даст оригинал. Значения выше 100% осветляют изображение. Достаточно большое значение сделает изображение полностью белым. Синтаксис фильтра:

Фильтр также не принимает отрицательные значения.

Фильтр яркости

Фильтр контрастности

Фильтр изменяет контраст изображений. Как и в фильтре яркости, тут принимаются числа и проценты. 0% даст полностью серое изображение, 100% даст нам оригинал, а значения выше 100% увеличивают контрастность. В фильтре contrast() нельзя использовать отрицательные значения. Синтаксис фильтра:

Фильтр контрастности

Фильтр падающей тени

Почти каждый из вас хоть раз использовал свойство box-shadow (подробнее можно почитать здесь). Свойство применяется к блокам, в этом его главная проблема. Свойство нельзя использовать на необычных формах. Однако фильтр drop-shadow создает тень по границам изображения. Фильтр представляет собой размытую версию альфа маски самого изображения. Синтаксис drop-shadow:

Первые два значения length обязательны, они задают горизонтальное и вертикальное смещение тени. Третье значение <blur-radius> опциональное. Чем больше значение, тем светлее будет тень. В демо ниже показана работа этого фильтра.

Фильтр drop shadow

Фильтр оттенков серого

Фильтр делает изображения черно-белыми. 0% даст нам оригинал, а 100% превратит изображение в черно-белое. Эффект фильтра в рамках этих значений меняется по линейному множителю. Фильтр grayscale() не принимает отрицательные значения. Синтаксис:

Фильтр оттенков серого

Фильтр поворот цвета

Фильтр изменяет цвет изображений. Параметр определяет угол в градусах на цветовом колесе, на который сдвинутся цвета изображения. 0deg даст нам оригинал, значения выше 360deg повторяются. Синтаксис фильтра:

Фильтр поворот цвета

Фильтр инверсии

Фильтр инвертирует цвета изображения. Сила инверсии зависит от значения передаваемого параметра. 0% никак не скажется на изображении, 100% полностью инвертирует цвета, а на 50% мы получим полностью серое изображение. Сила эффекта определяется линейным множителем в рамках этих значений. Фильтр не принимает отрицательные значения. Синтаксис фильтра invert():

Фильтр инверсии

Фильтр прозрачности

Фильтр делает изображение прозрачным. Значение 0% делает изображение полностью прозрачным, а 100% даст нам оригинал.
Фильтр работает как свойство opacity в CSS. Разница лишь в том, что некоторые браузеры для повышения производительности включают аппаратное ускорение для данного фильтра. Синтаксис:

Фильтр прозрачности

Фильтр насыщенности

Фильтр контролирует насыщенность изображений. Сила эффекта зависит от значения параметра. Отрицательные значения не принимаются. При минимальном значении в 0% изображение полностью теряет насыщенность. 100% никак не меняет изображение. Для увеличения насыщенности необходимо использовать значения выше 100%. Синтаксис:

Фильтр насыщенности

Фильтр сепии

Фильтр придает изображению оттенок сепии. 100% дает полный эффект сепии, а 0% даст нам оригинал. Сила эффекта в пределах этих значений меняется по линейному множителю. Отрицательные значения запрещены. Синтаксис sepia():

Фильтр сепии

Фильтр URL

Возникает ситуация, когда вам нужно создать свой фильтр. Фильтр url задает ссылку на XML файл с SVG фильтром. Также можно указать якорь на элемент filter. Пример с постеризацией изображения:

Результат будет похож на изображение ниже:

Фильтр URL

Работа с несколькими фильтрами

Если вам не хватает одного фильтра, можно применить комбинацию фильтров на одном изображении. Порядок применения фильтров несильно влияет на результат. Несколько фильтров можно применить следующим образом:

Работа с несколькими фильтрами

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

В некоторых случаях порядок фильтров сильно влияет на результат. К примеру, sepia() после grayscale() даст на выходе сепию, а grayscale() после sepia() даст черно-белое изображение.

Анимация фильтров

Свойство filter можно анимировать. Правильная комбинация изображения и фильтров может дать потрясающий эффект. Взгляните на код ниже:

Для имитации дня и ночи я использую фильтры hue-rotate() и brightness() в связке. Оригинальное изображение имеет оранжевый оттенок. До 20% в анимации я не трогаю поворот цвета и плавно увеличиваю яркость, что создает эффект солнечного дня. К концу же анимации я поворачиваю цвета на 180 градусов, что дает нам голубой оттенок. В паре с низкой яркостью мы получаем эффект ночи.

Заключительные мысли

Помимо 11 фильтров, которые мы обсудили, есть еще один — custom(). С помощью шейдеров данный фильтр позволяет создавать совершенно разные эффекты. У фильтра custom() есть несколько проблем, которые затормозили его развитие. Adobe активно работают над решением проблем, которые возникают при использовании фильтра custom(). К счастью, в скором времени их наработки станут доступны разработчикам, и последние смогут использовать их в своих проектах.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как редактировать CSS в WordPress

Для внесения изменений во внешний вид сайтов на WordPress часто приходится редактировать код CSS. В этой статье мы рассмотрим несколько способов изменения CSS кода в темах WordPress.

Редактирование файла style.css вашей темы

Самым распространённым спобом редактирования CSS кода вашего сайта WordPress является его изменение в файле style.css вашей активной темы. Все темы в WordPress находятся в директории wp-content/themes и по названию вашей активной темы, вы сможете легко определить в какой директории она располагается.

Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования WordPress. Если изменение файлов из панели администратора поддерживается вашим хостинг провайдером, вы найдёте эту возможность в разделе Внешний вид → Редактор.

Редактор темы в WordPress

Редактор темы в WordPress

Убедитесь, что в списке справа выбран файл style.css (таблица стилей). Редактировать файлы .php таким образом крайне не рекомендуется, поскольку малейшая ошибка может привести к поломке вашего сайта. Более надёжным методом является редактирование через FTP.

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

Дочерние темы WordPress

Дочерние темы в WordPress позволяют вносить изменения в другие темы, не меняя при этом исходный код оригинальной темы. Кроме таблицы стилей, дочерние темы могут изменять и другие файлы шаблонов в WordPress, но это выходит за рамки данной статьи.

Для создания новой дочерней темы, дайте ей новую папку в директории wp-content/themes и поместите в неё пустой файл с названием style.css. Путь до вашего файла стилей будет выглядеть следующим образом: wp-content/themes/my-child-theme/style.css , где my-child-theme &#8212; название нашей новой дочерней темы.

Откройте файл style.css вашей дочерней темы в вашем любимом текстовом редакторе, и впишите в него следующий код:

Директивой Theme Name мы указываем название нашей дочерней темы, а на следующей строке директивой Template указываем на родительскую тему, которую хотим использовать. В нашем случае это тема Twenty Twelve, которая находится в директории twentytwelve .

После заголовка темы, командой @import мы включаем стили темы Twenty Twelve, а всё что следует ниже &#8212; наш собственный CSS код. В нашем случае мы изменяем цвет фона на красный.

Сохраните изменения в файл style.css вашей дочерней темы, и загрузите всю директорию my-child-theme на сервер по FTP. Вы увидите, что ваша новая дочерняя тема доступна при выборе тем в разделе Внешний вид → Темы.

Дочерняя тема WordPress

Дочерняя тема WordPress

Таким образом, при редактировании файла style.css вашей дочерней темы все изменения будут отображаться на вашем сайте, а при обновлении родительской темы, ваши наработки не пострадают.

Редактирование CSS с помощью плагина

Ещё одним методом редактирования CSS кода в WordPress является использование плагина. Существует немалое количество плагинов, позволяющих изменять таблицу стилей. Мы рекомендуем бесплатный плагин Jetpack, который содержит модуль Custom CSS.

Редактор CSS в Jetpack

Редактор CSS в Jetpack

Модуль Custom CSS позволяет редактировать стили прямо из панели администрирования WordPress и не требует FTP доступа или особых настроек хостинг площадки. Custom CSS имеет подсветку и проверку синтаксиса, поддерживает ревизии, а так же несколько CSS препроцессоров (LESS и Sass).

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

Константин Ковшенин 05.06.2013 05.11.2013

Сооснователь журнала WP Magazine и первой конференции WordCamp в России. Работал в Automattic, WordPress.com, WooCommerce. Принимает активное участие в развитии ядра WordPress. Любимый язык программирования: Python.

Подписаться на рассылку

Подписаться → Подпишитесь на бесплатную рассылку журнала WP Magazine и получайте новости, события, подборки тем и плагинов, уроки, советы и многое другое в мире WordPress!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *