В этом уроке мы будем верстать главную страницу сайта, исходинки прекрепляю ниже, демо появится сразу как закончу серию уроков по темизации.
Вложение | Размер |
---|---|
portfolio-template.rar | 1.12 МБ |
В этом уроке мы будем верстать главную страницу сайта, исходинки прекрепляю ниже, демо появится сразу как закончу серию уроков по темизации.
Вложение | Размер |
---|---|
portfolio-template.rar | 1.12 МБ |
Комментарии
Добавить комментарий
У меня такая проблема:
У меня такая проблема: менюшка на голубом фоне все время жмется к левой части экрана, на видео она по центру на равне с логотипом сайта. Повторяю все как в видео. Пересматривал 3-4 раза. Копался в css, пробовал все, но не могу понять где еще рыть..
Присоединяюсь к вопросу...
Присоединяюсь к вопросу...
кажется, разобрался. в
кажется, разобрался.
в pages.css нужно добавить margin-left для #main-menu:
#main-menu{
margin-left: 445px;
}
Или определить #main-menu
Или определить #main-menu также, как и header
Отлично! спасибо! второй
Отлично! спасибо! второй вариант сработал!
А не просветите в каком файле
А не просветите в каком файле переопределять main-menu?
Всё разобрался. Просто в
Всё разобрался. Просто в navigation.css прописываем
#main-menu {
width: 1000px;
margin: 0 auto;
}
Я передумал, это плохой
Я передумал, это плохой вариант, чтобы убедиться, что он действительно плохой, поменяйте масштаб страницы ;)
Решил задачу так:
#navigation ul.menu li
display: inline-block;
}
#main-menu {
text-align: center;
}
После этого нужно подрихтовать меню, но там уже проще:
Добавить в #navigation li a{
margin-left: -3px;
margin-right: -3px;
}
Насколько это кошерно - не скажу, но результат тот, что нужен.
Здравствуйте!Такая проблема.
Здравствуйте!
Такая проблема. Изменяю все как в видео, однако на сайте тема не меняется. Кэш чистил.
в чем может быть проблема?
Поддерживаю, такая же
Поддерживаю, такая же проблема
Нашел решение, подтему нужно
Нашел решение, подтему нужно создавать не в папке zen, а в папке тем
вот, что написано в ридми:
после того, как вытащил папку с подтемой из папки zen все заработало.
часов 6 тупил по всему интернету, пока в ридми не залез ...
Здравствуйте)вот такой
Здравствуйте)
вот такой вопрос: пытаюсь добавить в шапку второй блок, который должен быть справа от лога-слогана. В друпале устанавливаю всё как на видео, но блок добавляется почему-то не в блок Header, а в блок logo-slogan... и соответственно выравнивание у меня происходит именно в этом блоке, а не в header ... как решить эту проблему?
Здравствуйте, проверьте
Здравствуйте,
проверьте закрывающие и открывающие теги, где-то у вас не закрытый тег, из-за этого часто верстка едет.
Здравствуйте! Подскажите, в
Здравствуйте!
Подскажите, в чем может быть ошибка.
Прописываю границы пунктов меню, однако ничего не меняется.
Заранее спасибо!
Найдите через firebug id
Найдите через firebug id вашего меню и напишите следующее:
#idmenu li{
border: 1px solid #color;
}
Здравствуйте! Пытаюсь сделать
Здравствуйте!
Пытаюсь сделать границы у меню, однако ничего не выходит. По видео все туда прописываю.
Спасибо!
Найдите id вашего меню через
Найдите id вашего меню через firebug и напишите следующее
#idmenu ul{
border: 1px solid #color;
}
Делал все как на видео. В
Делал все как на видео. В Опере и FireFox смотрится нормально. Но в IE8 меню почемуто внизу страницы. И никак не получается его вернуть на место. Что делать в таких ситуациях?
Проверять верстку, наверно в
Проверять верстку, наверно в <div id="navigation"> какой-то стиль поменяли и теперь absolute не работает. Поставьте чистый zen, посмотрите как там все сверстано.
спасибо за урок!можно
спасибо за урок!
можно попросить изображения из папки images(как разбирать psd в фотошопе понятно, хочется время на css потратить)
хмм.. наверно таких
хмм.. наверно таких исходников у меня уже не осталось.
Подскажите, какая версия Zen
Подскажите, какая версия Zen используется? Такое ощущение, что она сильно обновилась со времен написания урока.
Да изменилась версия Zen, я
Да изменилась версия Zen, я использовал 3.1, сейчас уже 5.2. Но друпал 7 и html/css такие же остались.
Обернул содержимое #main
Обернул содержимое #main еще в #content-wrapper, но для него почему-то не получается установить бэкграунд-цвет или картинку, как будто он чем-то закрывается поверх. При этом если устанавливаю бэкграунд для #main, то все нормально работает, также все работает для footer-wrapper, если обернуть footer.
Также второй вопрос, подскажи, пожалуйста, как лучше сделать градиентные границы скажем для #content-wrapper, т.е. чтобы наша установленная ширина была ограничена и слева и справа не через border, а картинкой. Я видел оборачивали в два <div> и для первого картинку границы смещали налево, а для второго соот-но направо. Возможно есть другой путь?
Насчет градиента в границах
Насчет градиента в границах блока не уверен, можете воспользоваться для генерации градиента каким-нибудь сервисов, например этим:
http://www.colorzilla.com/gradient-editor/
Доброго времени суток. Во
Доброго времени суток.
Во первых хочу поздравить с наступившим Новым годом!
А во вторых задать вопрос.
Все делал как в видео, но 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 стал центроваться,
Правильно ли я сделал?
Слетели кнопки для
Слетели кнопки для перемещения материала вверх вниз (крестик с стрелками на концах), как их востановить, подскажите пожалуйста.
Проверьте позиционирование,
Проверьте позиционирование, чтобы у кнопок был position: absolute, а у одного из родительских блоков был position: relative;
Я имею виду в самом drupal в
Я имею виду в самом drupal в блоках нет возможности выстраивать материал перетаскиванием отдельных пунктов верх вниз.
подсказали решение на другом
подсказали решение на другом сайте. Нужно отключить вес строк.
В новой версии темы Zen нет
В новой версии темы Zen нет файла page.css я прописываю все изменения описанные в видео-уроке касаемые его в responsive.css пока все работает. Возможно нужно писать в другом файле? Скажите если я не прав, пожалуйста.
Писать можно в любом файле,
Писать можно в любом файле, который подключен в файле .info, везде будет работать.
Иван, я заметил у вас при
Иван, я заметил у вас при добавление контента в поле body есть куча настроек для его редактирование. Подскажите пожалуйста как мне сделать так же. Модуль какой привинтить или настройки поменять?
Установите модуль CKeditor,
Установите модуль CKeditor, инструкция в readme модуля. Я использовал модуль WYSIWYG в связке с IMCE, WYSIWYG IMCE. Для загрузки фотографий нужен будет модуль IMCE.
При нажатии на любую ссылку
При нажатии на любую ссылку (кнопку) в главном меню выделяеться вся менюшка + пару пикселей сницу с правой стороны. Это не как не сказываеться на работоспособности ссылок, но меня дико раздражает и будет раздражать посетителей. Подскажите, пожалуйста, Иван, в чем там может быть дело.
Иван, у вас есть урок о том
Иван, у вас есть урок о том как сделать меню ввиде закладок? Если да умоляю дайте ссылку.
Я имею виду как сделать
Я имею виду как сделать закгругление кнопок исключительно сверху.
Вопрос снят. Метод тыка себя
Вопрос снят. Метод тыка себя оправдал. На углы действует тоже правило что и на строны и можно задать значение для каждого свое.
Решение:
#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;
}
Есть подобный модуль в виде
Есть подобный модуль в виде табов:
https://drupal.org/project/quicktabs
В подмодуле есть модуль стилей quick tabs styles, там можно оформить как вкладки.
С помощью этого модуля можно
С помощью этого модуля можно сделать так чтобы вкладка к примеру "продукция"считалась активной когда человек переходит межуд разделами и страницами самой продукции, а не только ее основой страницы?
Наверно такого модуля нет, но
Наверно такого модуля нет, но думаю можно на javascript проверять путь и вызывать активную вкладку табов.
Подскажите, а как можно
Подскажите, а как можно поместить поле авторизации в header и сделать его в одну строку, и уменьшить размеры полей?
Перетащите на странице
Перетащите на странице Структура -Блок блок авторизации в Шапку сайта. Потом через *.сss (который вы используете) измените ширину и размеры полей. Как это сделать есть в видео уроках, смотрите.
Подскажите пожалуйста, что
Подскажите пожалуйста, что нужно сделать чтобы, кроме content на главной странице отображались так же и sidebars?
Заранее благодарен
Просто добавляйте в блоки в
Просто добавляйте в блоки в регионы, если в шаблоне page.tpl.php или page--front.tpl.php есть вывод этих регионов, то блоки появятся.
Здравствуйте. Вот совсем для
Здравствуйте. Вот совсем для чайников. на 4:26. вы выделяете "header" и затем загорается окошко с иконками и внизу адрес на элемент. Как Вы это делаете??? Что это за окошко????
Здравствуйте, скорее всего вы
Здравствуйте, скорее всего вы про DOM-инспектор он включается обычно на кнопку F12 в большинстве браузеров. Я использую firebug в firefox:
https://addons.mozilla.org/ru/firefox/addon/firebug/
Добрый день!
Добрый день!
Иван, начал выполнять все по Вашим инструкциям, но обнаружил в файрбаге, что тема зен подсоеденяет спомощью тега 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, я так понимаю, что они отвечают за отображение страниц.
можно ли как нибудь написать условие, мол если главная странница то задний фон такойта иначе такойта.
Используйте классы в теге
Используйте классы в теге body, обычно там уже добавлены классы .front для главной и .not-front для всех остальных страницы.
К сожалению я этих классов не
К сожалению я этих классов не нашел, или может быть не там искал. Сейчас опишу что у меня видно через 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"
вуаля, все работает
Спасибо за то, что откликнулись на мой вопрос.
Здесь описано решение как
Здесь описано решение как добавить классы .front, not-front:
https://www.drupal.org/node/2630648
Всё ок спасибо.
Всё ок спасибо.
Подскажите еще по одному вопросу, хочу на D8 полностью отдельный шаблон для Sidebar first, как можно это реализовать?
Вам придется разбить регион
Вам придется разбить регион Sidebar first на несколько регионов и сверстать все в page.html.yml:
http://drupalbook.ru/drupal/87-rabota-s-regionami-i-blokami-v-drupal-8
Благодарен, за ответ, но эту
Благодарен, за ответ, но эту статью я, читал. Если вы меня сослали на нее, тогда если это возможно проверьте правильно ли я все понял.
в файле 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
Вы что-то делаете не так,
Вы что-то делаете не так, причем здесь menu.html.twig? Регионы позволяют блоки выводить на странице, ничего больше.
Смотрите, за основу я брал
Смотрите, за основу я брал тему Basic, и начал обробатывать её. В задаче было изменить вид горизонтально меню, я этого добился не только изменением CSS но и пришлось править menu.html.twig. И когда я его изменил то те изменения перекачевали и на левый сайд бар. вот теперь ломаю голову как разделить.
Может быть проблема в CSS,
Может быть проблема в CSS, какие-нибудь классы накладываются и на левый сайдбар?
К сожалению нет, именно макет
К сожалению нет, именно макет, если бы только 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: { }
И того получается что мне нужно сменить шаблоны для отдельных блоков.