Войти

Авторизация

Логин:
Пароль:
Забыли пароль?
Регистрация
Сайт пользователей Artisteer и Themler. Официальный торговый представитель.

[РЕШЕНО] Не получается изменить фон на странице

Невозможно изменить фон в Wordpress
Посетитель
vladomir
Сообщений: 24
40 дней назад
Вопрос знатокам. Делал шаблон на Artisteer, перенёс в Wordpress. Без блогов и записей. Только статич. страницы. Фон одинаковый на всех страницах. Всё работает отлично. Но... Никак не могу изменить фон страницы. Ставил несколько плагинов, которые и меняют картинку фона, и делают слайдер фона из нескольких картинок, и ставят видео вместо фона - ничего не работает. Фон как приклеенный, стоИт насмерть. Как можно это побороть?
Редактировалось: 1 раз (Последний: 26 августа 2017 в 13:41)
Постоянный участник
Malover
Медаль
Сообщений: 604
11 дней назад
Бывает по разному в зависимости от макета шаблона, но обычно фон прописан в стилях шаблона в файле style.css.
В самом начале, первое правило:

Код PHP:
  1.  
  2.  
  3. #art-main
  4. {
  5. background: #FFFFFF;
  6. margin:0 auto;
  7. font-size: 13px;
  8. font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  9. font-weight: normal;
  10. font-style: normal;
  11. position: relative;
  12. width: 100%;
  13. min-height: 100%;
  14. left: 0;
  15. top: 0;
  16. cursor:default;
  17. overflow:hidden;
  18. }
  19.  
  20.  
Попробуйте убрать в нем background: #FFFFFF; или заменить на свое.
Посетитель
vladomir
Сообщений: 24
40 дней назад
Спасибо за ответ. Это я всё читал. В файле Style.php у меня так: - "#art-main{background:#FFFFFF url('images/page.jpeg') top center no-repeat fixed;margin:0 auto;font-size:13px;font-family:Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;font-weight:normal;font-style:normal;position:relative;width:100%;min-height:100%;left:0;top:0;cursor:default;overflow:hidden;}"

Картинку можно изменить тут - ('images/page.jpeg') Я не хочу просто сменить фон, это я бы сделал. Я хочу с помощью плагинов, поставить видео на фон. Не получается...
P.S. Пробовал удалить "#FFFFFF", фон всё равно остался...

P.P.S. Поставил плагин "mb.YTPlayer"(видео на фон). Удалил ('images/page.jpeg') в Style.php, в Wordpress "Внешний вид" - "Фон" появилось видео на фон, а когда открываю страницу - вместо фона пусто...
Редактировалось: 2 раза (Последний: 26 августа 2017 в 14:35)
Постоянный участник
Malover
Медаль
Сообщений: 604
11 дней назад
Как вариант возможно видео у вас выводится позади фона. Попробуйте поставить фон позади видео.

Для этого в это правило добавьте свойство z-index: -1; Где -1 любое отрицательное число, пока видео не появится. Правильно конечно посмотреть через фаербаг какой z-index у видео и поставить меньше его.

Но можно экспериментально, например -10000
Редактировалось: 1 раз (Последний: 26 августа 2017 в 14:41)
Посетитель
vladomir
Сообщений: 24
40 дней назад
Не получается...
Постоянный участник
FDmitriy
Медаль
Сообщений: 376
1 день назад
vladomir:
background:#FFFFFF url('images/page.jpeg') top center no-repeat fixed;

Полностью эту строку удалите посмотреть появится или нет. Еще может быть страница загораживает
Malover:
Правильно конечно посмотреть через фаербаг какой z-index у видео и поставить меньше его.

Правильно будет посмотреть фаербагом есть там видео на самом деле или нет. smile Добавлено спустя 2 минутыvladomir, видео про фаербаг посмотрите. Или ссылку на сайт в студию.
Редактировалось: 1 раз (Последний: 26 августа 2017 в 15:24)
Посетитель
vladomir
Сообщений: 24
40 дней назад
FDmitriy:
Полностью эту строку удалите посмотреть появится или нет. Еще может быть страница загораживает
Удалял, фон пропадает совсем, но видео не появляется...
Адрес сайта, где нужно сделать видео фоном -
Скрытый текст виден только зарегистрированным пользователям

Этот сайт без видео. Что где нужно изменить, удалить? Тут пока ничего не трогаю.
Я экспериментирую на другом сайте, точной копией этого.
Редактировалось: 2 раза (Последний: 26 августа 2017 в 19:19)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 944
16 дней назад
vladomir:
Ставил несколько плагинов, которые и меняют картинку фона, и делают слайдер фона из нескольких картинок, и ставят видео вместо фона - ничего не работает

Сама по себе идея вставки в фон видео мне не нравится. Страница утяжелится в разы, отсюда понижение в ранжировании сайта ПСами, так как загрузка влияет на ранжирование.
Кроме того потеря посетителей с низкой скоростью интернета, так как просто не будут дожидаться когда страница загрузится.

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

Если же нужен не применно "оживляш" с фоном, посмотрите это, когда то делал:
https://artisteer-rus.com/blogs/blog-samson-a/dinamicheskaja-smena-cveta-fona-v-shablo.html

По крайней мере без изображений на чистом CSS, значит не утяжелит страницу, правда возможно старые браузеры ИЕ (наверное до 8) могут не поддерживать, но у них будет просто одним цветом. Что в принципе нормально.

Цвета можно подобрать. В сети есть подобные реализации и с изображениями, и даже по времени суток, можете поискать по запросу "динамическая смена фона на сайте". Но как писал, большие изображения сейчас не "в честИ" smile

vladomir:
Этот сайт без видео. Что где нужно изменить, удалить? Тут пока ничего не трогаю.
Я экспериментирую на другом сайте, точной копией этого.

shock А как же увидеть, что мешает появлению видео?
Редактировалось: 2 раза (Последний: 26 августа 2017 в 20:09)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 944
16 дней назад
ЗЫ: Посмотрел сайт, задумка понятна. Можно конечно прикрутить скрипт с изменением фоновых картинок, как писал раньше. Лишние плагины в ВП не желательны. Там у Вас кстати надо поправить в шапке номер телефона наезжает на название при разрешении монитора 1280 (одно из популярных разрешений).

Если все таки с плагином по фону, попробуем погадать на кофейной гуще smile

Попробуйте в стилях вместо:

Код PHP:
  1.  
  2.  
  3. #art-main {
  4. background: #fff url("//sonarmaster.ru/wp-content/themes/Sonarmaster/images/page.jpeg") no-repeat fixed center top;
  5. cursor: default;
  6. font-family: Arial,"Arial Unicode MS",Helvetica,sans-serif;
  7. font-size: 13px;
  8. font-style: normal;
  9. font-weight: normal;
  10. left: 0;
  11. margin: 0 auto;
  12. min-height: 100%;
  13. overflow: hidden;
  14. position: relative;
  15. top: 0;
  16. width: 100%;
  17. }
  18.  
  19.  
Заменить на такие:

Код PHP:
  1.  
  2. #art-main {
  3. font-family: Arial,"Arial Unicode MS",Helvetica,sans-serif;
  4. font-size: 13px;
  5. font-style: normal;
  6. font-weight: normal;
  7. }
  8.  


ЗЫ2: Вот набросал реализацию со сменой картинок, скачайте посмотрите, можно прямо на рабочем столе открыть в папке браузером файл index.html:

https://artisteer-rus.com/users/files/download104.html

Ждать смену картинко примерно 30 сек. Код вставлен в index.html сразу после <div id="art-main"> строка 25 и идет до <div class="art-sheet clearfix"> строка 98.
В стилях css прямо в начало добавлено:

Код PHP:
  1.  
  2. img#bg {
  3. /* Stretch background */
  4. position: fixed;
  5. top:0;
  6. left:0;
  7. width:100%;
  8. max-width:100%;
  9. z-index:-3;
  10. }
  11.  
чуть ниже в #art-main тоже смотрите что убрано.
Для ВП код надо вставлять в файл шаблона header.php, сразу после <div id="art-main">

В коде возможно надо будет поправить пути до изображений. Сами изображения находятся в папке images
На реальный ВП не ставил, но должно работать.
Редактировалось: 5 раз (Последний: 26 августа 2017 в 21:25)
Посетитель
vladomir
Сообщений: 24
40 дней назад
samson спасибо за помощь. Попробую по вашему совету изменения. Позже отпишусь.
samson:
Если же нужен не применно "оживляш" с фоном, посмотрите это, когда то делал:
Красиво, оптимально, но хотелось видео smile
samson:
Там у Вас кстати надо поправить в шапке номер телефона наезжает на название при разрешении монитора 1280 (одно из популярных разрешений).
Я вообще первый раз делал сайт. Попробовал на Artisteer. Всех "подводных камней" не знаю. В самой программе при смене разрешения, всё формируется красиво, а уже на сайте, с разным разрешением, телефон наезжает, уже потом сам заметил... Теперь опять нужно что-то мудрить, что бы это исправить...

P.S. Кстати попробовал на этом шаблоне в Artisteer убрать фон, потом перенёс в Wordpress и плагин mb.YTPlayer for background videos запустился. Видео фон работает. Грузится быстро (например на том же Pagespeed Tools), но этот плагин не оптимизирует под мобильные устройства, картинка без фона...

samson:
ЗЫ2: Вот набросал реализацию со сменой картинок, скачайте посмотрите, можно прямо на рабочем столе открыть в папке браузером файл index.html:
ЗдОрово, спасибо. Наверное буду пробовать реализовать этот вариант.
samson, можно поподробней, как мне всё это реализовать, вставить смену картинок в файлы на Wordpress? Там же нет файла index.html.
Какие коды и в какие файлы. Извините, новичок в этом smile
Редактировалось: 5 раз (Последний: 27 августа 2017 в 10:56)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 944
16 дней назад
vladomir:
в файлы на Wordpress? Там же нет файла index.html.
samson:
Для ВП код надо вставлять в файл шаблона header.php, сразу после <div id="art-main">

В коде возможно надо будет поправить пути до изображений. Сами изображения находятся в папке images
На реальный ВП не ставил, но должно работать.

Вот это надо вставить в файл шаблона header.php, сразу после <div id="art-main"> (только возможно пути к картинкам не совпадут надо будет прописать) :

Код PHP:
  1.  
  2.  
  3. <img src="" alt="background" id="bg" style="display:none" />
  4. <script type="text/javascript" class="noprint">
  5. var aImages = new Array();
  6. var aURL = new Array();
  7. var aArtists = new Array();
  8. var iPrev = -1;
  9. var iRnd = -1;
  10.  
  11. aImages[0] = "./images/bg4.jpg";
  12. aImages[1] = "./images/bg1.jpg";
  13. aImages[2] = "./images/bg2.jpg";
  14. aImages[3] = "./images/bg3.jpg";
  15.  
  16.  
  17.  
  18.  
  19. $(document).ready(function() {
  20.  
  21.  
  22. $("img#bg").load(function()
  23. {
  24.  
  25. $("img#bg").fadeTo(2000,1);
  26.  
  27.  
  28.  
  29. setTimeout(function()
  30. {
  31. $("#image_description").animate({right: '-=150'}, 1000);
  32. $("img#bg").fadeOut(2000);
  33.  
  34.  
  35. setTimeout(LoadImages,2500);
  36. }
  37. ,30000);
  38. }
  39. )
  40.  
  41.  
  42. setTimeout(LoadImages,1000);
  43.  
  44. });
  45.  
  46. function LoadImage(iNr)
  47. {
  48.  
  49. $("img#bg").attr("src", aImages[iNr]);
  50.  
  51.  
  52. };
  53.  
  54. function LoadImages()
  55. {
  56.  
  57. /* Select a random image number and make sure this is not equal to the previous image */
  58. while(iPrev == iRnd)
  59. {
  60. iRnd = Math.floor(Math.random()*aImages.length);
  61. }
  62.  
  63. /* Show the selected image */
  64. LoadImage(iRnd);
  65.  
  66. iPrev = iRnd;
  67.  
  68. };
  69. </script>
  70.  
  71.  
а в файле style.css надо изменить:

samson:
прямо в начало добавлено:

Код PHP:


img#bg {
/* Stretch background */
position: fixed;
top:0;
left:0;
width:100%;
max-width:100%;
z-index:-3;
}


чуть ниже в #art-main тоже смотрите что убрано.

Если не получится пишите.
Редактировалось: 1 раз (Последний: 27 августа 2017 в 14:24)
Посетитель
vladomir
Сообщений: 24
40 дней назад
samson:
чуть ниже в #art-main тоже смотрите что убрано.
Не понял, в моём style.css ниже в #art-main тоже убрать, как у вас ?

И как можно подвинуть номер телефона вправо?
в файле style.css нашёл:
Код PHP:
  1.  
  2. .art-slogan
  3. {
  4. display: inline-block;
  5. position: absolute;
  6. min-width: 50px;
  7. top: 73px;
  8. left: 95.27%;
  9. line-height: 100%;
  10. margin-left: -248px !important;
  11. -webkit-transform: rotate(0deg);
  12. -moz-transform: rotate(0deg);
  13. -o-transform: rotate(0deg);
  14. -ms-transform: rotate(0deg);
  15. transform: rotate(0deg);
  16. z-index: 102;
  17. white-space: nowrap;
  18. }
  19. .art-slogan a:hover
  20. {
  21. font-size: 33px;
  22. font-family: Arial, 'Arial Unicode MS', Helvetica, Sans-Serif;
  23. font-weight: normal;
  24. font-style: italic;
  25. text-decoration: none;
  26. text-align: left;
  27. padding: 0;
  28. margin: 0;
  29. color: #000000 !important;
  30. }
Меняю размер, но сдвинуть вправо никак...
======
И ещё вопрос вдогонку. Заголовок в хедере на моей странице, получился как ссылка на эту же страницу, как пишут, что это недоработка программы Artisteer. Программа по умолчанию всегда так делает. А правильней, что бы заголовок был в теге <h1>...</h1>. Вот тоже голову ломаю.
Редактировалось: 5 раз (Последний: 27 августа 2017 в 15:02)
Модератор Постоянный участник
samson
Медаль За активное участие в жизни сайта.
Сообщений: 944
16 дней назад
vladomir:
Не понял, в моём style.css ниже в #art-main тоже убрать, как у вас ?

Мой файл css откройте и сравните со своим первые два правила ( img#bg и #art-main) и свойства в них, у себя сделайте так же.

vladomir:
И ещё вопрос вдогонку. Заголовок в хедере на моей странице, получился как ссылка на эту же страницу, как пишут, что это недоработка программы Artisteer. Программа по умолчанию всегда так делает. А правильней, что бы заголовок был в теге <h1>...</h1>. Вот тоже голову ломаю.

look Где пишут? Главное что бы на странице был один заголовок H1, остальное лишь разные способы оптимизации страницы.

vladomir:
И как можно подвинуть номер телефона вправо?
в файле style.css нашёл:

Так просто их не подвинуть, так как у него и в скрипте script.js это прописано, где надо тоже искать где это прописано.
Лучше как то решить эту проблему еще в программе. Например разместить заголовок по середине шапки а над ним так же посередине телефон, это самый простой вариант.

Или шрифт у всего этого уменьшить.
Постоянный участник
Handy
Медаль
Сообщений: 736
16 дней назад
vladomir:
И как можно подвинуть номер телефона вправо?
в файле style.css нашёл:

Вот по аналогии:

https://artisteer-rus.com/forum/thread565-1.html

Но лучше в программе, там есть предпросмотр. Окно браузера уменьшайте по ширине будет видно. Или лучше в панели управления компа настройках экрана менять разрешение монитора. music
качественное продвижение и раскрутка сайтов в сеопульте
Посетитель
vladomir
Сообщений: 24
40 дней назад
samson:
Где пишут? Главное что бы на странице был один заголовок H1, остальное лишь разные способы оптимизации страницы.
Несколько раз в инете попадалось, что Artisteer по умолчанию, название сайта (Верхний колонтитул - элементы управления - заглавная строка) в хедере, автоматом делает ссылкой на сайт. Что в принципе у себя на странице и увидел. Я <h1> уже потом сам прикручивал к другому тексту на главной странице.
В ютубе один автор настоятельно не рекомендовал использовать в Artisteer элементы управления именно поэтому.
Перейти на форум: