Программа SIteEdit предоставляет возможность работы с CSS кодом вашего проекта, рассмотрим простой способ работы с ним. Нам потребуется программа SiteEdit и браузер, например Google Chrome. 

 

 

Изменение существующих настроек

 

Для примера возьмем модуль "Фотоальбом-слайды". Все фотографии модуля встали в один столбец

 

 

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

 

 

В браузере, щелкаем правой клавишей мыши по нужному нам объекту и выбираем пункт "Посмотреть код" или подобный, в зависимости от браузера.

 

 

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

 

 

В нашем случае, мы выбираем блок с фотографией и видим его настройки

 

 

Где:

.photoAlbumAdapt .obj - слой, в котором находятся настройки для данного элемента

style.css:1 - файл, в котором находятся настройки ("1" это номер строки, на которой находятся настройки в этом файле)

 

В этом же редакторе мы можем изменять любые настройки и моментально видеть их результат. Изменим параметр "display: block" на "display: inline-block" , тем самым все фотографии встанут в один ряд.

 

 

 

Теперь необходимо провести эти настройки в программе SiteEdit. Для этого нам потребуется открыть редактор дизайна (клавиша F4) и на нем выбрать вкладку "Модули", на которой необходимо найти используемый нами модуль "afoto_slide"

 

 

Теперь открываем редактор CSS (клавиша F3) и перед нами откроется файл стилей данного модуля, тот самый style.css, где на первой строке мы видим нужные нам настройки

 

 

Вносим наши изменения в параметр "display: block" и сохраняем

 

 

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

 

 

 

Добавление новых настроек

 

Суть работы остается примерно той же, но все же есть определенные нюансы. Вам так же необходимо открыть редактируемую страницу в браузере, включить инспектор элементов (клавиша F12 в браузере) и выделить нужный вам объект. Если у этого объекта еще нет каких либо CSS настроек, то вы можете их добавить при помощи специальной кнопки "+". Будет создан отдельный стиль для выбранного вами элемента

 

 

В этом стиле вы можете провести нужные вам настройки. Для примера, зададим фон выбранному блоку параметром background-color: antiquewhite;

 

 

Если результат нас устраивает, просто копируем все содержимое нужной нам настройки и вставляем его в редактор CSS программы

 

 

Главное не перепутать, в каком именно файле стилей мы устанавливаем свою настройку. Чаще всего, все основные настройки помещаются в default.css и именно он открывается в программе по умолчанию.