Очередной блог фрилансера

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

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

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

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

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

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

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

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

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

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

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

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

Td.logoheader {
margin: 0;
padding: 0;
background: url(../images/123.png) #4B6B94 no-repeat bottom center;
height: 146px;
width: 100%;

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-файла шаблона Joomla?

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

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

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

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

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

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

Для редактирования файла style.css вашей темы вам необходимо иметь доступ к сайту через FTP, или поддержку изменения файлов темы прямо из панели администрирования 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 — название нашей новой дочерней темы.

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

/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css"); body { background: red; }

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

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

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

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

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

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

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

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

Style Master v 5.0 (для Mac OS X), v 4.6 (для Window) 1997 - 2016 гг. Интерфейс и справка на англ. языке. Вес 8,79 Мб. Цена 59,99 долл. После окончания пробного периода программа (30 дней) продолжит работу в урезанной бесплатной версии.
Работает в Windows 2000/NT/XP/Vista, Mac OS X.

Назначение программы - создание таблиц стилей CSS. Создание листов стиля, основанных на Вашем HTML. Редактирование CSS, а также PHP, ASP.NET, Rubyи др. Поддержка CSS3 и HTML5. Авторская справка в Интернете (англ. язык)
Скачать

TopStyle Pro v 5 (1999 - 2006 гг). Интерфейс и справка на англ. языке (имеется русификатор). Цена 79,95 долл. Имеется бесплатная версия программы (TopStyle Lite).
Назначение программы - создание таблиц стилей CSS для веб-страниц.
Поддержка CSS3 и HTML5. Вы получите доступ ко всем последним признакам и свойствам тэгов.
Предварительным просмотр HTML и CSS, в то время, как Вы создаете правила CSS.
TopStyle поддерживает браузеры IE, Chromium, Firefox и Safari.

Astyle CSS Editor

Astyle CSS Editor v 3.8 Beta 8.(2003 - 2008 гг). Интерфейс и справка на англ. языке. Вес 1,48 Мб. Бесплатная программа.
Работает в Microsoft Windows 98, Me, NT 4, 2000, XP.
Astyle CSS Editor является визуальным редактром таблиц стилей CSS.
Работа ведется в визуальном режиме, без написания кода.

Программа LiveStyle предназначена для редактирования таблиц стилей CSS в реальном времени. Вес 44,7 Мб.
Все изменения, вносимые в таблицу стилей, сразу же отражаются на текущей веб-странице (без обновления страницы).
LiveStyle устанавливается как расширение для браузера Google Chrome или редактора Sublime Text , и может работать с проектами любого масштаба: от маленьких одностраничных сайтов до огромных вебсайтов. И Вы можете даже работать со своим вебсайтом.
При установке LiveStyle, например, как расширение для Google Chrome, значок программы появляется на панели инструментов браузера.
Видео-обзор
Скачать

LiveReload v 0.9. Вес 10,3 Мб. Работает в Mac, Windows, Linux.
Используется как расширения с браузерами Safari, Chrome, Firefox и Mobile Safari). По своим функциям и назначению LiveReload схожа с программой LiveStyle.
Скачать

Simple CSS v 2.3 (2016 г). Интерфейс на англ. языке. Вес 5,9 Мб. Бесплатная программа. Работает в Mac OS X и Windows.
Simple CSS ("Простой CSS") - простая программа по созданию таблиц стилей формата CSS2.
Позволяет быстро оформить стилями основную область страницы (область ), заголовки, таблицы, списки, ссылки.

Free CSS Toolbox

Free CSS Toolbox v 1.2 (1999 - 2008 гг). Интерфейс на англ. языке. Вес 1.4 Мб. Бесплатная программа.
Назначение Free CSS Toolbox - создание, редактирование и проверка кода CSS.
В программу также включен поиск, CSS Validator, CSS Formatter, Компрессор CSS. В настоящее время развитие программы прекращено, на смену пришла другая программа этого автора Rapid CSS editor.
Скачать

Rapid CSS editor

Rapid CSS editor 2018 v 15.4 (2004 - 2018 гг). Интерфейс на русском языке, справка - на англ. языке. Вес 24,7 Мб. Цены: Rapid CSS 2018 - 49.95 долл., Rapid CSS Personal (для личного использования) - 39,95 долл. Работает в Windows XP, Vista, 7, 8 10.
Назначение программы - создание таблиц стилей (CSS). Вместе с тем Rapid CSS editor может применяться и для работы с HTML-страницами.

ArduoCSS Editor

ArduoCSS Editor v 1.0.0. Интерфейс на англ. языке. Вес 5,3 Мб. Бесплатная программа.
Назначение ArduoCSS - создание таблиц стилей CSS.
Работа ведется в визуальном режиме. Имеется предварительный просмотр. Простая в применении программа.

Подписывайтесь на обновление и забегайте в гости, всегда рад.

Абсолютно каждому веб-дизайнеру, веб-мастеру или кодеру приходится постоянно прибегать к помощи хорошего редактора веб-страниц. С помощью таких редакторов веб-разработчики создают или редактируют HTML, CSS или JavaScript коды. Для начала могут подойти такие редакторы как Notepad или же TextEdit, но с накоплением опыта захочется использовать более универсальный инструмент для работы. Итак, поговорим о редакторах.

Вашему вниманию представлен текстовый редактор, используемый программистами и веб-дизайнерами. Главные отличия данного редактора – это хорошая функциональность и интуитивно простой интерфейс. Notepad++ способен открыть несколько документов одновременно, подсветить огромное количество языков программирования, записать макросы, автоматически завершить набираемый текст и многое другое. Данный текстовый редактор поддерживает такие опции как мастер создания подсветки, режим печати WYSIWYG, создание собственного API-файла и огромное количество всевозможных функций по работе с тестом. Также, программа позволяет подключать к себе различные плагины, которые способны обеспечить дополнительные функции.

Editor PSPad представляет собой бесплатный текстовый редактор, созданный для упрощения работы программистов. Данный редактор способен работать сразу с несколькими языками программирования. Также, для него не является проблемой подсветить код. Редактор Editor PSPad успешно используется при работе с текстом plain text. Отличительные черты: маленький инструмент, доступность, простое управление и невероятно мощные возможности редактирования кода.

TopStyle 4 – это финальная версия знаменитого Windows-редактора, как CSS, так и HTML-кодов, который был создан одним из разработчиков HomeSite. Что же может это редактор? TopStyle 4 способен поддерживать Unicode и редактировать документы по FTP. Также, данный редактор включает в себя специальные модифицируемые панели инструментов, различные подсказки кода, предназначенные для ASP, PHP и ColdFusion. Ещё TopStyle 4 поддерживает закладки, редактирование CSS-кода в рамках HTML-атрибутов и многое-многое другое.

Данная программа обладает уникальным инструментом анализа, предназначенным для всех заинтересованных web стандартов. Благодаря данной программе можно углубить свои знания в CSS и HTML, а также получить исчерпывающую информацию о том или ином элементе с сайта конкурента. Также, с помощью Xyle scope можно увидеть собственную работу, так сказать, свежими глазами.

Данная программа позволит с лёгкостью создавать и редактировать расположенные каскадом страницы в независимости от их размеров. Можно записывать код таблицы вручную, а можно доверить это Rapid CSS Editor. Программа имеет огромное количество вспомогательных функций, к примеру, CSS validator. Программа предусматривает встроенный предварительный просмотр, поэтому результаты проделанной работы можно просматривать в реальном времени. К тому же, Rapid CSS Editor является ещё и HTML-редактором, который способен упростить работу с CSS HTML редактированием.

Namo Webeditor

Namo Webeditor представляет собой WYSIWYG редактор HTML и является детищем компании Namo Iteractive. Данный редактор способен поддерживать CSS, HTML, ASP, PHP и JavaScript технологии. Помимо визуального редактирования программа способна работать с самим кодом страницы. Если установлен локальный сервер (SSI, Apache), то встроенные в прогу мастера способны создавать на компьютере сложноструктуируемые сайты на основе MySQL базы данных и с применением технологии серверных языков.

Данная программа предназначена для обработки стилей CSS. Она содержит многообразные опции просмотра и редактирования стилей, а также их проверку на совместимость с W3 стандартами. К тому же, EngInSite CSS Editor участвует в отображении всей работы в различных браузерах. Эта утилита способна проверить синтаксис, содержит внутреннюю систему помощи и ряд других весьма полезных для веб-мастеров примочек.

Arduo Css Editor – это бесплатный CSS редактор. Он прост в использовании и обладает приятным интерфейсом, который способствует созданию таблиц стилей без ручного написания кода. Данная программа позволяет просмотреть динамику влияния HTML на конкретный стиль изменений. То есть, основной отличительной чертой данного редактора является интуитивно простой и очень удобный интерфейс, позволяющий существенно сэкономить время, затрачиваемоё на работу.

Stylizer — Real-Time CSS Editing ($79)

Skybound Stylizer представляет собой WYSIWYG-редактор CSS стилей, один из лучших в своём роде, работающий на операционных системах Windows. Данная утилита способна значительно упростить работу веб-мастеров, а точнее написание и редактирование CSS кода. Данный редактор разработан для тех веб-мастеров, которые способны выйти за пределы работы с обычными текстовыми редакторами по обработке CSS.

Update 14.09.2015: В комментариях подсказывают, что редактор платный. На сайте нашел бесплатный триал на 30 дней, а лицензия стоит 79 долларов.

Simple CSS — A Free CSS Authoring Tool

Простенький редактор CSS-стилей, главной особенностью которого является его цена – он совершенно бесплатный. Данная программа позволяет веб-мастеру работать одновременно с несколькими проектами. Так же, как и другие подобные утилиты, Simple CSS обладает функцией предварительно просмотра, которая способна показать, как будет выглядеть конечный результат. Программа проста в эксплуатации и обладает достаточным количеством возможностей.

P.S. Спасибо за гостевой пост, как видите, бесплатных программ хватает сполна, причем многие редакторы достаточно функциональны — смысла покупать софт нету. Я лично использую Notepad++ так как он кроме СSS позволяет достаточно удобно редактировать HTML и PHP файлы. С недавних пор «подсел» еще на Sublime Text 2 — очень крутой и мощный инструмент, возможно, даже лучше Notepad++.

P.P.S. Не знаете что подарить ребенку на день рождение? возможно следует купить телескоп дабы прививать ему тягу к разным наукам и к обучению в целом, весьма интересный подарок.

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

Но для чего нам нужны редакторы CSS? Каждое введение новой технологии имеет две стороны медали, в CSS это отобразилось на поддержке некоторых свойств CSS в браузерах IE. И поэтому веб-дизайнер должен найти хак, чтобы исправить отображение в браузерах IE.

Редакторы CSS помогают писать код быстрее и избегать множества ошибок.

1. STYLIZER

STYLIZER — это редактор CSS, который позволяет редактировать CSS и видеть изменения в реальном времени. Вы можете просто ввести адрес веб-страницы и слева увидите веб-страницу, а справа — CSS код, который можно изменять и изменения будут видны слева. Можно изменять как вручную, прописывая свойства, так и с помощью кнопок WYSIWYG редактора.

Изменить цвет текста можно также динамически. При изменении цвета, появляется спектр цвета, похожий на тот, который есть в Adobe Photoshop.

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

2. TopStyle

Редактор TopStyle показывает стили поддерживаемые браузерами Firefox, IE, Safari и даже iOS 2.0. Данная возможность может быть применена при кросс-платформенной разработке дизайна.

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

Также данный редактор позволяет увидеть совместимость CSS свойства в браузере, что очень полезно при написании кода для браузера IE.

3. Style Master

Как заявляет разработчик, Style Master это редактор, который можно использовать при любом уровне знаний CSS. В программе можно использовать не только WYSIWYG редактор, но и писать код вручную(очень странно было бы если это было не так:)), с подсветкой каждого свойства, для более опытных разработчиков.

Пожалуй самым большим достоинством данного редактора являются — готовые шаблоны стилей. Он имеет около 20 шаблонов, правильно организованных, которые позволяют быстро и легко писать стили для сайта.

4. Rapid CSS редактор

Редактор Rapid CSS является удобный, легконастраиваемой программой для редактирования CSS файлов. Он имеет текстовый редактор с подсветкой синтаксиса, автозавершение кода и другие.

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

5. CSSEdit 3

Сразу скажу о том, что данный редактор поддерживает только MAC OS. Редактор имеет красивый дизайн, но он не предназначен для начинающих пользователей. Также данных редактор позволяет видеть изменения динамически, в реальном времени.

Интересной возможностью данного редактора является то, что можно описать свойство на простом английском языке(для этого создан Selector Builder). Для новичка эта функция будет достаточно интересной.

6. EngInSite CSS редактор

Если вы серьезный веб-дизайнер, который заботится о правильном написании CSS, правильном размещении свойств, но данный редактор вам понравится.

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

Также в редакторе присутствует функция автозавершения кода.

7. Stylish Maker

Стандартный CSS редактор, который позволяет установить font, color, margin, border и другие свойства.

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

8. Simple CSS

Simple CSS также является простым редактором таблицы стилей. Он является бесплатным. Работу можно вести сразу с несколькими проектами. Есть функция предварительного просмотра, которая покажет как будет выглядеть класс или идентификатор после внесенных изменений.