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


Фон Кнопок Главного Меню

фон кнопок главного меню изме

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

#41 Stasya

Stasya

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

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

Отправлено 13 Июнь 2013 - 12:33

Можно прописать отдельный класс для кнопки В корзину. Например
.kupit {
font: bold 12px/30px Tahoma, Geneva, sans-serif;
color: #ffffff;
text-decoration: none;
background: url("http://design.wofsu.ru/buy-button1.jpg") no-repeat left top;
height: 44px;
width: 150px;
padding-left: 15px;
display: inline-block;
}
Его нужно добавить в файл main.css. И после этого в шаблоне Товар найдите строку
<a id="to_cart" class="more-link" onclick="yaCounter19280101.reachGoal('basket538'); $('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a><br /><br />
и  замените ее на
<a id="to_cart" class="kupit" onclick="yaCounter19280101.reachGoal('basket538'); $('.goodsDataForm').submit(); return false;" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину" href="#">В корзину</a><br /><br />
Теперь тот код, который Вы вставляли в файл main.css Вы можете изменять как хотите, так как все эти изменения будут применяться только относительно кнопки В корзину.

#42 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 15 Июнь 2013 - 11:24

Спасибо все получилось :)
Теперь надеюсь поможете с другой проблемой)
Я каталог оформить так как на изображении. Тоесть добавить под изображения категорий, на фон названия категорий картинки ленточек. Поскажите как это можно осуществить. И еще, текст описания категорий чуть приблизить к изображениям самих категорий)
Без имени-3.jpg

#43 miyako

miyako

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

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

Отправлено 15 Июнь 2013 - 13:11

Просмотр сообщенияlelik538@gmail.com (15 Июнь 2013 - 11:24) писал:

Спасибо все получилось :)
Теперь надеюсь поможете с другой проблемой)
Я каталог оформить так как на изображении. Тоесть добавить под изображения категорий, на фон названия категорий картинки ленточек. Поскажите как это можно осуществить. И еще, текст описания категорий чуть приблизить к изображениям самих категорий)
Прикрепленный файл Без имени-3.jpg

В конец файла main.css добавьте код:
.content_catalog_nested_categories li a span{background:url("путь до изображения");}

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

#44 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 15 Июнь 2013 - 15:43

Просмотр сообщенияmiyako (15 Июнь 2013 - 13:11) писал:

В конец файла main.css добавьте код:
.content_catalog_nested_categories li a span{background:url("путь до изображения");}

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

больше ничего прописывать не надо? я это сделал, ничего не изменилось

#45 support 2.0

support 2.0

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

  • Модераторы
  • 4 950 сообщений

Отправлено 15 Июнь 2013 - 20:25

Просмотр сообщенияlelik538@gmail.com (15 Июнь 2013 - 15:43) писал:

больше ничего прописывать не надо? я это сделал, ничего не изменилось

само изображение ленточки нужно загрузить на сайт и ссылку поставить вместо надписи "путь до изображения"

#46 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 16 Июнь 2013 - 10:54

Просмотр сообщенияsupport 2.0 (15 Июнь 2013 - 20:25) писал:

само изображение ленточки нужно загрузить на сайт и ссылку поставить вместо надписи "путь до изображения"
А, да, я неправильно адрес картинки прописал. Щас сделал. но получилось вот так
http://wofsu.ru/catalog
картинка отображается только на фоне текста, как можно сделать полное ее отображение?

#47 miyako

miyako

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

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

Отправлено 16 Июнь 2013 - 13:34

Просмотр сообщенияlelik538@gmail.com (16 Июнь 2013 - 10:54) писал:

А, да, я неправильно адрес картинки прописал. Щас сделал. но получилось вот так
http://wofsu.ru/catalog
картинка отображается только на фоне текста, как можно сделать полное ее отображение?

Найдите код в шаблоне Товары:
<li>
		<div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
		<a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><span style="font-size: 14pt">{nested_categories_list.NAME}</span></a>
	  </li>
и замените на:
<li>
		<div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
	   <div style="background:url("http://design.wofsu.ru/ленточка1.png");"> <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><span style="font-size: 14pt">{nested_categories_list.NAME}</span></a>
</div>
	  </li>

Найдите код в main.css:
.content_catalog_nested_categories li a span{background:url("http://design.wofsu.ru/ленточка1.png");}
и удалите.

#48 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 16 Июнь 2013 - 13:56

Просмотр сообщенияmiyako (16 Июнь 2013 - 13:34) писал:

Найдите код в шаблоне Товары:
<li>
	 <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
	 <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><span style="font-size: 14pt">{nested_categories_list.NAME}</span></a>
	 </li>
и замените на:
<li>
	 <div class="imagem"><a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><img class="goods-cat-image-medium" {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a></div>
	 <div style="background:url("http://design.wofsu.ru/ленточка1.png");"> <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;"><span style="font-size: 14pt">{nested_categories_list.NAME}</span></a>
</div>
	 </li>

Найдите код в main.css:
.content_catalog_nested_categories li a span{background:url("http://design.wofsu.ru/ленточка1.png");}
и удалите.

вообще пропала( стало как раньше, просто текст(

#49 miyako

miyako

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

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

Отправлено 17 Июнь 2013 - 06:58

Просмотр сообщенияlelik538@gmail.com (16 Июнь 2013 - 13:56) писал:

вообще пропала( стало как раньше, просто текст(

Из-за конфликта кавычек.
Код:
<div style="background:url("http://design.wofsu.ru/ленточка1.png");">
замените на:
<div style="background:url('http://design.wofsu.ru/ленточка1.png');">


#50 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 17 Июнь 2013 - 15:36

Просмотр сообщенияmiyako (17 Июнь 2013 - 06:58) писал:

Из-за конфликта кавычек.
Код:
<div style="background:url("http://design.wofsu.ru/ленточка1.png");">
замените на:
<div style="background:url('http://design.wofsu.ru/ленточка1.png');">

Сейчас изображение обрезается снизу. Для того чтобы оно не обрезалось нужно увеличить значение (Максимальный размер по высоте/ширине в пикселях для списка категорий внутри категории ) в настройках?
и как сделать чтобы изображение было посередине и не повторялось как сейчас?

#51 Stasya

Stasya

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

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

Отправлено 17 Июнь 2013 - 17:51

Вам необходимо эту строчку
<div style="background:url('http://design.wofsu.ru/ленточка1.png');">
заменить на
<div style="background:url('http://design.wofsu.ru/ленточка1.png');height: 29px;">


#52 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 17 Июнь 2013 - 18:26

Просмотр сообщенияStasya (17 Июнь 2013 - 17:51) писал:

Вам необходимо эту строчку
<div style="background:url('http://design.wofsu.ru/ленточка1.png');">
заменить на
<div style="background:url('http://design.wofsu.ru/ленточка1.png');height: 29px;">

никак не помогло(

#53 Сake

Сake

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

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

Отправлено 18 Июнь 2013 - 02:41

Замените вашу строку

<div style="background:url('http://design.wofsu.ru/ленточка1.png');height: 29px;">

на

<div style="height: 29px; background: url('http://design.wofsu.ru/ленточка1.png') no-repeat center center; line-height: 23px;">

далее в файле стилей main.css найдите

.content_catalog_nested_categories li {
background: none repeat scroll 0 0 transparent !important;
float: left;
height: 205px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 1em;
text-align: center;
width: 190px;
}

и замените

.content_catalog_nested_categories li {
background: none repeat scroll 0 0 transparent !important;
float: left;
height: 220px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 1em;
text-align: center;
width: 190px;
}


#54 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 18 Июнь 2013 - 12:53

Просмотр сообщенияСake (18 Июнь 2013 - 02:41) писал:

Замените вашу строку

<div style="background:url('http://design.wofsu.ru/ленточка1.png');height: 29px;">

на

<div style="height: 29px; background: url('http://design.wofsu.ru/ленточка1.png') no-repeat center center; line-height: 23px;">

далее в файле стилей main.css найдите

.content_catalog_nested_categories li {
background: none repeat scroll 0 0 transparent !important;
float: left;
height: 205px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 1em;
text-align: center;
width: 190px;
}

и замените

.content_catalog_nested_categories li {
background: none repeat scroll 0 0 transparent !important;
float: left;
height: 220px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 1em;
text-align: center;
width: 190px;
}

http://wofsu.ru/catalog
теперь не обрезается , про повторение все равно идет, и не выравнивание не посередине(
и еще заодно скажите где можно изменить цвет шрифта название категорий, чтобы он всегда был белый. и при наведении и без

#55 miyako

miyako

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

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

Отправлено 18 Июнь 2013 - 14:11

Просмотр сообщенияlelik538@gmail.com (18 Июнь 2013 - 12:53) писал:

http://wofsu.ru/catalog
теперь не обрезается , про повторение все равно идет, и не выравнивание не посередине(
и еще заодно скажите где можно изменить цвет шрифта название категорий, чтобы он всегда был белый. и при наведении и без

Проверьте еще раз. Вы не сделали все шаги инструкции - http://forum.storela...__40#entry73958

Цвет
Добавьте в конец main.css код:
.imagem a:hover, .imagem a {color:white;}


#56 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 18 Июнь 2013 - 14:21

Просмотр сообщенияmiyako (18 Июнь 2013 - 14:11) писал:

Проверьте еще раз. Вы не сделали все шаги инструкции - http://forum.storela...__40#entry73958

Цвет
Добавьте в конец main.css код:
.imagem a:hover, .imagem a {color:white;}


точняяяк,исправил а забыл сохранить))) спасибо все получилось))

только вот цвет не меняется все равно(

#57 miyako

miyako

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

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

Отправлено 18 Июнь 2013 - 15:49

Просмотр сообщенияlelik538@gmail.com (18 Июнь 2013 - 14:21) писал:

точняяяк,исправил а забыл сохранить))) спасибо все получилось))

только вот цвет не меняется все равно(

Извините, не тот класс. Замените код на такой:
.content_catalog_nested_categories a:hover, .content_catalog_nested_categories a {color:white;}


#58 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 18 Июнь 2013 - 16:03

Просмотр сообщенияmiyako (18 Июнь 2013 - 15:49) писал:

Извините, не тот класс. Замените код на такой:
.content_catalog_nested_categories a:hover, .content_catalog_nested_categories a {color:white;}
Спасибоо большое!) все получилось так как надо!))))

а теперь, помогите пожалуйста в другой проблеме) поставить слайдер
http://pcvector.net/...ayder.html#sel=
во всех темах ккоторых нашел показывают как ставить слайдер NIVO а мне нужно этот
я загрузил скрипты и стили и картинки в файлы, а как прописывать в HTML этот слайдер незнаю(

#59 Taisia

Taisia

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

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

Отправлено 18 Июнь 2013 - 18:53

Вам необходимо закачать  на сайт файл из папки css screen.css, из папки js файл easySlider1.7.js, из папки images bg.jpg, btn_next.png, btn_prev.png
так же загрузить изображения которые вы хотите отображать в слайдере
Далее вам необходимо в коде файла HTML  найти код {BODY} и перед ним вставить этот код из примера

<div id="content">
<div id="slider">
<ul>							
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}01.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}03.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}02.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}04.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}05.jpg" alt="" /></a></li>					
</ul>		
</div>	
</div>


где вместо 01.jpg и тд вы вставляете название ваших изображений которые хотите выводить в слайдере

после этого кода (ниже него)
вставьте код

$(document).ready(function(){				
$("#slider").easySlider({				
auto: true,				
continuous: true			
});		
});


Далее там же (файл HTML) найти строку

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

ПЕРЕД ней вставить код


<script type="text/javascript" src="{ASSETS_JS_PATH}easySlider1.7.js"></script>

найти строку
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />
и ПОСЛЕ нее вставить код
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}screen.css" type="text/css" />

в файле screen.css
найти код
body {
background: url('../images/bg.jpg') repeat;
}

заменить на код

body {
background: url('{ASSETS_IMAGES_PATH}bg.jpg') repeat;
}

а так же код

#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url('../images/btn_prev.png') no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url('../images/btn_next.png') no-repeat 0 0;
}

заменить на код

#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url('{ASSETS_IMAGES_PATH}btn_prev.png') no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url('{ASSETS_IMAGES_PATH}btn_next.png') no-repeat 0 0;
}


#60 lelik538@gmail.com

lelik538@gmail.com

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

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

Отправлено 18 Июнь 2013 - 20:10

Просмотр сообщенияTaisia (18 Июнь 2013 - 18:53) писал:

Вам необходимо закачать  на сайт файл из папки css screen.css, из папки js файл easySlider1.7.js, из папки images bg.jpg, btn_next.png, btn_prev.png
так же загрузить изображения которые вы хотите отображать в слайдере
Далее вам необходимо в коде файла HTML  найти код {BODY} и перед ним вставить этот код из примера

<div id="content">
<div id="slider">
<ul>							
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}01.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}03.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}02.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}04.jpg" alt="" /></a></li>				
<li><a href="#"><img src="{ASSETS_IMAGES_PATH}05.jpg" alt="" /></a></li>					
</ul>		
</div>	
</div>


где вместо 01.jpg и тд вы вставляете название ваших изображений которые хотите выводить в слайдере

после этого кода (ниже него)
вставьте код

$(document).ready(function(){				
$("#slider").easySlider({				
auto: true,				
continuous: true			
});		
});


Далее там же (файл HTML) найти строку

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>

ПЕРЕД ней вставить код


<script type="text/javascript" src="{ASSETS_JS_PATH}easySlider1.7.js"></script>

найти строку
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}main.css" type="text/css" />
и ПОСЛЕ нее вставить код
<link rel="stylesheet" href="{ASSETS_STYLES_PATH}screen.css" type="text/css" />

в файле screen.css
найти код
body {
background: url('../images/bg.jpg') repeat;
}

заменить на код

body {
background: url('{ASSETS_IMAGES_PATH}bg.jpg') repeat;
}

а так же код

#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url('../images/btn_prev.png') no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url('../images/btn_next.png') no-repeat 0 0;
}

заменить на код

#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url('{ASSETS_IMAGES_PATH}btn_prev.png') no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url('{ASSETS_IMAGES_PATH}btn_next.png') no-repeat 0 0;
}

http://wofsu.ru/

Сделал все как вы сказали, получилось вот так(((( помогите исправить что не так(




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

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