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


Перемещение Слайдера И Изменение Его Размера

слайдер Nivo Slider пластик

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

#1 Olga89

Olga89

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

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

Отправлено 05 Август 2014 - 11:22

Здравствуйте, помогите пожалуйста переместить слайдер и изменить его размер как на картинке.
Аккаунт SL-303199

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

  • сайт.jpg


#2 Olga89

Olga89

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

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

Отправлено 05 Август 2014 - 11:59

И еще вопрос: как изменить цвет следующих элементов:

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

  • сайт 2.jpg
  • сайт3.jpg


#3 Ирина345

Ирина345

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

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

Отправлено 05 Август 2014 - 12:01

Просмотр сообщенияOlga89 (05 Август 2014 - 11:22) писал:

Здравствуйте, помогите пожалуйста переместить слайдер и изменить его размер как на картинке.
Аккаунт SL-303199
Здравствуйте, найдите в HTML код
<!-- Nyvo слайдер который отображается на главной --> 

{% IF index_page %} 

<!-- Обёртка, указывающая стиль темы --> 

<div class="theme-default" style="padding: 1em; display: none;"> 

<!-- Непосредственный код слайдера --> 

<div id="slider">

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/slider.jpg" alt="" /> 

<a href="/"><img src="/img/faq/questions/nyvo_slider/nemo.jpg" alt="" /></a> 

<img title="Пример картинки с заголовком" src="http://storeland.ru/img/faq/questions/nyvo_slider/toystory.jpg" alt="" /> 

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/walle.jpg" alt="" /> 

<img src="http://storeland.ru/img/faq/questions/nyvo_slider/cars.jpg" alt="" /> 

</div> 
</div>

<!-- Запуск слайдера --> 

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider().parent().show(); }); 

</script>

{% ENDIF %} 
и перенесите его перед строчкой

 <div id="content">
		{% IF index_page %} 


#4 Ирина345

Ирина345

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

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

Отправлено 05 Август 2014 - 12:08

Просмотр сообщенияOlga89 (05 Август 2014 - 11:59) писал:

И еще вопрос: как изменить цвет следующих элементов:
1. для изменения данного блока найдите в main.css
 #panelsite div.centercol .menuheader ul li a:hover, #panelsite div.centercol .menuheader ul li a.current { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 6px; background:#4799ba; color:#FFF; }
        для смены цвета меняете значение  background:#4799ba например на background:#123456
2,3 данный блок это картинка
4. уточните как хотите изменить
5. найдите в main.css
#footer { clear:both;width:100%; background:#485d63; border-top:4px solid #64828b; margin:20px 0 17px 0; }
меняете значение  background:#485d63;

#5 Olga89

Olga89

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

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

Отправлено 05 Август 2014 - 12:22

1. Спасибо, слайдер переместился, но зазор внизу очень большой, как его уменьшить?
4. Нужно изменить цвет линии наверху с синего на любой другой.

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

  • сайт4.jpg


#6 Ирина345

Ирина345

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

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

Отправлено 05 Август 2014 - 12:28

Просмотр сообщенияOlga89 (05 Август 2014 - 12:22) писал:

1. Спасибо, слайдер переместился, но зазор внизу очень большой, как его уменьшить?
4. Нужно изменить цвет линии наверху с синего на любой другой.
1. найдите в nyvo.css
.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyvo_loading.gif) no-repeat 50% 50%;
margin-bottom:50px;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
} 
замените на

.theme-default .nivoSlider {
position:relative;
background:#fff url({ASSETS_IMAGES_PATH}nyvo_loading.gif) no-repeat 50% 50%;
-webkit-box-shadow: 0px 1px 5px 0px #4a4a4a;
-moz-box-shadow: 0px 1px 5px 0px #4a4a4a;
box-shadow: 0px 1px 5px 0px #4a4a4a;
}
2 данный блок тоже является картинкой

#7 Olga89

Olga89

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

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

Отправлено 05 Август 2014 - 13:07

Спасибо огромное. :wub:
Разобралась со сменой цветов, но застряла на кнопке "Сравнить товары". Нужно тоже сделать градиентом, как другие кнопки. Это возможно?

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

  • сайт4.jpg


#8 Ирина345

Ирина345

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

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

Отправлено 05 Август 2014 - 13:20

Просмотр сообщенияOlga89 (05 Август 2014 - 13:07) писал:

Спасибо огромное. :wub:
Разобралась со сменой цветов, но застряла на кнопке "Сравнить товары". Нужно тоже сделать градиентом, как другие кнопки. Это возможно?
найдите в main.css
#left .block .bluesmall, #right .block .bluesmall { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) no-repeat; height:28px; padding:9px 0 0 20px; }
замените на
#left .block .bluesmall, #right .block .bluesmall { background: linear-gradient(#948E8E, #2E2E2A);height: 28px;border-radius: 4px 4px 0px 0px;padding: 9px 0 0 20px;}
далее найдите
  #left .block .bluelarge, #right .block .bluelarge { background:url({ASSETS_IMAGES_PATH}block-bg.jpg) 0 -37px no-repeat;height:36px; padding:15px 0 0 20px; }
замените на
  #left .block .bluelarge, #right .block .bluelarge { background: linear-gradient(#948E8E, #2E2E2A);border-radius: 4px 4px 0px 0px;height:36px; padding:15px 0 0 20px; }
далее найдите
	 #left .block .false, #right .block .false { color:#353535; padding:7px 0; }
замените на
	 #left .block .false, #right .block .false { background: linear-gradient(#948E8E, #2E2E2A);border-radius: 4px 4px 0px 0px;color:#353535; padding:7px 0; }


#9 Olga89

Olga89

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

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

Отправлено 07 Август 2014 - 06:54

Выполнив вышеперечисленные действия, получилось вот так:

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

  • сайт5.jpg


#10 Olga89

Olga89

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

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

Отправлено 07 Август 2014 - 07:16

Кстати, как изменить цвет меню внизу страницы тоже?

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

  • сайт6.jpg


#11 Danil

Danil

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

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

Отправлено 07 Август 2014 - 07:52

Просмотр сообщенияOlga89 (07 Август 2014 - 07:16) писал:

Кстати, как изменить цвет меню внизу страницы тоже?

Здравствуйте.
В main.css найдите строчку
#footer #main .menufooter ul li a:hover, #footer #main .menufooter ul li a.current { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 6px; background:#4799ba; color:#FFF; }
И замените на
#footer #main .menufooter ul li a:hover, #footer #main .menufooter ul li a.current { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 6px; background:#545555; color:#FFF; }


#12 Olga89

Olga89

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

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

Отправлено 07 Август 2014 - 08:09

Спасибо,  но я решила переиграть нижнюю часть.
Подскажите пожалуйста,
1. Как изменить ширину подвала как на картинке и при этом сделать закругленные углы?
2. Как удалить нижнее меню оттуда?
3. Как перенести в подвал блок с видами платежных систем, отрегулировав его по ширине (углы закругленные)? (Как на картинке)

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

  • сайт7.jpg
  • сайт8.jpg


#13 Danil

Danil

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

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

Отправлено 07 Август 2014 - 09:14

Просмотр сообщенияOlga89 (07 Август 2014 - 08:09) писал:

Спасибо,  но я решила переиграть нижнюю часть.
Подскажите пожалуйста,
1. Как изменить ширину подвала как на картинке и при этом сделать закругленные углы?
2. Как удалить нижнее меню оттуда?
3. Как перенести в подвал блок с видами платежных систем, отрегулировав его по ширине (углы закругленные)? (Как на картинке)


Найдите в html этот код на 796 строке


<ul>
		{% FOR menu %}
		 {% FOR footer %}
			{% FOR links %}<li {% IF menu.footer.links.first %}class="main"{% ENDIF %} ><a href="{menu.footer.links.URL}" {% IF menu.footer.links.SELECTED %}class="current"{%ENDIF%} {% IF menu.footer.links.TITLE %}title="{menu.footer.links.TITLE}"{% ENDIF %}>{menu.footer.links.NAME}</a></li>{% ENDFOR %}
		 {% ENDFOR %}
		{% ENDFOR %}
</ul>

И замените его на


<div id="panelbottom">
<div class="money">
	<p>Мы принимаем:</p>
	<div class="img"></div>
</div>
<div class="schetchiki">
	{SETTINGS_STORE_HTML_CODE}
	{SETTINGS_STORE_REGION}{% IF SETTINGS_STORE_REGION && COPYRIGHT_FOR_DESIGN_PLASTIC %}&nbsp;|&nbsp;{% ENDIF %}{COPYRIGHT_FOR_DESIGN_PLASTIC}
</div>
</div>

После найдите в html тот код на 811 строке и удалите


<!-- Нижняя панель сайта -->
<div id="panelbottom">
<div class="money">
<p>Мы принимаем:</p>
<div class="img"></div>
</div>
<div class="schetchiki">
{SETTINGS_STORE_HTML_CODE}
{SETTINGS_STORE_REGION}{% IF SETTINGS_STORE_REGION && COPYRIGHT_FOR_DESIGN_PLASTIC %}&nbsp;|&nbsp;{% ENDIF %}{COPYRIGHT_FOR_DESIGN_PLASTIC}
</div>
</div>
<!-- Нижняя панель сайта-Конец -->

Затем в main.css найдите код

#footer { clear:both;width:100%; background: linear-gradient(#7ab2cb, #3285a7);border-radius: 4px 4px 0px 0px;color:#353535; border-top:4px solid #64828b; margin:20px 0 17px 0; }

И замените его на
#footer {clear: both;width: 1000px;background: linear-gradient(#7ab2cb, #3285a7);border-radius: 10px;color: #353535;border-top: 4px solid #64828b;margin: 10px auto;max-width: 1000px;}

Так же найдите в main.css код

#footer #main .menufooter {
float: left;
background: url(http://g38507.storeland.net/menufooter-bg.jpg) repeat-x;
width: 750px;
height: 39px;
overflow: hidden;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

И замените его на

#footer #main .menufooter {
float: left;
background: url(http://g38507.storeland.net/menufooter-bg.jpg) repeat-x;
width: 736px;
height: 39px;
overflow: hidden;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
margin-left: 10px;
}


#14 Olga89

Olga89

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

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

Отправлено 07 Август 2014 - 12:03

Спасибо!!! Все получилось.

Просмотр сообщенияOlga89 (07 Август 2014 - 06:54) писал:

Выполнив вышеперечисленные действия, получилось вот так:

А нужно, чтобы градиентом закрасило область заголовка "Сравнить товары"

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

  • сайт5.jpg


#15 Danil

Danil

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

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

Отправлено 07 Август 2014 - 12:17

Просмотр сообщенияOlga89 (07 Август 2014 - 12:03) писал:

Спасибо!!! Все получилось.



А нужно, чтобы градиентом закрасило область заголовка "Сравнить товары"


Найдите в main.css

#left .block .false, #right .block .false {
background: linear-gradient(#948E8E, #2E2E2A);
border-radius: 4px 4px 0px 0px;
color: #353535;
padding: 7px 0;
}

И замените на

#left .block .false, #right .block .false {
background: linear-gradient(#948E8E, #2E2E2A);
border-radius: 4px 4px 0px 0px;
color: #FFFFFF;
padding: 7px 0;
}


#16 Olga89

Olga89

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

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

Отправлено 08 Август 2014 - 07:30

Ничего не изменилось. :(

#17 Danil

Danil

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

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

Отправлено 08 Август 2014 - 07:48

Просмотр сообщенияOlga89 (08 Август 2014 - 07:30) писал:

Ничего не изменилось. :(

Здравствуйте.
В main.css найдите код

#left .block .greysmall, #right .block .greysmall {
background: url(http://ledv.storeland.net/block-bg.jpg) 0 -88px no-repeat;
height: 28px;
padding: 10px 0 0 20px;
color: #434343;
}

И замените на

#left .block .greysmall, #right .block .greysmall {
background: url(http://ledv.storeland.net/block-bg.jpg) no-repeat;
height: 28px;
padding: 10px 0 0 20px;
color: #434343;
}

И еще в main.css найдите
#left .block .greysmall a, #right .block .greysmall a {
color: #434343;
}

И замените на
#left .block .greysmall a, #right .block .greysmall a {
color: #FFFFFF;
}


#18 Olga89

Olga89

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

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

Отправлено 08 Август 2014 - 08:13

Спасибо за оперативную помощь, все получилось. :D

#19 Olga89

Olga89

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

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

Отправлено 08 Август 2014 - 09:07

Обыскала весь форум, не могу найти, как изменить цвет, размер и тип шрифта в этих областях подвала (1,2)?

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

  • сайт9.jpg


#20 Danil

Danil

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

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

Отправлено 08 Август 2014 - 09:22

Просмотр сообщенияOlga89 (08 Август 2014 - 09:07) писал:

Обыскала весь форум, не могу найти, как изменить цвет, размер и тип шрифта в этих областях подвала (1,2)?

Зайдите в maun.css и найдите код

Он изменяет формат текста слева
#panelbottom .money {
font: bold 15px Verdana, Geneva, sans-serif;
color: #646464;
}

Справа



#footer #main .copyring {
float: left;
font: normal 12px Verdana, Geneva, sans-serif; 
color: #FFF;
margin: -8px 0 0 10px;
border-left: 1px dashed #9ba6a9;
width: 225px;
height: 50px;
overflow: hidden;
padding: 4px 0 4px 10px;
}

Менять нужно только в строчках
font
и
color






Темы с аналогичным тегами слайдер, Nivo Slider, пластик

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

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