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

Итак, переходим на сайт www.websitetemplates.bz и выбираем понравившийся шаблон. Я выбрал этот...

Переходим по ссылке View Live Demo...

И вот он наш шаблон. Но при просмотре исходного кода видно, что сам шаблон открывается во фрейме. Обойдем это.

<iframe id="demo_frame" src="http://www.websitetemplates.bz/demos/ ... demo/index.html">
  http://www.websitetemplates.bz/demos/ ... livedemo/index.html"
  style="border:0px;width:100%;height:500px">
</iframe>


Открываем шаблон по ссылке во фрейме

И нам доступен шаблон.

У меня браузер FIREFOX, рекомендую и вам им пользоваться, так как все операции буду давать в браузере FIREFOX

Итак, Вид -> Исходный код страницы

В удобном для нас месте создаем папку с именем webtemp, в ней создаем пустой файл, который переименовываем в index.html, куда и копируем исходный код страницы.

Попробуйм открыть этот файл в браузере...

Да... Это совсем не то, что мы видели на сайте. Но надо прикрепить стили, картинки...

Переходим по адресу http://www.websitetemplates.bz/demos/ ... vedemo/themes/1208_adult/

и копируем в папку webtemp все файлы и паки в той же самой иерархии.

По адресу http://www.websitetemplates.bz/demos/0463/livedemo/images/ копируем все файлы и папки в папку images

У нас должно получиться так:

Правим файл index.html:

строка 19-20

<link rel="stylesheet" type="text/css" media="screen" href="xoops.css" />
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />


удаляем ненужный styleNN.css

Открываем еще раз файл index.html. Не хватает картинок...

Правим все ссылки на картинки в файле index.html  на  примерно такие src="images/logo.jpg

Обновляем страницу - Ищем разницу с исходником...