Устройство шаблона Zappa - Joomla 1.5: Шаблоны, разметка и макеты вывода

Не могу разобраться, как придать определенный стиль параграфу. Может в английском не очень? На этой странице показаны примеры оформеленя с кодом http://www.joomlajunkie.com/demo/commercial/zappa/index.php?option=com_content&view=article&id=21&Itemid=50 , вот только не могу понять куда этот код помещать. Например, хочу, чтоб определенный параграф ограничивался сверху и снизу зелеными полосками. Беру этот код < p class="color-green" > и что потом? Куда его помещать и как?

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

[вложение удалено Администратором]

Последовательность действий была такой. Выключил визуальный редактор в настройках Joomla и дальше начинаем работать с тегами. В результате, чтобы оформить параграф в цвете класса "инфо" нужен такой тег <p> class="info" >здесь мой текст</p>
Итак получилось.
Но по-прежнему не могу оформить теперь уже список. К этому шаблону для списка, в котором каждый пункт начинается с зеленой галочки, нужно это -> class "li-style1"
Однако запись типа <li class "li-style1" >тут текст моего первого пункта в списке</li> вывела на экран обычную точку вместо зеленой галки. В тегах я не шарю, но вроде делаю все логично. Поэтому помогите советом пожалуйста.

Погуглив, изучил слегка тег <li>

Все равно безрезультатно. Ни с параметром type, ни с параметром  list-style-type галки не появляются, т.е. сейчас у меня так

<li type="li-style1">пример1</li>
   <li>пример2</li>
   <li type="li-style1">пример3</li>

Еще есть в папке со стилями файл typography.css а в нем такой код

/*Lists Style
*****************************************/
jjPrimary ul, #jjSecondary ul {
   list-style-position: inside;
}
#jjPrimary ol, #jjSecondary ol {
   padding: 0;
   list-style-position: inside;
}
#jjPrimary ol li {
   padding: 2px 0 2px 5px;
}
#jjPrimary ul ul, #jjPrimary ul ul ul, #jjPrimary ul ul ul ul {
   margin-left: 25px;
}
#jjPrimary ol ol, #jjPrimary ol ol ol, #jjPrimary ol ol ol ol li, ul.li-style1, ul.li-style2, ul.li-style3, ul.li-style4 {
   padding-left: 2px;
   margin-left: 0;
}
ul.li-style1 li, ul.li-style2 li, ul.li-style3 li, ul.li-style4 li {
   list-style: none;
   margin-left: 0;
   padding-bottom: 3px;
   margin-bottom: 5px;
   padding-left: 21px;
   #padding-left: 8px;
}
ul.li-style1 li {
   background: url(../images/li-style1.jpg) no-repeat -1px 1px;
}
ul.li-style2 li {
   background: url(../images/li-style2.jpg) no-repeat 0px 2px;
}
ul.li-style3 li {
   background: url(../images/li-style3.jpg) no-repeat 0px 1px;
}
ul.li-style4 li {
   background: url(../images/li-style4.jpg) no-repeat 0px 1px;
}

Скажите что делать?

не <p> class="info" >здесь мой текст</p>,
а <p class="info" >здесь мой текст</p>.

и не <li class "li-style1" >,
а <ul class="li-style1">.

у них же на сайте все расписано, открывай исходный код и смотри.

Да с параграфом в посте я просто опечатался. А за список спасибо. Не догадался посмотреть исходный код страницы.

Надо в заглавие модуля вставить иконки. У Zappa в позиции user2 (это внизу страницы) можно вставить сразу до 4 модулей. Вот я хочу к каждому заголовку добавить какую нибудь иконку. Изначально было как на картинке pic1. Чтобы добавить иконки решил, что надо менять стили для модуля. Поэтому стал редактировать файл /templates/zappa/css/modules.css. Добавил туда такой код
<code>/*user2 module adjustments*/

#jjUser2 .moduletable-alt h3   {
   background-image: url(../images/myicon.png);
   background-repeat: no-repeat;

   background-position: 1% 50%;

   padding-left: 75px;

   margin: 10;

   padding: 10;

   line-height: 35px;

}





#jjUser2 .moduletable-alt ul li   {
   padding-left: 10px;
   margin: 10px;   

   list-style-type: none;

   border-top: 1px solid #FFF;

   line-height: 17px;

   border-bottom: 1px solid #E0EDEF;

   /*[disabled]height:24px;*/
}


#jjUser2 .moduletable-alt ul li a   {

   padding: 0 0 0 10px;

   color: inherit;

   display: block;

}

#jjUser2 .moduletable-alt ul li a:hover   {

   background: #ECF9FB;

   display: block;

} </code>
Затем в настройках каждого из трех модулей указал суффикс -alt. В результате у меня получилось как на картинке pic2. Не могу их выстроить в одну линию как было, чтобы по горизонтали шли друг за другом. Подскажите, что делать?

[вложение удалено Администратором]

может кто знает как заставить отображаться картинку с кроликом в шаблоне JJ Zappa и как (каким модулем) ее контролировать в последующем?