Изменить шаблон по макету дизайнера

У нас есть сайт на Joomla 2.5, на который установлен компонент JReviews. Нужно поменять шаблон этого компонента в соответствии с макетом дизайнера.

Компонент JReviews позволяет добавлять в него различные записи, чтобы пользователи могли оставлять свои отзывы и ставить рейтинг. Записи могут быть любыми, например, товары, отели, автомобили, актеры, фильмы и так далее. На нашем сайте, в этот компонент забиты университеты, колледжи и другие пту, чтобы пользователи сайта могли оставлять отзывы об этих учебных заведениях.

В компоненте JReviews есть много разных страниц, но нас интересует только две страницы (список институтов и страница просмотра института) и один модуль (модуль поиска институтов на главной странице)

Страница со списком институтов в стандартном шаблоне выглядит так http://gyan.debug.sommerce.com/index.php/institutes

Страница просмотра одного института в стандартном шаблоне выглядит так http://gyan.debug.sommerce.com/index.php/component/content/article/8-institutes/8-institute-4

Модуль поиска институтов выглядит так http://gyan.debug.sommerce.com/ (самый верхний модуль с полями Keywords, State и City). Модуль ищет институты по ключевому слову, штату и городу. Университеты находятся в Индии, где такое же административное деление как и в США на штаты и города.

К описанию проекта прилагается две картинки с дизайном страниц для списка институтов и страницей просмотра одного института. Требуется поменять шаблон компонента JReviews так, чтобы он выглядел как на этих картинках. Пожалуйста, отнеситесь аккуратно ко всем отступам, фонам и бордерам, они должны быть такими же, как на макете дизайнера. Все макеты в формате Photoshop.

Несколько функций из тех, которые изображены на макете ещё не реализованы и мы будем заказывать их позже. Эти элементы перечислены ниже:

1) Зелена кнопка Apply под картинкой института. Нужно сверстать такую же зеленую кнопку Apply и поместить её под картинку института. По её нажатию ничего не должно происходить

2) Фиолетовые иконки в правой нижней части каждого элемента в списке институтов. Нужно сверстать эти иконки и сделать, чтобы при наведении на них мышью всплывала подсказка, как это показано на макете дизайнера

На главной странице сайта есть модуль поиска институтов. Он очень похож на форму поиска на странице со списком институтов. Для модуля нет макета, а для формы поиска на странице со списком есть макет. Модуль поиска должен выглядеть точно также, как и форма поиска на странице со списком за исключением категорий, которые в модуле поиска не должны показываться (сейчас их и нет на главной странице).

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

Основные CSS файлы для компонента JReviews:

\templates\jreviews_overrides\views\themes\default\theme_css\theme.css - общие стили

\templates\jreviews_overrides\views\themes\default\theme_css\form.css - стили для элементов форм

\templates\jreviews_overrides\views\themes\default\theme_css\detail.css - стили для Detail page

\templates\jreviews_overrides\views\themes\default\theme_css\list.css - стили для Listing page

\templates\jreviews_overrides\views\themes\default\theme_css\modules.css - стили для модулей JReviews

Все CSS файлы лежат также в папке \templates\jreviews_overrides\views\themes\default\theme_css\

Картинки лежат в папке \templates\jreviews_overrides\views\themes\default\theme_css\images\ и новые картинки должны лежать именно в ней.

Файлы шаблонов для основных элементов компонента JReviews

\templates\jreviews_overrides\views\themes\default\listings\listings_header.thtml - элементы, которые идут перед началом списка листингов

\templates\jreviews_overrides\views\themes\default\listings\listings_blogview.thtml - шаблон списка листингов

\templates\jreviews_overrides\views\themes\default\listings\detail.thtml - страница одного листинга

\templates\jreviews_overrides\views\themes\default\modules\advanced_search.thtml - шаблон модуля поиска на главной странице

\templates\jreviews_overrides\views\themes\default\modules\listings.thtml - шаблон для блока Other Institutes на странице просмотра института

\templates\jreviews_overrides\views\themes\default\reviews\reviews.thtml - шаблон списка отзывов

\templates\jreviews_overrides\views\themes\default\reviews\user_reviews.thtml - еще один шаблон списка отзывов (какой-то из этих двух шаблонов используется при текущих настройках компонента)

\templates\jreviews_overrides\views\themes\default\reviews\review_layout.thtml - шаблон одного отзыва из списка