Темизация Drupal урок 2 Верстаем главную страницу

admin друпал drupal

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

 

ВложениеРазмер
Файл portfolio-template.rar1.12 МБ

Комментарии

Добавить комментарий

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

У меня такая проблема:

У меня такая проблема: менюшка на голубом фоне все время жмется к левой части экрана, на видео она по центру на равне с логотипом сайта. Повторяю все как в видео. Пересматривал 3-4 раза. Копался в css, пробовал все, но не могу понять где еще рыть..

 

Я передумал, это плохой

Я передумал, это плохой вариант, чтобы убедиться, что он действительно плохой, поменяйте масштаб страницы ;)

 

Решил задачу так: 

#navigation ul.menu li 

display: inline-block;

}

 

#main-menu {

text-align: center;

}

После этого нужно подрихтовать меню, но там уже проще:

Добавить в #navigation li a{

margin-left: -3px;

margin-right: -3px;

}

 

Насколько это кошерно - не скажу, но результат тот, что нужен.

Нашел решение, подтему нужно

Нашел решение, подтему нужно создавать не в папке zen, а в папке тем 

вот, что написано в ридми:

For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it

    as sites/all/themes/foo.

после того, как вытащил папку с подтемой из папки zen все заработало.

часов 6 тупил по всему интернету, пока в ридми не залез ...

Здравствуйте)вот такой

Здравствуйте)
вот такой вопрос: пытаюсь добавить в шапку второй блок, который должен быть справа от лога-слогана. В друпале устанавливаю всё как на видео,  но блок добавляется почему-то не в блок Header, а в блок logo-slogan... и соответственно выравнивание у меня происходит именно в этом блоке, а не в header ... как решить эту проблему?

Делал все как на видео. В

Делал все как на видео. В Опере и FireFox смотрится нормально. Но в IE8 меню почемуто внизу страницы. И никак не получается его вернуть на место. Что делать в таких ситуациях?

 

 

спасибо за урок!можно

спасибо за урок!
можно попросить изображения из папки images(как разбирать psd в фотошопе понятно, хочется время на css потратить) 

Обернул содержимое #main

Обернул содержимое #main еще в #content-wrapper, но для него почему-то не получается установить бэкграунд-цвет или картинку, как будто он чем-то закрывается поверх. При этом если устанавливаю бэкграунд для #main, то все нормально работает, также все работает для footer-wrapper, если обернуть footer.

Также второй вопрос, подскажи, пожалуйста, как лучше сделать градиентные границы скажем для #content-wrapper, т.е. чтобы наша установленная ширина была ограничена и слева и справа не через border, а картинкой. Я видел оборачивали в два <div> и для первого картинку границы смещали налево, а для второго соот-но направо. Возможно есть другой путь?

Доброго времени суток. Во

Доброго времени суток.

Во первых хочу поздравить с наступившим Новым годом!

А во вторых задать вопрос.

Все делал как в видео, но footer не хочет слушаться 

В файле pages.css прописал как и в видео, 

но footer не центруется. 

247   .content-wrapper,

248   #footer{

249     width: 1000px;

250     margin: 0 auto;

251   } 

 header и main-menu центруются как и в видео 

в файле page.tpl.php

тоже все прописал: 

117   <div class="content-wrapper">

118     <div id="content" class="column" role="main">

119         <?php print render($page['highlighted']); ?>

120         <?php print $breadcrumb; ?>

121         <a id="main-content"></a>

122         <?php print render($title_prefix); ?>

123         <?php if ($title): ?>

124         <h1 class="title" id="page-title"><?php print $title; ?></h1>

125         <?php endif; ?>

126         <?php print render($title_suffix); ?>

127         <?php print $messages; ?>

128         <?php print render($tabs); ?>

129          <?php print render($page['help']); ?>

130         <?php if ($action_links): ?>

131         <ul class="action-links"><?php print render($action_links); ?></ul>

132         <?php endif; ?>

133         <?php print render($page['content']); ?>

134         <?php print $feed_icons; ?>

135     </div><!-- /#content --> 

Перенес sidebars136137<?php138      // Render the sidebars to see if there's anything in them.139      $sidebar_first  = render($page['sidebar_first']);140      $sidebar_second = render($page['sidebar_second']);141   ?>142143   <?php if ($sidebar_first || $sidebar_second): ?>144      <aside class="sidebars">145        <?php print $sidebar_first; ?>146       <?php print $sidebar_second; ?>147     </aside><!-- /.sidebars -->148   <?php endif; ?>149150</div>  Но низ страници не меняется, что может быть? Кеш чистилТема установлена Zen 7.x-5.1  

Вроде получилось В

Вроде получилось

В файле responsive-sidebars.css

#page,

.region-bottom {

  /* For screen sizes larger than 1200px, prevent excessively long lines of text

     by setting a max-width. */

  margin-left: auto;

  margin-right: auto;

 /* max-width: 1200px; */

}

Заменил на

#page,

.region-bottom {

  /* Для размеров экрана больше, чем 1200px, предотвращения чрезмерно длинных строк текста

     , путем установки max-width. */

  margin: 0 auto;

  max-width: 1000px; 

}

И footer стал центроваться,

Правильно ли я сделал?

 

В новой версии темы Zen нет

В новой версии темы Zen нет файла page.css я прописываю все изменения описанные в видео-уроке касаемые его в responsive.css пока все работает. Возможно нужно писать в другом файле? Скажите если я не прав, пожалуйста.

Иван, я заметил у вас при

Иван, я заметил у вас при добавление контента в поле body есть куча настроек для его редактирование. Подскажите пожалуйста как мне сделать так же. Модуль какой привинтить или настройки поменять?

При нажатии на любую ссылку

При нажатии на любую ссылку (кнопку) в главном меню выделяеться вся менюшка + пару пикселей сницу с правой стороны. Это не как не сказываеться на работоспособности ссылок, но меня дико раздражает и будет раздражать посетителей. Подскажите, пожалуйста, Иван, в чем там может быть дело.

Вопрос снят. Метод тыка себя

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

Решение: 

#navigation li a:hover {

background: #b2b1b1;

color: #00143f;

-webkit-border-radius: 15px 15px 0 0;

-moz-border-radius: 15px 15px 0 0;

border-radius: 15px 15px 0 0;

}

 

#navigation li a.active{

background: #f8141f;

color: #ffffff;

height: 80 px;

-webkit-border-radius: 15px 15px 0 0;

-moz-border-radius: 15px 15px 0 0;

border-radius: 15px 15px 0 0;

}

С помощью этого модуля можно

С помощью этого модуля можно сделать так чтобы вкладка к примеру "продукция"считалась активной когда человек переходит межуд разделами и страницами самой продукции, а не только ее основой страницы?

Перетащите на странице

Перетащите на странице Структура -Блок блок авторизации в Шапку сайта. Потом через *.сss (который вы используете) измените ширину и размеры полей. Как это сделать есть в видео уроках, смотрите.

Здравствуйте. Вот совсем для

Здравствуйте. Вот совсем для чайников. на 4:26. вы выделяете "header" и затем загорается окошко с иконками и внизу адрес на элемент. Как Вы это делаете??? Что это за окошко????

Добрый день!

Добрый день!

Иван, начал выполнять все по Вашим инструкциям, но обнаружил в файрбаге, что тема зен подсоеденяет спомощью тега link настройки CSS из файла default. Путь выглядит следующим образом <link media="all" href="http://drupal7/sites/default/files/css/css_b2oD-3xZ_ei5d2iJBru147xIluLCEhcGGbGFfEQRJpQ.css" rel="stylesheet" type="text/css">. Как мне подключить CSS по следующему пути: drupal7/sites/all/themes/zen/sitemade/css? Или я ошибаюсь, так и должно быть?

При много благодарен за

При много благодарен за статьи.
Хочу поинтересоваться, Я сейчас Делаю свою тему для Drupal 8 на базе Basic
сделал макет по минимуму изменяя файлы шаблона ... .html.twig .
Все максимум через CSS, и тут натолкнулся на проблему,- я не знаю как сделать так чтобы фон контента на главной страннице отличался от других странниц. В папке templates у меня есть только page.html.twig node.html.twig, я так понимаю, что они отвечают за отображение страниц.
можно ли как нибудь написать условие, мол если главная странница то задний фон такойта иначе такойта.

К сожалению я этих классов не

К сожалению я этих классов не нашел, или может быть не там искал. Сейчас опишу что у меня видно через Firebag в Mozilla

на странице
http://Мой сайт/
body id="site_body" class="role--anonymous no-sidebar"
div id="skip"
div class="layout-container with-navigation with-subnav"
header id="header"
div id="main"
div id="gp_container" class="container" Этому классу я присвоил задний фон который хочу поменять на других страницах
footer id="footer"

на странице
http://Мой сайт/
body id="site_body" class="page-node-3 section-node-3 role--anonymous with-subnav sidebar-first one-sidebar"
div id="skip"
div class="layout-container with-navigation with-subnav"
header id="header"
div id="main"
div id="gp_container" class="container" Этому классу я присвоил задний фон который хочу поменять на других страницах
footer id="footer"

из файлов в теме Basic есть
breadcrumb.html.twig
comment.html.twig
field--comment.html.twig
html.html.twig
menu.html.twig
menu-local-task.html.twig
menu-local-tasks.html.twig
node.html.twig
page.html.twig
status-messages.html.twig

Из догадок, а можно ли создать копию из page.html.twig и назвать её какнить page-front.html.twig и в ней подключить отдельно задний фон
или прописать условие на проверку если не главная страница то сменить фон.

и собственно нашел решение :)

и собственно нашел решение :)
в файле - page.html.twig
div class="layout-container with-navigation with-subnav"
div id="skip"
div class="layout-container with-navigation with-subnav"
header id="header"
div id="main"
далее было - div id="gp_container" class="container"
теперь стало - div {%if is_front%} id="gp_container" {% else %} id="node_container" {% endif %} class="container"

вуаля, все работает

Спасибо за то, что откликнулись на мой вопрос.

Всё ок спасибо.

Всё ок спасибо.

Подскажите еще по одному вопросу, хочу на D8 полностью отдельный шаблон для Sidebar first, как можно это реализовать?

Благодарен, за ответ, но эту

Благодарен, за ответ, но эту статью я, читал. Если вы меня сослали на нее, тогда если это возможно проверьте правильно ли я все понял.

в файле mytheme.info.yml у меня уже есть regions: sidebar_first: 'Sidebar first'.

в файле page.html.yml у меня есть

      {% if page.sidebar_first|render %}
        <aside id="sidebar-first" class="column sidebar first">
          {{ page.sidebar_first }}
        </aside><!-- /#sidebar-first -->
      {% endif %}

собирается page.sidebar_first из шаблона menu.html.twig, беда в том, что в исходном шаблоне который я взял, все меню собираются из menu.html.twig. Вот и задумался а можно как нить сделать sidebar.html.twig

 

Смотрите, за основу я брал

Смотрите, за основу я брал тему Basic, и начал обробатывать её. В задаче было изменить вид горизонтально меню, я этого добился не только изменением CSS но и пришлось править menu.html.twig. И когда я его изменил то те изменения перекачевали и на левый сайд бар. вот теперь ломаю голову как разделить.

К сожалению нет, именно макет

К сожалению нет, именно макет, если бы только CSS то ябы даже не спрашивал вас.

Простите меня, милостево. Виноват, и себе мозги и вам запудрил. Проблема оказалась в другом,- У меня в этом регионе были расположенны блоки Tools и User account menu у обоих категория "меню". Вот эти паразиты мне нервы и попортили. Попробывал другие блоки, из категории "меню" большая часть не взяла себе макет из menu.html.twig, но вот блок "Управление" тоже себе взял макет меню.

Дополняю дальше,-

в папке install есть block.block.mytheme_tools.yml в нем

langcode: en
status: true
dependencies:
  config:
    - system.menu.tools
  module:
    - system
  theme:
    - mytheme
id: mytheme_tools
theme: mytheme
region: sidebar_first
weight: 0
provider: null
plugin: 'system_menu_block:tools'
settings:
  id: 'system_menu_block:tools'
  label: Tools
  provider: system
  label_display: visible
  level: 1
  depth: 0
visibility: {  }

И того получается что мне нужно сменить шаблоны для отдельных блоков.