Морские Круизы Атлантис Лайн - официальный портал
 

Инструкция по интеграции круизного модуля

Сайт www.atlantisline.ru предоставляет партнерам возможность интеграции сайт www.atlantisline.ru на сайт партнера

Эта возможность позволяет использовать функционал сайта www.atlantisline.ru для поиска круизов и оформления заявок на любые понравившиеся круизы

Сайт www.atlantisline.ru, интегрированный в партнерский сайт, будем называть «Круизным модулем». Круизный модуль может быть интегрирован на сайт двумя способами:

1. Интеграция в качестве iframe, направленного на www.atlantisline.ru, на сайте партнера

2. Размещение специальной ссылки, по нажатии на которую, открывается всплывающее окно сайтом www.atlantisline.ru, представленного пользователю как круизный модуль

Для интеграции в iframe с сайтом www.atlantisline.ru необходимо добавить HTML код на сайт, примерно следующего содержания:

<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]'></script>

Для интеграции в виде специальной ссылки, по нажатии на которую, открывается всплывающее окно с сайтом www.atlantisline.ru необходимо добавить HTML код на сайт, примерно следующего содержания:

<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&inshadow=1'></script>

 

 

Если для отображения круизного модуля Вы пожелаете использовать shadowbox ссылку, то для корректной работы Ваш сайт должен в заголовке содержать одну из нижеследующих строчек: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 

Это Doctype – он предназначен для указания типа документа, подробнее почитать о нем можно в справочной информации

 

Для изменения текста shadowbox ссылки вы можете изменить значение поля , на странице регистрации, на то, что вы хотите видеть внутри ссылки:

 

 

Если поле оставить пустым, то будет отображаться значение по умолчанию - название сайта www.atlantisline.ru

 

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

<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&css=[путь к файлу стилей]'></script>

ОПРЕДЕЛЯЕМ ТЕКСТОВЫЕ СТИЛИ ДЛЯ ФОРМЫ ПОИСКА

1. Изменение стиля заголовка круизного модуля для формы поиска

h2.popular_cruise_title
{
font-size: 17px !important; /* Размер шрифта */
}

h2.popular_cruise_title a
{
color: #d71216; /* Цвет сылки */
}

2. Изменение стилей заголовков над формами для модуля поиска

.search_color {

font-size: 13px !important; /* Размер шрифта */
color:#00478C; /* Цвет заголовка */
}
    

3. Изменение кнопки "Поиск" для формы поиска


.real_button300 {
color:#BAD8DC; /* Цвет текста */
}
	
    

4. Изменение кнопки "Очистить" для формы поиска

.real_button400 {
color:#BAD8DC; /* Цвет текста */
font-size:14px !important; /* Размер текста */
}

5. Изменение цвета границ у форм с выбором параметров для модуля поиска

.param_border select {
border-color:#10285A;
}    

6. Изменение цвета границ у текстбоксов для формы поиска

.param_ch {
/*этим классом Вы можете сами настроить отображение данного поля*/
}    

7. Добавление блока с изображением (блок находится вверху партнерского модуля).
К блоку применяется класс "block_for_partners" который Вы можете изменять. Например:

.block_for_partners { 
height: 100px; /* Указываем высоту блока */
background: #ff0 url(www.site.ru/test.jpg) no-repeat; /* Изменяем фон блока и устанавливаем изображение на background */
display: visible !important; /* Переключаем видимость блока (по умолчанию он не отображается - display: none; */
}

ОПРЕДЕЛЯЕМ ТЕКСТОВЫЕ СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ПОИСКА

1. Изменение стиля заголовка найденного круиза для результатов поиска

h2.popular_cruise_title
{
        font-size: 17px !important; /* Размер шрифта */
}

h2.popular_cruise_title a
{
color: #d71216; /* Цвет сылки */
}
    

2. Изменение стиля отображения цены и количества дней для результатов поиска


.price_cruise span.h5
{
color: #D71216; /* Цвет текста */
font-size: 19px; /* Размер шрифта */
}

    

3. Изменение стиля текста для результатов поиска


.price_cruise {
color:#000000; /* Цвет текста */
font-size:14px; /* Размер шрифта */
}

    

4. Изменение стиля текста для результатов поиска


.appertures small.small_text_cruise {
color:#D71216 !important; /* Цвет текста */
}
    

5. Изменение стиля текста для результатов поиска


.date_company_liner_container_r {
color:#000000; /* Цвет текста */
font-size:14px;  /* Размер шрифта */
line-height:16px; /* Расстояние между строками */
}
    

6. Изменение стиля текста для результатов поиска


.date_company_liner_container_r span {
color:#D71216 !important; /* Цвет текста и ссылок */
}
    

7. Изменение стиля других дат для результатов поиска


.crusise_item b a {
color:#333333; /* Цвет сылки */
}

.appertures b a {
font-size:11px; /* Размер шрифта */
}
    

Изменение цветовой схемы и изображений

ОПРЕДЕЛЯЕМ ГРАФИЧЕСКИЕ СТИЛИ ДЛЯ МОДУЛЯ ПОИСКА

1. Изменение шапки модуля поиска

.popular_cruises_head1 {
background:url("../img/atl/hed/111.png") no-repeat scroll left top transparent; /* фоновое изображение */
}
    

2. Изменение фона под шапкой модуля поиска

.header_modules_part {
background:url("../img/searchlist.png") no-repeat scroll left top #FFFFFF; /* фоновое изображение */
}
    

3. Изменение фона под заголовком модуля / верхняя часть модуля поиска

.header_modules_1 {
background:url("../img/search_header.png") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
    

4. Изменение центральной части модуля поиска

.header_modules_2 {
background:url("../img/search_middle.png") repeat-y scroll 0 0 transparent; /* фоновое изображение */
}
    

5. Изменение нижней части модуля поиска

.header_modules_3 {
background:url("../img/search_bottom.png") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
    

6. Изменение кнопки "Поиск" в модуле поиска


.real_button300 {
background-image:url("../img/atl/button_search.png"); /* фоновое изображение */
}
	
    

7. Изменение кнопки "Очистить" в модуле поиска

.real_button400 {
background-image:url("../img/atl/button_clear.png"); /* фоновое изображение */
}
    

ОПРЕДЕЛЯЕМ ГРАФИЧЕСКИЕ СТИЛИ ДЛЯ РЕЗУЛЬТАТОВ ПОИСКА

1. Изменение шапки модуля при выводе результатов поиска

.crusise_item {
background:url("../img/arr_t_r.jpg") no-repeat scroll right 25px transparent; /* фоновое изображение */
}

2. Изменение основного фона при выводе результатов поиска

.search_item {
background:url("../img/bg_cruise_main.jpg") repeat-x scroll left bottom #F2F4F5; /* фоновое изображение */
}
    

3. Изменение правого нижнего угла при выводе результатов поиска

.r_col_cruise {
background:url("../img/arr_b_r.jpg") no-repeat scroll right bottom transparent; /* фоновое изображение */
}
    

4. Изменение левого нижнего угла при выводе результатов поиска

.cruise_table {
background:url("../img/arr_b_l.jpg") no-repeat scroll left bottom transparent; /* фоновое изображение */
}
    

5. Изменение левой части модуля при выводе результатов поиска

.inner_arr_t_l {
background:url("../img/inner_arr_t_l.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
    

6. Изменение правой части модуля при выводе результатов поиска

.inner_arr_t_r {
background:url("../img/inner_arr_t_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
    

7. Изменение левой части верхнего информационного блока при выводе результатов поиска

.date_company_liner_container {
background:url("../img/date_company_liner_container.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
    

8. Изменение правой части верхнего информационного блока при выводе результатов поиска

.date_company_liner_container_r {
background:url("../img/date_company_liner_container_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
    

9. Изменение горизонтального разделителя при выводе результатов поиска

.separate_cities {
background:url("../img/separate_cities.gif") no-repeat scroll center bottom transparent; /* фоновое изображение */
}
    

10. Изменение верхней границы нижнего блока при выводе результатов поиска

.sh_cruise_price {
background:url("../img/sh_cruise_price.gif") repeat-x scroll 0 0 transparent; /* фоновое изображение */
}
    

11. Изменение левой части в нижнем блоке при выводе результатов поиска

.price_cruise_bg_l {
background:url("../img/price_cruise_bg_l.gif") no-repeat scroll 0 0 transparent; /* фоновое изображение */
}
    

12. Изменение правой части в нижнем блоке при выводе результатов поиска

.price_cruise_bg_r {
background:url("../img/price_cruise_bg_r.gif") no-repeat scroll right top transparent; /* фоновое изображение */
}
    

МЕНЯЕМ СТИЛИ ВЫВОДА КРУИЗА

1. Изменение рамки вокруг карты

.cruise_map_big
{
background: url(www.site.ru/image.jpg) no-repeat !important;
}

2. Изменение рамки у выбранного пункта

.tabnav a {
border: 1px solid #96DDC3;
border-bottom: none;
}
    

3. Изменение рамки у неактивного пункта

.tabNav span {
border-bottom: 1px solid #CAF4E5;
}
    

4. Изменение стиля оформления заголовков таблицы

.cruise_info_table thead th {
background-color: #96DDC3; /* Цвет фона */
border:1px solid #96DDC3;  /* Параметры границ таблицы */
 color: #171846; /* Цвет текста в заголовках */
   
    

5. Изменение границ таблицы

.cruise_info_table tbody td {
background-color: #96DDC3; /* Цвет фона */
 border:1px solid #96DDC3;  /* Параметры границ таблицы */
color: #171846; /* Цвет текста в заголовках */ 
}
    

6. Изменение фонового изображения у кнопок

/* Неактивная кнопка */
.real_button {
background-image: url("../img/real_btn5.png");  /* картинка кнопки */
    color: #FFFFFF !important;  /* цвет шрифта */
font-size: 18px !important; /* размер шрифта */
    width: 200px !important; /* ширина кноки */
}
/* Активная кнопка */
.real_button:hover {
background-image: url("../img/real_btn5.png"); /* картинка кнопки */
background-position: -200px 0 !important; /* полодение картинки */
}

    

Файл со стилями Вы можете скачать по ссылке www.atlantisline.ru/cruisesmodule.css

Затем Вам нужно поместить этот файл на свой ресурс. Предположим это "www.mysite.ru". В итоге скрипт будет выглядеть следующим образом:

<script type='text/javascript' language='javascript' src='http://www.atlantisline.ru/AgentCode.ashx?partnerId=[ваш идентификатор]&css=http://www.mysite.ru/cruisesmodule.css'></script>

Если Вы не знакомы веб-версткой, для настройки стилей обращайтесь к профессионалам.