Перейти к содержимому


Фотография
- - - - -

Как добавить свою шапку на сайт клана?

шапка дизайн-пак css шаблоны

Лучший Ответ NeLo, 19 Июнь 2016 - 13:29

Добавьте в основной шаблон-каркас страниц сайта (main.twig, см. структура шаблонов) между плейсхолдерами меню и админ сайдбара следующий код:
<div class="row">
    <div class="col-xs-12 text-center">
        <img src="{{ image('header.jpg') }}" style="width: 100%; height: 250px; margin-top: 50px" />
    </div>
</div>
Где header.jpg – путь к изображению шапки (директория images, см. структура дизайн-пака).
Вместо изображения из дизайн-пака можно подставить прямую ссылку на картинку в интернете (не рекомендуется, т.к. эту картинку могут удалить, а изображение из дизайн-пака будет доступно на протяжении всего времени использования сайта).
 
Далее можно подправить стили изображения:
width - ширина, 100% означает растянуть на всю ширину экрана
height - высота
margin-top - отступ от меню (чтобы не перекрывало шапку)
 
Класс "text-center" делает изображение в блоке по центру, уберите его если это Вам не подходит.
Можете также добавить дополнительные стили по своему усмотрению.
Хорошей практикой будет перенос всего CSS кода в файлы с расширением .css (об этом ниже).
 
В итоге должно получиться примерно так:
<div class="wrap">
    {{ MENU|raw }}

    <div class="row">
       <div class="col-xs-12 text-center">
           <img src="{{ image('header.jpg') }}" style="width: 100%; height: 250px; margin-top: 50px" />
       </div>
    </div>

    {{ ADMIN_SIDEBAR|raw }}

    ...
</div>
Для того, чтобы убрать лишний отступ между содержимым страницы и шапкой, объявите CSS:
.wrap > .container {
    padding: 20px 15px 20px !important;
}
Можно прописать это непосредственно в коде шапки, между <style> и </style>, но лучше сделать правильным путем:
 
1. Создать новый CSS файл (например, my_styles.css) и поместить в него стили, указанные выше.
2. Положить этот файл в директорию styles со стилями дизайн-пака.
3. В основной шаблон-каркас страниц сайта добавить строчку (не в комментариях {# ... #}, будьте внимательны, все написанное между этими тегами игнорируется шаблонизатором):
{{ style('my_styles.css') }}
(см. использование CSS, Javascript и изображений в шаблонах)
 
Результат:
 
1-clan-site-header.png
Перейти к сообщению


  • Закрытая тема Тема закрыта
Сообщений в теме: 2

#1 GRiM

GRiM

    Пользователь

  • Участники
  • PipPip
  • 16 сообщений

Отправлено 19 Июнь 2016 - 05:27

Можно ли создать контейнер с шапкой сайта?


Сообщение отредактировал NeLo: 19 Июнь 2016 - 12:22
Заголовок темы изменен для помощи другим пользователям найти ответ на похожий вопрос

  • NeLo это нравится

#2 NeLo

NeLo

    Разработчик

  • Guildmaker Team
  • PipPipPipPipPipPipPipPip
  • 794 сообщений

Отправлено 19 Июнь 2016 - 13:29   Лучший Ответ

Добавьте в основной шаблон-каркас страниц сайта (main.twig, см. структура шаблонов) между плейсхолдерами меню и админ сайдбара следующий код:
<div class="row">
    <div class="col-xs-12 text-center">
        <img src="{{ image('header.jpg') }}" style="width: 100%; height: 250px; margin-top: 50px" />
    </div>
</div>
Где header.jpg – путь к изображению шапки (директория images, см. структура дизайн-пака).
Вместо изображения из дизайн-пака можно подставить прямую ссылку на картинку в интернете (не рекомендуется, т.к. эту картинку могут удалить, а изображение из дизайн-пака будет доступно на протяжении всего времени использования сайта).
 
Далее можно подправить стили изображения:
width - ширина, 100% означает растянуть на всю ширину экрана
height - высота
margin-top - отступ от меню (чтобы не перекрывало шапку)
 
Класс "text-center" делает изображение в блоке по центру, уберите его если это Вам не подходит.
Можете также добавить дополнительные стили по своему усмотрению.
Хорошей практикой будет перенос всего CSS кода в файлы с расширением .css (об этом ниже).
 
В итоге должно получиться примерно так:
<div class="wrap">
    {{ MENU|raw }}

    <div class="row">
       <div class="col-xs-12 text-center">
           <img src="{{ image('header.jpg') }}" style="width: 100%; height: 250px; margin-top: 50px" />
       </div>
    </div>

    {{ ADMIN_SIDEBAR|raw }}

    ...
</div>
Для того, чтобы убрать лишний отступ между содержимым страницы и шапкой, объявите CSS:
.wrap > .container {
    padding: 20px 15px 20px !important;
}
Можно прописать это непосредственно в коде шапки, между <style> и </style>, но лучше сделать правильным путем:
 
1. Создать новый CSS файл (например, my_styles.css) и поместить в него стили, указанные выше.
2. Положить этот файл в директорию styles со стилями дизайн-пака.
3. В основной шаблон-каркас страниц сайта добавить строчку (не в комментариях {# ... #}, будьте внимательны, все написанное между этими тегами игнорируется шаблонизатором):
{{ style('my_styles.css') }}
 
Результат:
 
1-clan-site-header.png

Сообщение отредактировал NeLo: 19 Июнь 2016 - 13:34

  • GRiM это нравится

#3 GRiM

GRiM

    Пользователь

  • Участники
  • PipPip
  • 16 сообщений

Отправлено 20 Июнь 2016 - 14:04

Работает  :rolleyes:


  • NeLo это нравится





Темы с аналогичным тегами шапка, дизайн-пак, css, шаблоны

Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных




Яндекс.Метрика