Перейти к содержимому


неподвижный фон


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 68

#1 moymagazin.storeland.ru

moymagazin.storeland.ru

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений

Отправлено 03 Январь 2011 - 22:57

Подскажите плиз как вставить неподвижный задний фон
хочу переделать оформление примерно вот под этот http://osc4.template...31777/index.php
но почему то при вставлении кода занего фона ничего не полчается, возможно что то не так делаю, напишите как это сделать что бы все получилось :unsure:
и еще бы не помешало рассказать как залить все остальные элименты, думаю этот манаул не только мне пригадится, заранее огромное спасибо.

#2 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 04 Январь 2011 - 01:54

В данном случае можно дописать стиль для body точно так же как он указан у них:
body {
  background: url(http://osc4.template-help.com/zencart_31777/includes/templates/theme439/images/body-bg.jpg) fixed 50% 0%;
}
Для того чтобы он появился, достаточно сделать эту запись в файле main.csstemplate в редакторе тем (вкладка "Сайт" пункт меню "Редактор тем").
Дописать его можно 2мя вариантами:

Вариант первый - дописать его в текущий стиль, который выглядит так:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}

В этом случае получится:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background: #FFF url(http://osc4.template-help.com/zencart_31777/includes/templates/theme439/images/body-bg.jpg) fixed 50% 0%;
  color: #666;
}

Вариант второй - вставить код указывающий фон, не изменяя старый.
В этом случае надо обязательно вставлять код после стиля body, чтобы он не был перекрыт старым стилем. Для этого код размещается либо в конце файла, либо под старым стилем, тогда код будет выглядеть примерно так:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}
body {
  background: url(http://osc4.template-help.com/zencart_31777/includes/templates/theme439/images/body-bg.jpg) fixed 50% 0%;
}


#3 Rich

Rich

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений

Отправлено 12 Январь 2011 - 08:55

Добрый день, хотелось бы установить общим фоном вот эту картинку, подскажите как это сделать.lxgjtd6.jpg

#4 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 12 Январь 2011 - 09:12

Прописать его в тег body через style="background:url("Путь к картике");"
Детальную информацию по стилям можно прочитать на htmlbook-е

#5 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 07 Февраль 2011 - 23:35

Доброго времини суток.. Пишу в этой теме так как тут указывали ссылку на сайт http://osc4.template...31777/index.php
хотел бы узнать. Возможно ли сделать такие же баннерочки на главой странице. И какой код нужен для того чтоб они менялись. Куда вставить код.
Это ведь не гиф анимация. Система вроде ясна.. Прописывается код, путь к изобраениям и вставляется в нужное место..
Вот только какой код нужен) не знаю.

#6 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 08 Февраль 2011 - 22:04

В нашей системе он вставляется через редактор тем (Сайт->Редактор тем) в шаблоне "html" после кода:
<!-- Главная страница -->
{% IF index_page %}
либо на главной странице в разделе "Сайт" -> "Страницы".

Далее вставляете код изображений которые будут крутиться, подключаете jquery plugin галереи изображений. Можно скопировать метод как на указанном шаблоне, можно использовать другие плагины, например http://jquery.malsup.com/cycle/ или http://medienfreunde.../lab/innerfade/

#7 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 09 Февраль 2011 - 22:10

так то все ясно. Даже нашел мануал как установить плагин. Но вот куда закачать сам фаил плагина чтоб его потом подключать?
вот мануал http://n-wp.ru/4619. Пользуюсь им. Но застрал тутже на втором шаге

#8 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 11 Февраль 2011 - 13:33

v еще там нет
<!-- Главная страница -->
{% IF index_page %}

есть только
<!-- Всевозможные списки товаров -->
{% IF index_page %}

Плиз, можно поподробнее описать процесс установки http://medienfreunde.../innerfade/#n2.
куда все это прописать. Пробовал но не получается.
Хотелось бы у вас тут обосноваться... Удобно все. Вот только проблемку осталось решить...

#9 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 11 Февраль 2011 - 17:39

Просмотр сообщенияArt-t (09 Февраль 2011 - 22:10) писал:

так то все ясно. Даже нашел мануал как установить плагин. Но вот куда закачать сам фаил плагина чтоб его потом подключать?
вот мануал http://n-wp.ru/4619. Пользуюсь им. Но застрал тутже на втором шаге
Вставлять его я так понимаю надо в теге head сайта, в шаблоне "html" через редактор тем (сайт -> редактор тем)
<head>
  ...
  предложенный на странице мануала код
  ...
</head>

Просмотр сообщенияArt-t (11 Февраль 2011 - 13:33) писал:

v еще там нет
<!-- Главная страница -->
{% IF index_page %}

есть только
<!-- Всевозможные списки товаров -->
{% IF index_page %}
Ну это одно и то же, просто комментарии разные, вообще если вставляете код на главной, то проще всего работать через страницы (Сайт -> Страницы) и там вставлять галерею, не изменяя шаблонов сайта. Изменение в шаблонах больше подходит для случая когда баннер надо разместить на всех страницах сайта, как на http://hi-fun.su/


Просмотр сообщенияArt-t (11 Февраль 2011 - 13:33) писал:

Плиз, можно поподробнее описать процесс установки http://medienfreunde.../innerfade/#n2.
куда все это прописать. Пробовал но не получается.
Хотелось бы у вас тут обосноваться... Удобно все. Вот только проблемку осталось решить...
Можно сделать так:
  • Добавляем в редакторе тем (Сайт -> Редактор тем) файлы с сайта innerFade
  • Указываете в шаблоне "HTML", в шапке, в теге head код загрузки innerfade:
    <script type="text/javascript" src="{JS_PATH}jquery.innerfade.js"></script>
    
  • Там же, вслед за вызовом этого скрипта добавляете вызов библиотеки innerFade для блока например index-page-gallery:
    <script type="text/javascript">
    $(document).ready(
      function(){
    	$('#index-page-gallery').innerfade({
    	  animationtype: 'slide',
    	  speed: 750,
    	  timeout: 2000,
    	  type: 'random',
    	  containerheight: '1em'
    	});
      });
    });
    </script>
    
  • Затем в разделе "Сайт" -> "Страницы" открываете главную страницу, нажимаете в полном описании иконочку html, в самом низу справа и вставляете код для элементов, которые должны быть в ротации. Для примера использую их код, с их картинками, у себя естественно замените адреса изображений:
    <ul id="index-page-gallery"> 
    	<li>
    		<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
    			<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
    		</a>
    	</li>
    	<li>
    		<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
    			<img src="images/whizzkids.gif" alt="Whizzkids" />
    		</a>
    	</li> 
    	<li>
    		<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
    			<img src="images/km.jpg" alt="K?nigin Mutter" />
    		</a>
    	</li> 
    	<li>
    		<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
    			<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
    		</a>
    	</li> 
    	<li>
    		<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
    			<img src="images/tuev.jpg" alt="T?V S?D Gruppe" />
    		</a>
    	</li> 
    </ul>
    

После этого всё должно заработать

#10 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 12 Февраль 2011 - 08:31

Изображение
Изображение
Изображение
чтото не получается. залил файлы баннеров в редакторе тем. делаю ссылку... копирую нормально. а после сохранения в начале ссылки вот эти точки. но может так и должно быть... заливал изображение на радикал фото. тоже самое.. нажимая на название баннера. он открывается во всех случаях. но вот все это отображается не правильно. Где напортачил? все файлы которые нужно было загрузить в редакторе тем загрузил!
Где напортачил?(

#11 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 13 Февраль 2011 - 13:43

В первой картинке - ссылки стоят не на товары, а на файлы изображений. Изображения пытаются загрузиться из папки images, но её там в принципе нет, так что должно выдавать 404 ошибку и они не должны загружаться.
Во второй вроде всё верно
В третьей - результат. Нет картинок, потому что к ним указан не верный путь.

#12 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 14 Февраль 2011 - 18:20

не получается....
с сылками разобрался... нажимая на баннер переходит на страницу которую указал.. баннеры отображаются... Но они просто показаны сразу все.... не меняется ничего.. Просто все баннеры один под другим...

<ul id="index-page-gallery">
<li> <a href="тут ссылка на страницу сайта"> <img src="ссылка на изображение.jpg" alt="название" /> </a> </li>
<li> <a href="тут ссылка на страницу сайта"> <img src="ссылка на изображение.jpg" alt="название" /> </a> </li>
<li> <a href="тут ссылка на страницу сайта"> <img src="ссылка на изображение.jpg" alt="название" /> </a> </li>
<li> <a href="тут ссылка на страницу сайта"> <img src="ссылка на изображение.jpg" alt="название" /> </a> </li>
</ul>
такой вот вид. 4ре баннера

#13 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 20 Февраль 2011 - 19:55

Значит не загружается innerfade галерея, либо где-то javascript код написан с ошибкой. Для решения проблемы можно использовать в firefox консоль ошибок, она отображает место где возникла ошибка JavaScript.
Вы так же можете указать ссылку на ваш сайт, я постараюсь определить в чём проблема.

#14 Art-t

Art-t

    Новичок

  • Пользователи
  • Pip
  • 8 сообщений

Отправлено 21 Февраль 2011 - 18:48

http://art-t-shop.storeland.ru/ ссылка на сайт.
Проверил лежат ли файлы в галереи тем. Все на месте. все файлы которые нужно загрузить из папки с jq.
Чуть позже установлю firefox. Но я в этом совсем плохо понимаю.. Основы только и знаю.

#15 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 22 Февраль 2011 - 11:07

В приложении файл с ошибками, который выдаёт firefox:
1) Не верный синтаксис в JavaScript
2) Нет файлов, ошибка 404. Вероятно их нет в галерее тем, либо путь стоит не верный. Например к общим для всех сайтов скриптам, место пути к вашему сайту. Путь к javascript  файлам из редактора тем отображается вот в этой переменной: {ASSETS_JS_PATH} используется она так: сначала переменная, потом название файла:
{ASSETS_JS_PATH}file.js

Резульат обработки этого кода:
http://js.site.storeland.ru/web/upload/assets/js/7/6666/main.js

Как обнаружились указанные ошибки в FireFox:
art-shop-errors.jpg

#16 PlayChik

PlayChik

    Пользователь

  • Пользователи
  • PipPip
  • 13 сообщений

Отправлено 10 Апрель 2011 - 01:04

Просмотр сообщенияsupport (12 Январь 2011 - 09:12) писал:

Прописать его в тег body через style="background:url("Путь к картике");"
Детальную информацию по стилям можно прочитать на htmlbook-е

у меня криво встает, что делаю не так?

http://regpublic.storeland.ru/

#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 369 сообщений

Отправлено 10 Апрель 2011 - 02:46

Хм. попробуйте изменить стили, сделав следующее.
В шаблоне основной страницы, там где вы прописали стилизацию тега body
 <style type="text/css">
   BODY {
	background-image: url(http://regpublic.storeland.ru/web/upload/assets/images/10/9032/background.png); /* Путь к фоновому изображению */
	background-color: #000; /* Цвет фона */
	background-repeat: repeat;
	background-attachment: scroll; 
   }
  </style>
 

добавить данные стили
   #headerWrap, #footer, #contentWrap {
	background:none;  
   }
   #footer {
	border:none;
   }

В итоге должно получиться так
<style type="text/css">
   BODY {
	background-image: url(http://regpublic.storeland.ru/web/upload/assets/images/10/9032/background.png); /* Путь к фоновому изображению */
	background-color: #000; /* Цвет фона */
	background-repeat: repeat;
	background-attachment: scroll; 
   }
   #headerWrap, #footer, #contentWrap {
	background:none;  
   }
   #footer {
	border:none;
   }
  </style>

если нужно оставить футер, то меняем

   #headerWrap, #footer, #contentWrap {
	background:none;  
   }
   #footer {
	border:none;
   }

на

#headerWrap, #contentWrap {
	background:none;  
   }


#18 xaknotx

xaknotx

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений

Отправлено 14 Апрель 2011 - 12:38

Просмотр сообщенияsupport (04 Январь 2011 - 01:54) писал:


Вариант второй - вставить код указывающий фон, не изменяя старый.
В этом случае надо обязательно вставлять код после стиля body, чтобы он не был перекрыт старым стилем. Для этого код размещается либо в конце файла, либо под старым стилем, тогда код будет выглядеть примерно так:
body {
  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}
body {
  background: url(http://osc4.template-help.com/zencart_31777/includes/templates/theme439/images/body-bg.jpg) fixed 50% 0%;
}

сделал так,но старый фон всеравно перекрывает новый неподвижный. гугль хром говорит если убрать
#headerWrap {height: 173px;background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;}  
и
#contentWrap {clear: both;background: url({ASSETS_IMAGES_PATH}contentWrap_bg.jpg) repeat-x left bottom;}
и
#footer {background: url("{ASSETS_IMAGES_PATH}botfade.jpg") repeat-x 50% 100%;border-top: 1px solid #CCC;clear: both;color: #999;font-family: verdana;height: 139px;margin: 0px;padding: 0px;text-align: center;}

  font-size: 75%; /* convert 16px base font size to 12px */
  line-height: 1.6666em; /* 20px (12 x 1.6666 = 20) */
  font-family: "Lucida Grande", "Trebuchet MS", Verdana, Arial, sans-serif;
  background-color: #FFF;
  color: #666;
}
body {
  background: url(http://beautypharm.storeland.ru/web/upload/assets/images/9/8194/body_BG.jpg) fixed 50% 0%;
}
#headerWrap {height: 173px;background: url({ASSETS_IMAGES_PATH}header_bg.jpg) repeat-x;}
#header {position: relative;width: 960px;height: 173px;margin: 0 auto;}
#contentWrap {clear: both;background: url({ASSETS_IMAGES_PATH}contentWrap_bg.jpg) repeat-x left bottom;}
#content {width: 960px;margin: 0 auto;}
#contentMainTb {width: 960px;margin:0;border-collapse: collapse;border-spacing: 0;}
#primaryContent {width: 750px;padding:0 0px 40px 0;vertical-align:top;}
.clearBoth {clear: both;height: 0;}
то не поламаю ничего?)))
зато по идее это должно помочь сделать видным новый фон )

#19 Inna

Inna

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 15 Апрель 2011 - 21:03

Здравствуйте, никак не могу вставить фон, уже все пробовала, вставить хочу вот этот фон, подскажите плиз, что делать

Прикрепленные изображения

  • cream25.jpg


#20 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 369 сообщений

Отправлено 16 Апрель 2011 - 05:17

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

#contentWrap {
	background: url("http://img.lovegame.storeland.ru/web/upload/assets/images/10/9559/contentWrap_bg.jpg") repeat-x scroll left bottom transparent;
	clear: both;
}

background - меняете url до своего, недавно залитого изображения. далее можно прописать фон для хедера и футера по аналогии

#headerWrap {
	background: url("http://img.lovegame.storeland.ru/web/upload/assets/images/10/9559/header_bg.jpg") repeat-x scroll 0 0 transparent;
	height: 150px;
}

#footer {
	background: url("http://img.lovegame.storeland.ru/web/upload/assets/images/10/9559/botfade.jpg") repeat-x scroll 50% 100% transparent;
	border-top: 1px solid #CCCCCC;
	clear: both;
	color: #999999;
	font-family: verdana;
	height: 139px;
	margin: 0;
	padding: 0;
	text-align: center;
}

Только если это вам требуется.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных