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

Задача, которая мне предстояла, заключалась в следующем. В дополнение к существующему сайту, созданному на скрипте phpshop, необходимо было создать сайт с сходным дизайном, но уже на конструкторе redham. Проблема заключалась в ширине сайта: дизайн существующего сайта имел 100% ширину, т.е. на весь экран, а шаблоны, предлагаемые redham имели фиксированную ширину в 960 px.

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

В административной панели управления сайтом, выбираем пункт "Настройки", а затем пункт "Пользовательский CSS"

Увеличить

 

Далее, в окно:

Увеличить

 

вводим следующий код:

#header {width:100%;height:160px;}

#container {width:100%;}

#footer {width:100%;}

Первая строка определяет ширину и высоту заголовка, вторая - содержимое тела страниц сайта, а последняя строка определяет ширину подвала сайта. Вместо 100% ширины можно указать любое значение в px. Далее необходимо нажать кнопку "Сохранить" и изменения вступят в силу.

 

 

Увеличить

Для создания светло-зеленой полоски в шапке (а такая полоска есть в копируемом дизайне на первом сайте) необходимо загрузить образец на сайт и растянуть его по горизонтали.

Для загрузки рисунка образца, в административной панели управления выбираем пункт "Файлы" и загружаем файл: fon.png

Увеличить

 

Далее используется следующий код пользовательского CSS:

#header {background:url("../../filestore/fon.png") repeat-x;}

 

В итоге, можно сравнить дизайн обоих сайтов: sharlar.ru (скрипт phpshop) и showlar.ru (конструктор redham). Получилось довольно похоже.

 

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


#header {width:1170px;height:200px;}

#container {width:1170px;}
#header {background:url("../../filestore/fon.png") no-repeat;}
#footer {width:1170px;}

#header {width:1170px;height:200px;}

#container {width:1170px;}

#header {background:url("../../filestore/fon.png") no-repeat;}

#footer {width:1170px;}

 

Ширина сайта задется точным значением 1170px, а шапка вставляется рисунком fon.png. Посмотреть что получилсь.