Поддержка → Проблемы и решения → текст в header за изображением
текст в header за изображением
-
http://aladdinstroy.ru/
тема twentyseventeen
не понимаю как поместить текст в область изображения заголовка, пытался добавить телефонные номера в header.php, но они отображаются за изображением
так же не понимаю где отредактировать размер логотипа и названия сайта, при изменении файла style.css ничего не происходит
-
чтобы выводить поверх — надо задать z-index в css.
да,я нашел этот параметр в style.scc, как и размер текста в названии и описании, но эти изменения ни к чему не приводят т_т
никакого z-index для текстового виджета с вашими телефонами я в стилях не вижу.
я просто вставил это в хедер
</head> <div class="textwidget"><span style="font-family: roboto, arial, helvetica, sans-serif; font-size: 20px;">НАШИ ТЕЛЕФОНЫ :</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (499)-899-20-49</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (961)-444-11-33</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (966)-094-53-99</span></div>
если убрать в настройках изображение заголовка текст отображается
предлагаете добавить виджет в заголовок? вообще помимо текста я хотел переместить всю информацию из первой страницы в эту область, не совсем понимаю как лучше это сделать ип испытываю большие затруднения с редактированием этого шаблона вручную, даже просто найти и удалить надпись «сайт работает на wordpress» из футера не получается, в футере ее почему то нет)
я вам этого не предлагал.
я предлагал прописать для ваших телефонов большой z-index в css, чтобы они выводились поверх картинки. но вы этого не сделали.аа,просто я менял это значение для изображения,хотя не уверен что правильно
кажется изменение любых значений не влияют на вид шапки/*-------------------------------------------------------------- 13.1 Header --------------------------------------------------------------*/ #masthead .wrap { position: relative; } .site-header { background-color: #fafafa; position: relative; } /* Site branding */ .site-branding { padding: 1em 0; position: relative; -webkit-transition: margin-bottom 0.2s; transition: margin-bottom 0.2s; z-index: 3; } .site-branding a { text-decoration: none; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .site-branding a:hover, .site-branding a:focus { opacity: 0.7; } .site-title { clear: none; font-size: 48px; font-size: 3rem; font-weight: 800; line-height: 1.25; letter-spacing: 0.08em; margin: 0; padding: 0; text-transform: uppercase; } .site-title, .site-title a { color: #222; opacity: 1; /* Prevent opacity from changing during selective refreshes in the customize preview */ } body.has-header-image .site-title, body.has-header-video .site-title, body.has-header-image .site-title a, body.has-header-video .site-title a { color: #fff; } .site-description { color: #666; font-size: 13px; font-size: 0.8125rem; margin-bottom: 0; } body.has-header-image .site-description, body.has-header-video .site-description { color: #fff; opacity: 0.8; } .custom-logo-link { display: inline-block; padding-right: 1em; vertical-align: middle; width: auto; } .custom-logo-link img { display: inline-block; max-height: 200px; width: auto; } body.home.title-tagline-hidden.has-header-image .custom-logo-link img, body.home.title-tagline-hidden.has-header-video .custom-logo-link img { max-height: 200px; max-width: 100%; } .custom-logo-link a:hover, .custom-logo-link a:focus { opacity: 0.9; } body:not(.title-tagline-hidden) .site-branding-text { display: inline-block; vertical-align: middle; } .custom-header { position: relative; } .has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header { display: table; height: 300px; height: 75vh; width: 100%; } .custom-header-media { bottom: 0; left: 0; overflow: hidden; position: absolute; right: 0; top: 0; width: 100%; }
.custom-header-media:before { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */ background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */ bottom: 0; content: ""; display: block; height: 100%; left: 0; position: absolute; right: 0; z-index: 69; } .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe { position: fixed; height: auto; left: 50%; max-width: 1000%; min-height: 100%; min-width: 100%; min-width: 100vw; /* vw prevents 1px gap on left that 100% has */ width: auto; top: 50%; padding-bottom: 1px; /* Prevent header from extending beyond the footer */ -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .wp-custom-header .wp-custom-header-video-button { /* Specificity prevents .color-dark button overrides */ background-color: rgba(34, 34, 34, 0.5); border: 1px solid rgba(255, 255, 255, 0.6); color: rgba(255, 255, 255, 0.6); height: 45px; overflow: hidden; padding: 0; position: fixed; right: 30px; top: 30px; -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.3s ease-in-out; width: 45px; } .wp-custom-header .wp-custom-header-video-button:hover, .wp-custom-header .wp-custom-header-video-button:focus { /* Specificity prevents .color-dark button overrides */ border-color: rgba(255, 255, 255, 0.8); background-color: rgba(34, 34, 34, 0.8); color: #fff; } .admin-bar .wp-custom-header-video-button { top: 62px; } .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { bottom: 0; position: absolute; top: auto; -ms-transform: translateX(-50%) translateY(0); -moz-transform: translateX(-50%) translateY(0); -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } /* For browsers that support 'object-fit' */ @supports ( object-fit: cover ) { .has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe, .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img { height: 100%; left: 0; -o-object-fit: cover; object-fit: cover; top: 0; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none; width: 100%; } } /* Hides div in Customizer preview when header images or videos change. */ body:not(.has-header-image):not(.has-header-video) .custom-header-media { display: none; } .has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding { display: table-cell; height: 100%; vertical-align: bottom; }
да причем тут шапка то?
вы вставили телефоны кодом:<div class="textwidget"><span style="font-family: roboto, arial, helvetica, sans-serif; font-size: 20px;">НАШИ ТЕЛЕФОНЫ :</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (499)-899-20-49</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (961)-444-11-33</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;">+7 (966)-094-53-99</span></div>
а вам надо код типа:
<div class="textwidget" style="display: flex;"><span style="font-family: roboto, arial, helvetica, sans-serif; font-size: 20px;z-index:100;">НАШИ ТЕЛЕФОНЫ :</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;z-index:100;">+7 (499)-899-20-49</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;z-index:100;">+7 (961)-444-11-33</span> <span style="font-family: arial, helvetica, sans-serif; font-size: 20px;z-index:100;">+7 (966)-094-53-99</span></div>
Охх,теперь понял,думал это в css нужно прописывать
Спасибоа в каком файле можно изменить размер названия сайта и размер логотипа?
в style.css
.site-title {
clear: none;
font-size: 24px; <—меняю значение,но это не работает
font-size: 1.5rem;
font-weight: 400;
line-height: 1.25;
letter-spacing: 0.08em;
margin: 0;
padding: 0;
text-transform: uppercase;если поменять значения в хроме через ф12 все работает, но через админку wp файл сохраняется, а изменений не происходит
Ctrl + F5 в браузере не пробовали нажимать?
- Тема «текст в header за изображением» закрыта для новых ответов.