Руководство реселлера

Работа с удаленным сервером

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

Примечание: FTP-клиент – программа, установленная на Вашем компьютере, которая позволяет работать с файлами на удаленном сервере.

Вы можете получить доступ к Вашему сайту по протоколу FTP программы FileZilla (http://filezilla-project.org/ ) или Total Commander (http://www.ghisler.com/).

На электронный адрес, указанный Вами при регистрации, должно придти письмо от iBuildApp. Там Вы найдете доступы к Вашему FTP. Если Вы не нашли уведомления, то свяжитесь с нашей службой поддержки [email protected]. Настройте Вашу учетную запись FTP.

Если Вы не знаете, как настроить FTP, пожалуйста, обратитесь к технической документации:

В основном, процесс работы с Вашим клиентом FTP на Вашем веб-сайте сводится к следующим шагам:

  • Откройте клиент,
  • Введите имя хоста Вашего сайта, имя пользователя и пароль,
  • Нажмите кнопку "Соединиться" для того, чтобы получить доступ к каталогам на сервере.
Наверх
Настройка вашего сайта

Вам доступны 2 папки:

  • "design" где хранятся таблица стилей CSS, медиа-файлы, например, изображения. По умолчанию в папке размещено 2 файла: logo.png и style.css
    Разработка мобильных приложений
    Редактируя файл style.css, Вы можете менять внешний вид сайта в том числе размер шрифта, фоновые изображения и цвета и т.д. Вы можете загрузить любое количество медиа-файлов и заменить файл logo.png для того, чтобы Ваш сайт выглядел соответственно Вашим представлениям.
  • templates" , которые содержат шаблоны для Вашего сайта:
    Разработка мобильных приложений

"header.tpl" файл содержит разметку верхней части страницы:

Разработка мобильных приложений

"footer.tpl" файл содержит разметку нижней части страницы:

Разработка мобильных приложений

"index.tpl" содержит разметку заглавной страницы Вашего сайта.

"meta.tpl" сервисный файл содержит мета-слова и подключение css-файлов.

Наверх
Изменение стиля сайта

Для того, чтобы изменить внешний вид Вашего сайта, вам необходимо внести изменения в следующие файлы:

  • Header.tpl
  • Footer.tpl
  • Index.tpl
  • Styles.css
  • Style_new.css

Обратите внимание, что верхние и нижние секции встроены в заглавную страницу сайта. Для того, чтобы все страницы выглядели одинаково, необходимо внести изменения в 3 файла:

  • header.tpl,
  • footer.tpl, and
  • index.tpl.
Наверх
Добавление меню в ваш шаблон

Для того, чтобы изменить внешний вид Вашего сайта, вам необходимо внести изменения в следующие файлы:

  • header.tpl,
  • footer.tpl, and
  • index.tpl.

Следующие теги:

  • {$M_MENU} - Главное меню (в верхней части страницы)
  • {$B_MENU} - Нижнее меню (в нижней части страницы)

Поместите эти теги там, где вы бы хотели видеть меню.

Наверх
Изменение логотипа

Самый быстрый способ заменить логотип - создать изображение формата .png (200px в ширину и 70px в высоту) и заменить уже существующее:

  • Откройте Ваш клиент FTP, введите данные для доступа и подключитесь к серверу, на котором установлен Ваш сайт.
  • Разместите файл с логотипом в соответствующей папке. Затем, откройте папку на Вашем компьютере с Вашим логотипом, переименуйте файл в logo.png для того, чтобы избежать изменения ссылки на файл логотипа в шаблоне.
  • Загрузите Ваш логотип на сервер.
Наверх
"Кулинарная книга" по CSS

Если вам не хватает возможностей настройки сайта в административной панели, мы рекомендуем вам использовать CSS. Следующие хитрости помогут вам настроить ваш сайт с помощью CSS.

Стили, описанные ниже, находятся в файле new_style.css, который доступен по FTP. Вы можете добавить дополнительные стили, если необходимо. Вы также можете использовать файл style.css для создания ваших собственных стилей.

Логотип

Самый быстрый способ заменить логотип - создать изображение формата .png (200px в ширину и 40px в высоту) и заменить уже существующее:

  • Откройте Ваш FTP-клиент, введите данные для доступа и подключитесь к серверу, на котором установлен Ваш сайт.
  • Разместите файл с логотипом в соответствующей папке. Затем, откройте папку на Вашем компьютере с Вашим логотипом, переименуйте его в logo.png для того, чтобы избежать изменения ссылки на файл логотипа в шаблоне.
  • Загрузите Ваш логотип на сервер.

Если вы хотите использовать изображение, находящееся на удаленном сервере, измените стиль, как показано ниже:

#logo, #main_nav li #logo {
   background: url(REMOTE_SERVER/logo.png) no-repeat scroll 0 0 transparent;
}

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

#logo, #main_nav li #logo {
   height: 100px; //change logoheight
   width: 250px; //change logo width
}

Примечание: Мы рекомендуем использовать .png-изображения с прозрачным фоном.

Заголовок

Самый быстрый способ заменить бекграунд в шапке сайта - создать изображение формата .png (минимум 1px в ширину и 67px в высоту) и заменить уже существующее:

  • Откройте Ваш FTP-клиент, введите данные для доступа и подключитесь к серверу, на котором установлен Ваш сайт.
  • Разместите необходимый файл для фона в соответствующей папке. Затем, откройте папку на Вашем компьютере с Вашим изображением, переименуйте файл в top_bar_bg.png для того, чтобы избежать изменения ссылки на файл в шаблоне.
  • Загрузите Ваш логотип на сервер.

Если вы хотите использовать изображение, находящееся на удаленном сервере, измените стиль, как показано ниже:

#header .top_bar {
   background: url(REMOTE_SERVER /top_bar_bg.png) repeat-x;
}

Примечание: вы можете загружать изображения .jpg, .png, .gif

В приведенном ниже примере показано, как изменить ширину и высоту шапки:

#header .top_bar {
height: 100px; //change header height
}
.wrap {
   width: 1004px; //change header width
   margin: 0 auto;
   position: relative;
}

Если вы хотите, чтобы шапка сайта была растянута по ширине страницы, вставьте этот код:

#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

Верхнее меню

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

#main_nav li a {
   height: 40px;
   padding: 0px; //no indent between the items
   font: 10px/40px Arial, Helvetica, sans-serif; //set font size
   color: red; //red color of the menu items
   text-shadow: 0 1px 0 rgba(255,255,255,0.6);
   display: block;
}

Избавиться от границ в меню:

#main_nav li {
   height: 40px;
   border-right: none; //no borders In menu line
   float: left;
}

Второй уровень главного меню

Следующий пример демонстрирует способ настройки двух-уровневого меню:

.sub-menu {
   background: #EFEFEF !important; //box beckground
   border: 1px solid #fff; //box border
   -webkit-border-radius: 8px; //box border radius
   -moz-border-radius: 8px; // box border radius
   border-radius: 8px; // box border radius
   position: relative;
   padding: 6px 0 !important;
}
.sub-menu: after {
   background: url(/media/img/submenu_ugol.png) no-repeat 0 0; //upper arrow
   position: absolute;
   width: 24px; //arrow width
   height: 13px; //arrow height
   top: -13px; //arrow top position
   left: 20px; //arrow left position
   margin-left: -12px;
}

Для добавления элемента на второй уровень меню используйте следующий код:

#main_nav li a {
   height: 40px; //height od the ongle item
   padding: 0 28px;
   font: 16px/40px Arial, Helvetica, sans-serif;
   color: #000; //font colour
   text-shadow: 0 1px 0 rgba(255,255,255,0.6); //text-shadow
   display: block;
} Language toggle

Выбор языка

Измените положение переключателя языка:

#header .lang_switch {
   float: right; //the box floats to the right
   margin: 5px 30px;
   padding-right: 175px; //shift on the right
}

Настройка поведения переключателя языков::

#header .lang_switch li {
   background-color: #A0B0B6;
   background-image: -o-linear-gradient(top, #A0B0B6, #637881);
   background-repeat: repeat-x;
   border-radius: 4px;
   box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.298);
   display: block;
   position: relative;
}
#header .lang_switch a {
   background: url("/images/lang_arrow2.png") 95% 55% no-repeat transparent; //change    this image to change default arrows
   color: #FFFFFF;
   display: block;
   font-size: 12px;
   line-height: 1.8;
   margin: 3px 0px 0px;
   padding-left: 5px;
   padding-right: 20px;
   text-decoration: none;
   text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.298);
}

Social icons

To customize social icons presented on your website, create 3 images (56 px width & 58 px height each) and upload them to the server via FTP. Then modify styles as shown below:

#header .social_icons_new .facebook {
   background: url(images/facebook.png);
}
#header .social_icons_new .twitter {
   background: url(images/twitter.png);
}
#header .social_icons_new .rss {
   background: url(images/rss.png);
}

Для скрытия блока с социальными сетями, нужно отредактировать следующие стили:

#header .social_icons_new a {
   display:none; //hides the the social block
   float: left;
   width: 56px;
   height: 58px;
   background: url(images/sprite.png);
   margin: 0 5px;
}

Нижнее меню

Чтобы изменить цвет фона в нижней части сайта, создайте изображение формата .png и заменить уже существующее:

  • Откройте Ваш FTP-клиент, введите данные для доступа и подключитесь к серверу, на котором установлен Ваш сайт.
  • Разместите необходимый файл с фоном в соответствующей папке. Затем, откройте папку на Вашем компьютере с Вашим изображением, переименуйте файл в footer_pattern.png для того, чтобы избежать изменения ссылки на файл в шаблоне.
  • Загрузите Ваш логотип на сервер.

Если вы хотите использовать изображение, находящееся на удаленном сервере, измените стиль, как показано ниже:

#footer _int {
   background: url(REMOTE_SERVER / footer_pattern.png) repeat-x;
}

Примечание: в качестве фонового изображения, вы можете использовать файлы с расширением .jpg, .png, .gif

Следующий пример показывает, как можно изменить ширину и высоту области подвала (футера):

#footer_int .wrap {
   background: url(images/footer_shadow.png) no-repeat center top; //upper footer shadow
   padding: 22px 0;
}
.wrap {
   width: 1004px; //footer width
   margin: 0 auto;
   position: relative;
}

{t}If you want the footer area to fit the page width, include the following code:{/t} {literal}#header .top_bar {
   margin: 0 auto;
   width: 1004px; //change header width
}

Нижнее меню

CSS код, представленный ниже, описывает область нижнего меню:

#footer_int #footer_nav li {
   float: left;
   height: 12px;
   border-left: 1px solid #6f657d; //devider on the left
   padding: 0 12px;
}

Правило CSS для элементов нижнего меню:

#footer_int #footer_nav li a {
   color: #75727a; //item color
}

Создать сейчас!

Настройка кнопки "Создать новое приложение":

.border-gradient-title .border-center {
   display: inline-block;
   z-index: 10;
   position: relative;
   margin: 0 auto;
   width: auto;
   background-color: #fff; //background image
   padding: 0 10px;
}
.btn_border {
   padding: 9px;
   padding-bottom: 12px;
   border: 1px solid #DFDFDF; //background image
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
}
.btn_create_orange {
   font-size: 18px; //text color
   text-transform: uppercase;
   padding: 8px 20px 6px 13px;
   box-shadow: 0px 3px 0px #DB430D; //box shadow
   border: 0px;
   baclground: red; //box background
   -webkit-box-shadow: 0px 3px 0px #DB430D; //text shadow
}

Создание шаблона сайта с нуля

Вы можете создать шаблон сайта с нуля. Для того, чтобы быть уверены, что весь функционал работает с вашим шаблоном, придерживайтесь правил ниже:

  1. Мы используем SMARTY для работы с шаблонами, то есть ваш шаблон должен быть создан в стиле SMARTY.
  2. Для того, чтобы сделать ваш шаблон рабочим, вам придется загрузить 4 обязательных файла в папку Templates:
    • Index.tpl - главная страница
    • Header.tpl - header сайта
    • Footer.tpl - footer сайта
    • Meta.tpl
    Все другие файлы не обязательны. Но мы рекомендуем сохранять структуру шаблона, как упоминалось выше.
  3. Для того, чтобы иметь возможность редактировать меню из административной панели, вам нужно включить следующие теги:
    • {$M_MENU} - Главное меню (в верхней части страницы)
    • {$B_MENU} - Нижнее меню (в нижней части страницы)
    to these files:
    • Header.tpl
    • Footer.tpl
    • Index.tpl
    Разместите эти теги там, где вам бы хотелось видеть выходное меню.
  4. Для возможности переключения языков на вашем сайте, включите этот код в файлы index.tpl и header.tpl :

    {include file="common/reseller/lang_switch.tpl.php"}

    Localizations created in your Admin Panel will be used for your site.
  5. Для возможности изменения настроек Facebook & Twitter из административной панели, используйте следующие ключи в ваших ссылках:
    • #facebook#
    • #twitter#
Наверх
Заключение

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

Поскольку Вы строите твердую клиентскую базу и продолжаете угождать Вашим клиентам, Вы строите сильный, длительный фонд для дальнейшего успеха как торговый посредник услуг iBuildApp.

Наверх
Наверх
Спасибо!