Верстка шаблона

[Dizred]

Добрый день! Помогите с такой проблемой:

Есть шаблон с общим фоном:

Для понятности разметки поменял на другой цвет:

Суть вопроса: надо где черный квадрат и цифра 1, вставить изображение прозрачное в самый угол, ну типо ленточки георгиевской и всё остальное залить фоном:

Вот css:

html{background-color:#5d1338;}
body{background:url(../images/purple/bg.jpg) no-repeat top center;}
a.read_more{background-color:#ff9694;}
.button_divider{border-bottom:1px #6a2146 solid; border-top:1px #6a2146 solid;}

a{color:#ff9694;}
h1 span, h2 span, h3 span, h4 span, h1 strong, h2 strong, h3 strong, h4 strong{color:#ff9694;}
ul#main_menu li a.selected {color:#ff9694;}
ul#main_menu li a:hover, ul#main_menu li.current-menu-item a{color:#ff9694;}
ul#main_menu ul li a {color:#ff9694;}
ul#main_menu ul li ul li a {color:#ff9694;}
.footer_menu ul li.selected a{ color:#ff9694;}
.footer_menu ul li a:hover{ color:#ff9694; }
.post_date, .post_date_nothumb, .service_pricespecial, input#searchsubmit, ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover, input.form_submit, a.icon_link_img{ background-color:#ff9694;}
.footer_text a:hover{ border-bottom:1px dotted #ff9694;}

ul#main_menu ul, ul#main_menu ul li ul, .flex-caption {background-color:#5d1338;}

a.more, .left13 ul li, .entry ul li, .sidebar ul li{ background:url(../images/purple/bullet.png) no-repeat left;}
.home_underslider{ background:url(../images/purple/home_underslider.jpg) no-repeat center top;}
.slide_frame{background:url(../images/purple/slider_frame.png) no-repeat center;}

.footer{background-color:#460d29;}
.footer_text, .footer_menu ul li a{color:#b05877;}

@media screen and (max-width: 1024px) {
.show_menu, .hide_menu, ul#main_menu, ul#main_menu ul{ background-color:#5d1338;}
ul.filter_portfolio li.selected a, ul.filter_portfolio li a:hover{background-color:#5d1338;}
ul.filter_portfolio li a{color:#ff9694;}
}

 

Помогите пожалуйста это сделать  

Вроде получилось подробно описать суть вопроса...

Edited December 21, 2017 by Dizred

[prophet_07]

after должен к элементу добавляться какому либо. 

#main_container{width:960px;margin:auto;}

#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

[Tilonorrinco]

Нужно просто создать псевдоэлемент с параметрами картинки и разместить его в левом верхнем углу поверх фона.

Попробуй добавить к стилям  вот такой кусок: 

body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: ШИРИНА КАРТИНКИ пх
	height: ВЫСОТА КАРТИНКИ
	background-image: url('ССЫЛКА НА КАРТИНКУ');
	background-repeat: no-repeat;
}

Такую простыню кода без разметки (да и с разметкой тоже) вряд ли кто-то читать будет, лучше давать ссылку на сайт.

[Dizred]

1 час назад, Tilonorrinco сказал:

Нужно просто создать псевдоэлемент с параметрами картинки и разместить его в левом верхнем углу поверх фона.

Попробуй добавить к стилям  вот такой кусок: 

body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: ШИРИНА КАРТИНКИ пх
	height: ВЫСОТА КАРТИНКИ
	background-image: url('ССЫЛКА НА КАРТИНКУ');
	background-repeat: no-repeat;
}

Такую простыню кода без разметки (да и с разметкой тоже) вряд ли кто-то читать будет, лучше давать ссылку на сайт.

Добавил в стили:

body {
	position: relative;
}

body:after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	width: 300px;
	height: 300px;
	background-image: url('http://zak.hol.es/wp-content/uploads/2017/12/Top.png');
	background-repeat: no-repeat;
}

Но ничего не изменилось...((

Вот ссылка на сайт: http://zak.hol.es/

[Tilonorrinco]

Почему не изменилось? Появился псевдоэлемент с картинкой. Осталось только поработать с изображением в редакторе.

[Dizred]

(тестовый домен): Сайт

Ребята, в продолжение вопроса...

Добавил фоновое изображение на левую и правую сторону страницы, вот с помощью такого кода (вставил в боди):

	url(http://test1.ru/wp-content/uploads/2018/01/bam1-1.png) no-repeat,   
	url(http://test1.ru/wp-content/uploads/2018/01/bamboo.png) repeat-y,  
	url(http://test1.ru/wp-content/uploads/2018/01/bam2-2.png) 100% 0 no-repeat,    
	url(http://test1.ru/wp-content/uploads/2018/01/bamboo.png) 100% 0 repeat-y;}

Но до конца оно (изображение) не идет  Подскажите пожалуйста, возможно код не в том месте? Подскажите пожалуйста...

[prophet_07]

У вас имя домена zak.hol.es,  а url для фоновых картинок начинаются  с test1.ru 
Только для для одной правильно указан. 

Переносили сайт с локального сервера через Duplicator? 

[Dizred]

13 часов назад, prophet_07 сказал:

У вас имя домена zak.hol.es,  а url для фоновых картинок начинаются  с test1.ru 
Только для для одной правильно указан. 

Переносили сайт с локального сервера через Duplicator? 

Извиняюсь, поправил:

body {background: url(http://zak.hol.es/wp-content/uploads/2018/01/bam1-1-1.png) no-repeat,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bamboo.png) repeat-y,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bam2-2.png) 100% 0 no-repeat,
				  url(http://zak.hol.es/wp-content/uploads/2018/01/bamboo.png) 100% 0 repeat-y;}

 

13 часов назад, Vic-Tor сказал:

А к чему тут колорадская ленточка??? Я понимаю еще политическая тема была?!?!?!...

Ленточка была просто как пример картинки в угол...

[prophet_07]

У вас внутри #main_container есть блоки с нулевой высотой. 
Например, .home_bottom. Внутри  три "плавающих" блока и поэтому родитель "схлопнулся".

Самое простое для #main_container добавить "overflow: hidden;"
Но лучше добавить псевдокласс для очистки потока. 
Например, такой: 
#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

[Dizred]

В 12.01.2018 в 16:59, prophet_07 сказал:

У вас внутри #main_container есть блоки с нулевой высотой. 
Например, .home_bottom. Внутри  три "плавающих" блока и поэтому родитель "схлопнулся".

Вроде добавил, как Вы сказали, но ничего не изменилось. Вот что получилось:

#main_container{width:960px;margin:auto;}
.header{ text-align:center; height:auto; padding:40px 0 60px 0;}
.logo{padding:10px 0 10px 0px;display:inline-block; margin:auto;}
.logo_image{ float:left; padding:0 10px 0 0;}
.logo h1{font-size:45px; margin:0px; padding:0px; float:left; clear:none;}
.logo h1 a{font-family: 'OpenSans', sans-serif;letter-spacing:-1px;} 
after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

 

[Dizred]

16 минут назад, prophet_07 сказал:

after должен к элементу добавляться какому либо. 

#main_container{width:960px;margin:auto;}

#main_container:after {
  content: '';
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

Спасибо большое! Ещё один вопросик пожалуйста, можно ли сделать так, чтобы в мобильной версии этот фон не был виден (скрывался как бы)?  Получается он накладывается под текст и блоки - выглядит не ахти...

[prophet_07]

3 часа назад, Dizred сказал:

Спасибо большое! Ещё один вопросик пожалуйста, можно ли сделать так, чтобы в мобильной версии этот фон не был виден (скрывался как бы)?  Получается он накладывается под текст и блоки - выглядит не ахти...

Его можно просто убрать/ заменить на нужном разрешении. 
Например: 

@media screen and (max-width: 991px) {
    background: none;
}

[Dizred]

3 часа назад, prophet_07 сказал:

@media screen and (max-width: 991px) {
    background: none;
}

А это необходимо в какую часть вставить? точно @ перед media?

И этот код просто уберёт эти фоновые картинки, если разрешение экрана будет менее 991px?

[prophet_07]

3 часа назад, Dizred сказал:

А это необходимо в какую часть вставить? точно @ перед media?

И этот код просто уберёт эти фоновые картинки, если разрешение экрана будет менее 991px?

Посмотрите где у вас медиа запросы начинаются, там добавьте. 
Не обязательно "991px", у вас может быть другая точка излома. 
При этом разрешении и меньше просто будет перезапись свойств body. 

 

[Dizred]

14 часов назад, prophet_07 сказал:

Посмотрите где у вас медиа запросы начинаются, там добавьте. 
Не обязательно "991px", у вас может быть другая точка излома. 
При этом разрешении и меньше просто будет перезапись свойств body. 

Нашел:

@media screen and (max-width: 1024px) {
	background: none;
#main_container{width:100%;}
.header{ text-align:center; height:auto; padding:30px 0 20px 0;}
.logo h1{font-size:35px;}
.left_full, .left13, .left23, .left12, .left14{ width:90%; float:left; margin:40px 0 0 5%;}

и 

@media screen and (max-width: 480px) {
	background: none;
.logo img{ width:90%; display:inline-block; margin:auto; }
}

Добавил туда background: none; , но что-то не пропадает фон в мобильном виде (только наоборот сайт поехал в моб.вер., если Вы посмотрите)

Edited January 16, 2018 by Dizred

[prophet_07]

1 час назад, Dizred сказал:

@media screen and (max-width: 480px) { background: none; .logo img{ width:90%; display:inline-block; margin:auto; } }

Ошибка, немного неправильно я написал . Нужно body добавить. 

@media screen and (max-width: 1024px) {

body{ background: none; }

#main_container{width:100%;}
.header{ text-align:center; height:auto; padding:30px 0 20px 0;}
.logo h1{font-size:35px;}
.left_full, .left13, .left23, .left12, .left14{ width:90%; float:left; margin:40px 0 0 5%;}

[Dizred]

Я надеюсь последний вопрос... Перенес на другой хоситнг сайт, всё прошло успешно. Вытащил css потом с фтп и изменил, как выше в теме. Переношу css обратно на фтп, смотрю сайт-изменений нет... Смотрю код страницы в консоле браузера css код не поменялся, хотя если через движок cms редактор css изменен и всё есть...Что может быть? 

[klierik]

Кеш браузера, как вариант

[Dizred]

38 минут назад, klierik сказал:

Кеш браузера, как вариант

На других устройствах всё тоже самое. Думаю как вариант /style.css?ver=4.9.2 убрать и оставить /style.css или не в этом дело?

[klierik]

1 час назад, Dizred сказал:

На других устройствах всё тоже самое. Думаю как вариант /style.css?ver=4.9.2 убрать и оставить /style.css или не в этом дело?

Скорее не в этом. Если по прямому пути к файлу в нём нет внесённых изменений то — это значит что этих изменений в данном конкретном файле нет.

Могу допустить что или файл не был перезаписан на сервере или перезаписан другой, не тот что выводится посетителю.

[Dizred]

Проблемы продолжаются... Перенес сайт на другой хостинг и через неделю начался редирект и не корректное отображение сайта. Теперь имею один сайт (на одном хостинге  чуть больше доделан, на другом чуть меньше) на двух разных хостингах, на старом всё нормально, а на новом вот проблемы. Вход на FTP и т.д. производился с одной машины, т.е. вирусы с пк исключены. После проверки rescan вот результат Отчет , судя по отчету проблема с jquery.js. Подскажите, есть ли вероятность этого вируса от нового хостинга? И как убить этот вирус с редиректом и т.д. ( замена здоровым jquery.js не помогла)

До переноса сайт (без вируса)

После переноса сайт (Бывает редирект и не корректное отображение)

Edited January 26, 2018 by Dizred
Дополнил ссылками

[Vic-Tor]

А к чему тут колорадская ленточка??? Я понимаю еще политическая тема была?!?!?!...