Поддержка Проблемы и решения текст в header за изображением

  • Решено Greenlamp

    (@antrimplato)


    http://aladdinstroy.ru/
    тема twentyseventeen
    не понимаю как поместить текст в область изображения заголовка, пытался добавить телефонные номера в header.php, но они отображаются за изображением
    так же не понимаю где отредактировать размер логотипа и названия сайта, при изменении файла style.css ничего не происходит

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • чтобы выводить поверх — надо задать z-index в css.

    Автор Greenlamp

    (@antrimplato)

    да,я нашел этот параметр в style.scc, как и размер текста в названии и описании, но эти изменения ни к чему не приводят т_т

    никакого z-index для текстового виджета с вашими телефонами я в стилях не вижу.

    Автор Greenlamp

    (@antrimplato)

    я просто вставил это в хедер

    </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» из футера не получается, в футере ее почему то нет)

    • Ответ изменён 7 лет, 1 месяц назад пользователем Greenlamp.
    • Ответ изменён 7 лет, 1 месяц назад пользователем Greenlamp.

    я вам этого не предлагал.
    я предлагал прописать для ваших телефонов большой z-index в css, чтобы они выводились поверх картинки. но вы этого не сделали.

    Автор Greenlamp

    (@antrimplato)

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

    Автор Greenlamp

    (@antrimplato)

    /*--------------------------------------------------------------
    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%;
    }
    Автор Greenlamp

    (@antrimplato)

    .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>
    
    Автор Greenlamp

    (@antrimplato)

    Охх,теперь понял,думал это в css нужно прописывать
    Спасибо

    Автор Greenlamp

    (@antrimplato)

    а в каком файле можно изменить размер названия сайта и размер логотипа?

    в style.css

    Автор Greenlamp

    (@antrimplato)

    .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;

    Автор Greenlamp

    (@antrimplato)

    если поменять значения в хроме через ф12 все работает, но через админку wp файл сохраняется, а изменений не происходит

    Ctrl + F5 в браузере не пробовали нажимать?

Просмотр 15 ответов — с 1 по 15 (всего 16)
  • Тема «текст в header за изображением» закрыта для новых ответов.