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


Цвет Левой Колонки, Цвет Посередине, Иэффект Навигации

Автор nymphetamin2004, 14 янв. 2014 19:57

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

#1 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 14 Январь 2014 - 19:57

Всего доброго и с новым годом!
во вложении скриншот с вопросами:
1. как сюда вставить красивую навигацию как в архиве (прикреплено к сообщению).
2. как в этом блоке поменять полностью от вверха и до конца цвет с белого на другой (пусть желтый) / картинка site_bg там задействована только на пол страницы((( можете посомтреть на примере я удалил щас данный фон.
3. сделать фон полностью белым в этой колонке средней от начала и до конца..можно оставить только по бокам как границы серый, а остальное превратить в белый цвет :)

http://o7930.storeland.ru/

Заранее спасибо.
Скрин и архив с демо скриптом во вложении. может кому и понадобиться тоже такое чудо.

P.S. и каксделать границу между левой колонкой и серединой? от есть обрамление черное. а то слеваесть, а между ними нет. Черная полоса-рамка?

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

  • 123.jpg

Прикрепленные файлы

  • Прикрепленный файл  example.zip   100,38К   63 Количество загрузок:

#2 Vaccina

Vaccina

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

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

Отправлено 15 Январь 2014 - 04:35

1. Все файлы кроме jquery-1.3.2.js и index.html загружаете в редактор шаблонов. В style.css меняете в background ссылки на картинки. Также необходимо style.css подключить в шаблоне HTML до </head> прописав сл.строку:
<link href="{ASSETS_STYLES_PATH}style.css" rel="stylesheet" />
В HTML вставляете:
<ul id="navigation">
		 <li class="home"><a href=""><span>Home</span></a></li>
		 <li class="about"><a href=""><span>About</span></a></li>
		 <li class="search"><a href=""><span>Search</span></a></li>
		 <li class="photos"><a href=""><span>Photos</span></a></li>
		 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
		 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
		 <li class="contact"><a href=""><span>Contact</span></a></li>
	 </ul>
в необходимом вам месте.
В main.js в самый конец вставляете:
$(function() {
			 var d=300;
			 $('#navigation a').each(function(){
				 $(this).stop().animate({
					 'marginTop':'-80px'
				 },d+=150);
			 });
			 $('#navigation > li').hover(
			 function () {
				 $('a',$(this)).stop().animate({
					 'marginTop':'-2px'
				 },200);
			 },
			 function () {
				 $('a',$(this)).stop().animate({
					 'marginTop':'-80px'
				 },200);
			 }
		 );
		 });
2.В файле bootstrap-responsive.min.css найдите и измените background
.span4 {
background: none repeat scroll 0 0 #FFFFFF;
height: 100%;
padding-top: 15px;
}
3. В файле bootstrap-responsive.min.css найдите и измените Background
#main {
background: url("http://o7930.storeland.net/site_bg.gif") repeat-y scroll 50% 0 rgba(0, 0, 0, 0);
}

P.S.:
.span4 {
	height: 100%;
	width: 228px;
}
замените на:

.span4 {
border-right: 2px solid #000000;
height: 100%;
width: 226px;
}

#3 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 15 Январь 2014 - 09:00

Просмотр сообщенияVaccina (15 Январь 2014 - 04:35) писал:

1. Все файлы кроме jquery-1.3.2.js и index.html загружаете в редактор шаблонов. В style.css меняете в background ссылки на картинки. Также необходимо style.css подключить в шаблоне HTML до </head> прописав сл.строку:
<link href="{ASSETS_STYLES_PATH}style.css" rel="stylesheet" />
В HTML вставляете:
<ul id="navigation">
		 <li class="home"><a href=""><span>Home</span></a></li>
		 <li class="about"><a href=""><span>About</span></a></li>
		 <li class="search"><a href=""><span>Search</span></a></li>
		 <li class="photos"><a href=""><span>Photos</span></a></li>
		 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
		 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
		 <li class="contact"><a href=""><span>Contact</span></a></li>
	 </ul>
в необходимом вам месте.


Куда бы не вставлял я этот код. Иконки в одном и том же месте. Можно ли как нибудь их сдвинуть в середине вверхнего блока..и строго по центру? На скриншоте границы указаны красным.

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

  • 1234.png

#4 empty9228

empty9228

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

  • Модератоpы
  • 618 сообщений

Отправлено 15 Январь 2014 - 10:01

Здравствуйте! Найдите в файле style.css код
ul#navigation {
	position: fixed;
	margin: 0px;
	padding: 0px;
	top: 0px;
	right: 10px;
	list-style: none;
	z-index:999999;
	width:721px;
}
}
замените его на
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 789px;
list-style: none;
z-index:999999;
width:721px;
text-align: center;
top: 5PX;
}

#5 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 15 Январь 2014 - 20:52

Просмотр сообщенияempty9228 (15 Январь 2014 - 10:01) писал:

Здравствуйте! Найдите в файле style.css код
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
}
замените его на
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 789px;
list-style: none;
z-index:999999;
width:721px;
text-align: center;
top: 5PX;
}
1. Теперь с другого края. Я хочу в средний блок добавить чтоб ровно было. до границ рамки.я же скриншот присылал. высылаю еще скрин, на нем разместить по центру надо где красные маркеры.
2. А где поменять фон на такой же тут?
3. А как тут белый фон поставить?  чтоб серой полосы не было?
4. Как сделать чтобыприусловии что ничего не заказано и корзина пуста она серая, а как заказ приняли так черная с прозрачным фоном ( я ее нарисую).?

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

  • abc.jpg
  • abcd.jpg
  • abcde.jpg

#6 Vaccina

Vaccina

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

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

Отправлено 16 Январь 2014 - 04:08

1. Попробуйте сделать следующее, структурный код

<ul id="navigation">
				 <li class="home"><a href=""><span>Home</span></a></li>
				 <li class="about"><a href=""><span>About</span></a></li>
				 <li class="search"><a href=""><span>Search</span></a></li>
				 <li class="photos"><a href=""><span>Photos</span></a></li>
				 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
				 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
				 <li class="contact"><a href=""><span>Contact</span></a></li>
		 </ul>
поставьте после:

<div class="container-fluid">
<div class="container">

далее измените стили:

.container {
	border: 2px solid #000000;
	border-radius: 10px;
}
ul#navigation {
list-style: none outside none;
margin: 0;
padding: 0;
position: fixed;
right: 789px;
text-align: center;
top: 5px;
width: 721px;
z-index: 999999;
}
на следующие:

.container {
border: 2px solid #000000;
border-radius: 10px;
position: relative;
}
ul#navigation {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 5px;
	width: 721px;
	z-index: 999999;
}

2. Если вы хотите изменить фон левой колонки, то в стилях найдите:

.span4 {
background: none repeat scroll 0 0 #F8F9C7;
height: 100%;
padding-top: 15px;
}

и измените bakckground

3.В стилях найдите:

.span8 {
background: none repeat scroll 0 0 #EDEDED;
padding-left: 10px;
padding-top: 10px;
}
удалите background со значением

4.В HTML найдите:

<div class="cartInfo">
			 <table width="228">
			 <tr>
				 <td class="cartIcon" title="Перейти в корзину" width="58"><a href="{CART_URL}"><img src="{ASSETS_IMAGES_PATH}shop_cart_black.jpg" alt="Корзина"/></a></td>
				 <td class="cartTextData">
				 в <a href="{CART_URL}" title="Перейти в корзину">корзине</a> товаров<br /> на:
				 <span id="cartSum" class="black">
					 {% IF cart_count_empty %}
					 <span>0</span> {CURRENCY_NAME}
					 {% ELSE %}
					 {% FOR cart_sum %}
						 {cart_sum.NOW_WITH_DISCOUNT | money_format}<br />
					 {% ENDFOR %}
					 {% ENDIF %}
				 </span>
				 </td>
			 </tr>
			 </table>
		 </div>
		 <!-- end Корзина -->
замените на:

<div class="cartInfo">
			 <table width="228">
			 <tr>
				 <td class="cartIcon" title="Перейти в корзину" width="58"><a href="{CART_URL}">
{% IF cart_count_empty %}
					 <img src="{ASSETS_IMAGES_PATH}shop_cart_black1.jpg" alt="Корзина"/>
					 {% ELSE %}
<img src="{ASSETS_IMAGES_PATH}shop_cart_black.jpg" alt="Корзина"/>
{% ENDIF %}
</a></td>
				 <td class="cartTextData">
				 в <a href="{CART_URL}" title="Перейти в корзину">корзине</a> товаров<br /> на:
				 <span id="cartSum" class="black">
					 {% IF cart_count_empty %}
					 <span>0</span> {CURRENCY_NAME}
					 {% ELSE %}
					 {% FOR cart_sum %}
						 {cart_sum.NOW_WITH_DISCOUNT | money_format}<br />
					 {% ENDFOR %}
					 {% ENDIF %}
				 </span>
				 </td>
			 </tr>
			 </table>
		 </div>
		 <!-- end Корзина -->

далее загрузите значок пустой корзины с названием shop_cart_black1.jpg

#7 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 16 Январь 2014 - 18:23

Просмотр сообщенияVaccina (16 Январь 2014 - 04:08) писал:

1. Попробуйте сделать следующее, структурный код

<ul id="navigation">
				 <li class="home"><a href=""><span>Home</span></a></li>
				 <li class="about"><a href=""><span>About</span></a></li>
				 <li class="search"><a href=""><span>Search</span></a></li>
				 <li class="photos"><a href=""><span>Photos</span></a></li>
				 <li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
				 <li class="podcasts"><a href=""><span>Podcasts</span></a></li>
				 <li class="contact"><a href=""><span>Contact</span></a></li>
		 </ul>
поставьте после:

<div class="container-fluid">
<div class="container">

далее измените стили:

.container {
	border: 2px solid #000000;
	border-radius: 10px;
}
ul#navigation {
list-style: none outside none;
margin: 0;
padding: 0;
position: fixed;
right: 789px;
text-align: center;
top: 5px;
width: 721px;
z-index: 999999;
}
на следующие:

.container {
border: 2px solid #000000;
border-radius: 10px;
position: relative;
}
ul#navigation {
	list-style: none outside none;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 5px;
	width: 721px;
	z-index: 999999;
}

2. Если вы хотите изменить фон левой колонки, то в стилях найдите:

.span4 {
background: none repeat scroll 0 0 #F8F9C7;
height: 100%;
padding-top: 15px;
}

и измените bakckground



1.Не помогло меню опять не по середине.
2. Я имел ввиду сделать желтым тоже фон где каталог и вы смотрели.

#8 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 16 Январь 2014 - 19:12

Просмотр сообщенияnymphetamin2004 (16 Январь 2014 - 18:23) писал:

1.Не помогло меню опять не по середине.
2. Я имел ввиду сделать желтым тоже фон где каталог и вы смотрели.

2. Находим
.menu_main {
padding-top: 10px\9;
}

Заменяем на
.menu_main {
padding-top: 10px\9;
background: #f8f9c7;
}

Находим
.menu_main ul, .js .menu_main li:hover ul {
display: block;
}

Заменяем на
.menu_main ul, .js .menu_main li:hover ul {
display: block;
background: #f8f9c7;
}

Находим
.menu_main li ul li {
display: block;
margin: 0;
line-height: 1.1;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}

Заменяем на
.menu_main li ul li {
display: block;
margin: 0;
line-height: 1.1;
}

#9 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 16 Январь 2014 - 19:51

Просмотр сообщенияCastiel (16 Январь 2014 - 19:12) писал:

2. Находим
.menu_main {
padding-top: 10px\9;
}

Заменяем на
.menu_main {
padding-top: 10px\9;
background: #f8f9c7;
}

Находим
.menu_main ul, .js .menu_main li:hover ul {
display: block;
}

Заменяем на
.menu_main ul, .js .menu_main li:hover ul {
display: block;
background: #f8f9c7;
}

Находим
.menu_main li ul li {
display: block;
margin: 0;
line-height: 1.1;
border-top: solid 1px #fff;
border-bottom: solid 1px #fff;
}

Заменяем на
.menu_main li ul li {
display: block;
margin: 0;
line-height: 1.1;
}
1. С первым вопросом не поможете  до конца. Про вверхнее меню навигации со спец эффектом сдвинуть в середину ровно?
2. Теперь видите между строк белые полосы появились. И выпадающая меню стала страдать..просто мигает и все. переходит только в аудиотехнику ниже ни как.

#10 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 16 Январь 2014 - 20:10

Помогите с первым вопрос.
Как поменять цвета и шрифт в выпадающем меню каталога слева?

#11 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 16 Январь 2014 - 20:20

Просмотр сообщенияnymphetamin2004 (16 Январь 2014 - 20:10) писал:

Помогите с первым вопрос.
Как поменять цвета и шрифт в выпадающем меню каталога слева?

Редактируем bootstrap-responsive.min.css
Находим
.menu_main li ul a {
padding-left: 10px\9;
}

Добавляем необходимые параметры
color
font-size
font-family

#12 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 16 Январь 2014 - 21:50

Просмотр сообщенияCastiel (16 Январь 2014 - 20:20) писал:

Редактируем bootstrap-responsive.min.css
Находим
.menu_main li ul a {
padding-left: 10px\9;
}

Добавляем необходимые параметры
color
font-size
font-family
спасибо. нашел наконец то) А что сделать вверхк чтоб посередине была навигация?

#13 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 16 Январь 2014 - 21:57

Просмотр сообщенияnymphetamin2004 (16 Январь 2014 - 21:50) писал:

спасибо. нашел наконец то) А что сделать вверхк чтоб посередине была навигация?

Пожалуйста уточните ваш вопрос, про какую навигацию вы имеете ввиду?

#14 nymphetamin2004

nymphetamin2004

    Продвинутый пользователь

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

Отправлено 16 Январь 2014 - 22:47

Просмотр сообщенияCastiel (16 Январь 2014 - 21:57) писал:

Пожалуйста уточните ваш вопрос, про какую навигацию вы имеете ввиду?
на скриншоте Хочу чтоб было где зеленые лини..а не наверху вот так тупо.

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

  • 12341234.jpg

#15 Vaccina

Vaccina

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

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

Отправлено 17 Январь 2014 - 06:04

нам необходимо видеть изменения по инструкциям, чтобы понять почему не сработало, внесите изменения по инструкции выше и сохраните их, чтобы мы могли посмотреть и найти ошибку.
Обратно в Главная


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Техника
  5. → Главная
  6. Privacy Policy