неподвижный фон
#1
Отправлено 03 Январь 2011 - 22:57
хочу переделать оформление примерно вот под этот http://osc4.template...31777/index.php
но почему то при вставлении кода занего фона ничего не полчается, возможно что то не так делаю, напишите как это сделать что бы все получилось
и еще бы не помешало рассказать как залить все остальные элименты, думаю этот манаул не только мне пригадится, заранее огромное спасибо.
#2
Отправлено 04 Январь 2011 - 01:54
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%; }
#4
Отправлено 12 Январь 2011 - 09:12
Детальную информацию по стилям можно прочитать на htmlbook-е
#5
Отправлено 07 Февраль 2011 - 23:35
хотел бы узнать. Возможно ли сделать такие же баннерочки на главой странице. И какой код нужен для того чтоб они менялись. Куда вставить код.
Это ведь не гиф анимация. Система вроде ясна.. Прописывается код, путь к изобраениям и вставляется в нужное место..
Вот только какой код нужен) не знаю.
#6
Отправлено 08 Февраль 2011 - 22:04
<!-- Главная страница --> {% IF index_page %}либо на главной странице в разделе "Сайт" -> "Страницы".
Далее вставляете код изображений которые будут крутиться, подключаете jquery plugin галереи изображений. Можно скопировать метод как на указанном шаблоне, можно использовать другие плагины, например http://jquery.malsup.com/cycle/ или http://medienfreunde.../lab/innerfade/
#7
Отправлено 09 Февраль 2011 - 22:10
вот мануал http://n-wp.ru/4619. Пользуюсь им. Но застрал тутже на втором шаге
#8
Отправлено 11 Февраль 2011 - 13:33
<!-- Главная страница -->
{% IF index_page %}
есть только
<!-- Всевозможные списки товаров -->
{% IF index_page %}
Плиз, можно поподробнее описать процесс установки http://medienfreunde.../innerfade/#n2.
куда все это прописать. Пробовал но не получается.
Хотелось бы у вас тут обосноваться... Удобно все. Вот только проблемку осталось решить...
#9
Отправлено 11 Февраль 2011 - 17:39
Art-t (09 Февраль 2011 - 22:10) писал:
вот мануал http://n-wp.ru/4619. Пользуюсь им. Но застрал тутже на втором шаге
<head> ... предложенный на странице мануала код ... </head>
Art-t (11 Февраль 2011 - 13:33) писал:
<!-- Главная страница -->
{% IF index_page %}
есть только
<!-- Всевозможные списки товаров -->
{% IF index_page %}
Art-t (11 Февраль 2011 - 13:33) писал:
куда все это прописать. Пробовал но не получается.
Хотелось бы у вас тут обосноваться... Удобно все. Вот только проблемку осталось решить...
- Добавляем в редакторе тем (Сайт -> Редактор тем) файлы с сайта 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
Отправлено 12 Февраль 2011 - 08:31
чтото не получается. залил файлы баннеров в редакторе тем. делаю ссылку... копирую нормально. а после сохранения в начале ссылки вот эти точки. но может так и должно быть... заливал изображение на радикал фото. тоже самое.. нажимая на название баннера. он открывается во всех случаях. но вот все это отображается не правильно. Где напортачил? все файлы которые нужно было загрузить в редакторе тем загрузил!
Где напортачил?(
#11
Отправлено 13 Февраль 2011 - 13:43
Во второй вроде всё верно
В третьей - результат. Нет картинок, потому что к ним указан не верный путь.
#12
Отправлено 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
Отправлено 20 Февраль 2011 - 19:55
Вы так же можете указать ссылку на ваш сайт, я постараюсь определить в чём проблема.
#14
Отправлено 21 Февраль 2011 - 18:48
Проверил лежат ли файлы в галереи тем. Все на месте. все файлы которые нужно загрузить из папки с jq.
Чуть позже установлю firefox. Но я в этом совсем плохо понимаю.. Основы только и знаю.
#15
Отправлено 22 Февраль 2011 - 11:07
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:
#16
Отправлено 10 Апрель 2011 - 01:04
support (12 Январь 2011 - 09:12) писал:
Детальную информацию по стилям можно прочитать на htmlbook-е
у меня криво встает, что делаю не так?
http://regpublic.storeland.ru/
#17
Отправлено 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
Отправлено 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;}то не поламаю ничего?)))
зато по идее это должно помочь сделать видным новый фон )
#20
Отправлено 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 анонимных