Сообщений в теме: 117

[lis383]

Добрый день. Как можноь поменять цвет главного меню как в прикрепленном файле сайт maniacasual.ru

[support 2.0]

lis383 (22 Ноябрь 2012 - 13:13) писал:

Добрый день. Как можноь поменять цвет главного меню как в прикрепленном файле Безымянный.png сайт maniacasual.ru

1. Изменить фон главного меню на черный (238 строка):
Панель управления -> Сайт -> Редактор тем -> файл main.css
Найдите блок

#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/153/152581/nav_item_bg.gif") repeat-x bottom left;font-size: 14px;}

и замените на

#mainNav table td div a:link, #mainNav table td div a:visited {
display: block;
height: 26px;
color: white;
padding: 4px 10px 0 10px;
background: black;
}

Теперь найдите блок (231 строка)

#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("/web/upload/assets/images/153/152581/nav_bg.jpg") no-repeat;}

и замените на
#mainNav {
position: absolute;
left: 5px;
bottom: 0;
height: 35px;
background: black;
}

2. Изменить цвет активной ссылки меню
в файле main.css найдите блок (241 строка)

#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}

и замените на

#mainNav table td div a.selected, #mainNav table td div a:hover, #mainNav table td div a:active {
color: orchid;
text-decoration: none;
background-position: bottom right;
}

background: black; - меняет цвет фона на черный
color: white; - меняет цвет шрифта на белый

3. Поменять размер шрифта в главном меню:
найдите блок (238 стока)

#mainNav table td div a:link, #mainNav table td div a:visited {
display: block;
height: 26px;
color: white;
padding: 4px 10px 0 10px;
background: black;
}

и замените на

#mainNav table td div a:link, #mainNav table td div a:visited {
display: block;
height: 26px;
color: white;
padding: 4px 10px 0 10px;
background: black;
font-size: 14px;
} 

Далее найдите блок (361 строка)

#cartInfo {
position: absolute;
bottom: 10px;
right: 2px;
white-space: nowrap;
}

и замените на

#cartInfo {
position: absolute;
bottom: 10px;
right: -67px;
white-space: nowrap;
}

4. Для того, чтобы все Ваши разделы меню были большими буквами, зайдите в Панель управления -> Сайт -> Меню -> Все заголовки пропишите заглавными буквами (Caps Lock)

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

• 

[lis383]

Спасибо Вам большое! Все получилось.
А возможно сделать как на рисунке полоску на весь экран и размещение корзины выше и срисунком?

[support 2.0]

lis383 (22 Ноябрь 2012 - 15:03) писал:

Спасибо Вам большое! Все получилось.
А возможно сделать как на рисунке полоску на весь экран и размещение корзины выше и срисунком?

Да, конечно возможно.
Для того чтобы полоса была по всей ширине, Вам нужно скачать файл, который используется в качестве фона (header_bg.jpg). С помощью графического редактора добавьте внизу черную горизонтальную полосу. Вы можете скачать изображение, которое прикреплено к данному моему сообщению. Далее удалите файл header_bg.jpg через "админку" и загрузите новый.
Теперь найдите в main.css блок (241 строка)

#mainNav table td.last {
padding-right: 5px;
}

и замените на

#mainNav table td.last {
padding-right: 5px;
background: black;}

Корзину теперь требуется поставить повыше, например, под поиском.
Найдите блок

#cartInfo {
position: absolute;
bottom: 10px;
right: -67px;
white-space: nowrap;
}

и замените на

#cartInfo {
position: absolute;
bottom: 74px;
right: 52px;
white-space: nowrap;
}

Чтобы вставить изображение корзины, Вам нужно зайти в Панель управления -> Сайт -> Редактор тем -> HTML ->
после

<div id="cartInfo">

вставить

<a href="{CART_URL}"><span class="orderIcon cart"></span></a>

Для того, чтобы изменить изображение на другое скачайте файл orderIcons.png и замените именно изображение корзины, другие менять не нужно, т.к. они предназначены для других разделов. Размер иконки должно быть не более 36х36

[lis383]

Добрый день. Спасибо за помощь.
На форуме понравился слайдер. Все работает, только с расположение проблема. Помогите расположить под главным меню.И вопрос по фото, когда я сови загружу, нужно просто заменить их имя, правильно?

[Koderhan]

lis383 (23 Ноябрь 2012 - 09:43) писал:

Добрый день. Спасибо за помощь.
На форуме понравился слайдер. Все работает, только с расположение проблема. Помогите расположить под главным меню.И вопрос по фото, когда я сови загружу, нужно просто заменить их имя, правильно?

Расположение слайдера под меню .
У вас файл nyvo.csstemplate не подключается к сайту.
Проверьте наличие этого файла в редакторе тем и прописаны ли пути к нему в файле HTML.
Да, Нужно написать переменную а потом название файла.

{ASSETS_IMAGES_PATH}

Пример:

<img src="{ASSETS_IMAGES_PATH}название_картинки.jpg" alt="" />

[lis383]

я файл не скачивала. просто скопировала в теме  и все.Слайдер реализован на сайте http://ezonmexico.com/. Где взять вайл и как прописать пути. Спасибо.

[support 2.0]

lis383 (23 Ноябрь 2012 - 13:20) писал:

я файл не скачивала. просто скопировала в теме  и все.Слайдер реализован на сайте http://ezonmexico.com/. Где взять вайл и как прописать пути. Спасибо.

Я так понимаю, что вот именно такой слайдер Вы и хотели бы.
Здесь Вы можете скачать архив (нажмите ZIP). После скачивания у Вас будет 3 файла: responsiveslides.css, responsiveslides.js, responsiveslides.min.js. Их нужно загрузить на Ваш сайт.

Подключение файлов (перед </head> вставить)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

Перед {BODY} вставить:

<ul class="rslides">
  <li><img src="{ASSETS_IMAGES_PATH}название изображения.jpg" alt="" /></li>
  <li><img src="{ASSETS_IMAGES_PATH}название изображения.jpg" alt="" /></li>
  <li><img src="{ASSETS_IMAGES_PATH}название изображения.jpg" alt="" /></li>
</ul>

<!-- запуск слайдера -->
<script>
  $(function () {
	$(".rslides").responsiveSlides();
  });
</script>

Сохранить. Чтобы настроить скорость переходи и время между слайдами, зайдите в responsiveslides.js
speed: 1000,            // Скорость перехода, в миллисекундах
timeout: 4000,         // Время перехода между слайдами, в миллисекундах

[lis383]

[quote name='support 2.0' timestamp='1353589288' post='32493']
Да, конечно возможно.
Для того чтобы полоса была по всей ширине, Вам нужно скачать файл, который используется в качестве фона (header_bg.jpg). С помощью графического редактора добавьте внизу черную горизонтальную полосу. Вы можете скачать изображение, которое прикреплено к данному моему сообщению. Далее удалите файл header_bg.jpg через "админку" и загрузите новый.
Теперь найдите в main.css блок (241 строка)


При скачивании файла (header_bg.jpg). Фотошоп не видит ничего. Белый лист. Что нетак?

[Koderhan]

lis383 (24 Ноябрь 2012 - 17:53) писал:

Да, конечно возможно.
Для того чтобы полоса была по всей ширине, Вам нужно скачать файл, который используется в качестве фона (header_bg.jpg). С помощью графического редактора добавьте внизу черную горизонтальную полосу. Вы можете скачать изображение, которое прикреплено к данному моему сообщению. Далее удалите файл header_bg.jpg через "админку" и загрузите новый.
Теперь найдите в main.css блок (241 строка)

#mainNav table td.last {
padding-right: 5px;
}

При скачивании файла (header_bg.jpg). Фотошоп не видит ничего. Белый лист. Что нетак?

Это картинка-фон верхнего меню.

[eee1973]

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

[Koderhan]

eee1973 (18 Январь 2013 - 07:45) писал:

Здравствуйте, подскажите, создал в сторонней програмке меню вот такого вида 1.png  , сохранил его , но там куча файлов и как дальше это дело вставить в свой магазин вместо стандартного меню?  Или можно меню такого вида сделать из стандартного в самом магазине?

Меню с подомным видом можно реализовать и на стандартном шаблоне.
В зависимости от того какой у вас шаблон. А вставить это сгенерированное меню на сайт сложнее чем сделать новое.

[eee1973]

У меня шаблон Мокко

[Koderhan]

eee1973 (18 Январь 2013 - 10:19) писал:

У меня шаблон Мокко

Пожалуйста, сообщите нам номер аккаунта или адрес магазина. И опишите примерно как должно выглядеть меню.

[eee1973]

Аккаунт 166598
сейчас у меня вот так
хотелось бы примерно так   или вот так   , только цвета кнопок потом более точно подберу. То есть нужны кнопки немного скругленные и на некотором расстоянии друг от друга а между ними основной фон магазина.

[support 2.0]

eee1973 (18 Январь 2013 - 11:21) писал:

Аккаунт 166598
сейчас у меня вот так Сейчас.png
хотелось бы примерно так   Надо.png или вот так   Надо2.png , только цвета кнопок потом более точно подберу. То есть нужны кнопки немного скругленные и на некотором расстоянии друг от друга а между ними основной фон магазина.

По дизайну можно будет изменить, если Вас что-то не устроит. Сейчас Вы можете посмотреть на скриншоте как это будет выглядеть. Для того, чтобы сделать такое же, зайдите в раздел Сайт -> Редактор тем -> файл main.css -> найдите блок

/* main navigation ---------------------------------------------------------------- */
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;background: url("/web/upload/assets/images/167/166598/nav_bg.jpg") no-repeat;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;background: url("/web/upload/assets/images/167/166598/nav_bg_right.gif") no-repeat bottom right;padding: 5px 5px 0 0;height: 30px;margin:auto;}
#mainNav table td {padding:5px 0 0 2px;}
#mainNav table td.first {padding-left: 5px;}
#mainNav table td.last {padding-right: 5px;}
#mainNav table td div {float:left;font-size: 1.25em;line-height: 1.3333em;height: 30px;background: #FFF url("/web/upload/assets/images/167/166598/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px;color: #666;padding: 4px 10px 0 10px;background: url("/web/upload/assets/images/167/166598/nav_item_bg.gif") repeat-x bottom left;}
#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {color: #D0431D;text-decoration: none;background-position: bottom right;}
/* !breadcrumb ---------------------------------------------------------------- */

и замените на

/* main navigation ---------------------------------------------------------------- */
#mainNav {position: absolute;left: 5px;bottom: 0;height: 35px;}
#mainNav table {float:left;border-collapse: collapse;border-spacing: 0;padding: 5px 5px 0 0;height: 30px;margin:auto;}
#mainNav table td {padding:5px 0 0 2px;}
#mainNav table td.first {padding-left: 5px;}
#mainNav table td.last {padding-right: 5px;}
#mainNav table td div {
float:left;
font-size: 1.25em;
line-height: 1.3333em;
height: 30px;
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
	 background:#006400; /* Для старых браузров */
background: -moz-linear-gradient(top, #66CDAA, #006400); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
			 color-stop(0%,#66CDAA), color-stop(100%,#006400));
/* Chrome 10+, Safari 5.1+ */

background: -webkit-linear-gradient(top,#66CDAA,#006400);

background: -o-linear-gradient(top,#66CDAA,#006400); /* Opera 11.10+ */

background: -ms-linear-gradient(top,#66CDAA,#006400); /* IE10 */
background: linear-gradient(top, #66CDAA, #006400); /* CSS3 */
border: 1px solid #333;
}
#mainNav table td div a:link,
#mainNav table td div a:visited {display: block;height: 26px; color: white; padding: 4px 10px 0 10px;}
#mainNav table td div a.selected,
#mainNav table td div a:hover,
#mainNav table td div a:active {
color: white;
text-decoration: none;
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
background-position: bottom right;
	 background:rgb(53, 48, 48); /* Для старых браузров */
background: -moz-linear-gradient(top, rgb(195, 206, 202), rgb(53, 48, 48)); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
			 color-stop(0%,rgb(195, 206, 202)), color-stop(100%,rgb(53, 48, 48)));
/* Chrome 10+, Safari 5.1+ */

background: -webkit-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48));

background: -o-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* Opera 11.10+ */

background: -ms-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* IE10 */
background: linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* CSS3 */
border: 1px solid #333;
}
/* !breadcrumb ---------------------------------------------------------------- */

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

• 

[eee1973]

Спасибо. Все получилось и очень красиво!  Подскажите в каком месте менять цвет нажатой кнопки и не нажатых и цвет текста на кнопках.

[support 2.0]

eee1973 (18 Январь 2013 - 14:33) писал:

Спасибо. Все получилось и очень красиво!  Подскажите в каком месте менять цвет нажатой кнопки и не нажатых и цвет текста на кнопках.

Цвет кнопок по умолчанию:

background:#006400; /* Для старых браузров */
background: -moz-linear-gradient(top, #66CDAA, #006400); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
						 color-stop(0%,#66CDAA), color-stop(100%,#006400));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top,#66CDAA,#006400);
background: -o-linear-gradient(top,#66CDAA,#006400); /* Opera 11.10+ */
background: -ms-linear-gradient(top,#66CDAA,#006400); /* IE10 */
background: linear-gradient(top, #66CDAA, #006400); /* CSS3 */

#66CDAA - светло-зеленый
#006400 - темно-зеленый

Цвет для кнопок при наведении и нажатии

	  background:rgb(53, 48, 48); /* Для старых браузров */
background: -moz-linear-gradient(top, rgb(195, 206, 202), rgb(53, 48, 48)); /* Firefox 3.6+ */
/* Chrome 1-9, Safari 4-5 */
background: -webkit-gradient(linear, left top, left bottom,
						 color-stop(0%,rgb(195, 206, 202)), color-stop(100%,rgb(53, 48, 48)));
/* Chrome 10+, Safari 5.1+ */
background: -webkit-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48));
background: -o-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* Opera 11.10+ */
background: -ms-linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* IE10 */
background: linear-gradient(top,rgb(195, 206, 202),rgb(53, 48, 48)); /* CSS3 */

rgb(195, 206, 202) - светло-серый
rgb(53, 48, 48) - темно-серый

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

[eee1973]

Спасибо, поразбираюсь. Подскажите, у меня в разных браузерах по разному отображаются товары (в 3 и 4 ряда)...как сделать, чтобы везде было по 4.   

[support 2.0]

eee1973 (18 Январь 2013 - 15:39) писал:

Спасибо, поразбираюсь. Подскажите, у меня в разных браузерах по разному отображаются товары (в 3 и 4 ряда)...как сделать, чтобы везде было по 4. google chrome.png   enternet explorer.png

Зайдите в раздел Сайт -> Редактор тем -> файл main.css
найдите блок

th, td {
  font-size: 1em;
  margin: 0.8333em 0 0.8333em 0;
  text-align: left;
  padding: 3px 10px 3px 0;
}

замените на

th, td {
  font-size: 1em;
  margin: 0.8333em 0 0.8333em 0;
  text-align: left;
  padding: 3px 8px 3px 0;
}

Лучше самостоятельно не меняйте именно в этом блоке никакие другие цифры. Результаты данного блока действительны не только для этой страницы товаров, но и для всего, где есть таблицы.
Думаю, незначительное изменение в 2px не должно нигде особо плохо отобразиться