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

[Olga2209]

Добрый день!

Подскажите пожалуйста:

1. Как добавить слоган между логотипом и корзиной? (примерно по середине,чуть ниже уровня логотипа).

2. Нужно внести следующие изменения в блок со слайдером:

- изменить размер слайдера на 600х400px, выровнять по левой стороне (с учетом отступа слева,как у дива "inner",который идет ниже).

- справа от слайдера создать блок такой же высоты, который я смогу заполнить текстом. (справа также сохранить отступ как у дива "inner")

Мой аккаунт: SL-267183
Заранее благодарю.

[Alexey11]

Здравствуйте, найдите данный блок кода в шаблоне HTML:

  <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}Original_last.png" title="" alt=""></a></div>

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

  <div id="logo"><a href="http://{NET_DOMAIN}/"><img src="{ASSETS_IMAGES_PATH}Original_last.png" title="" alt=""></a></div>
<div class="slogan">Тут должен быть ваш слоган!</div>

далее в шаблон main.css в самый конец добавьте данный блок кода:

.slogan {
    font-size: 40px;
    position: absolute;
    left: 30%;
    top: 35%;
}


@media only screen and (max-width: 1215px){
    .slogan{font-size:30px!important;left:35%!important;}
}
@media only screen and (max-width: 1165px){
    .slogan{font-size:20px!important;left:40%!important; }
}
@media only screen and (max-width: 937px){
    .slogan{font-size:15px!important;left:40%!important; }
}
@media only screen and (max-width: 937px){
    .slogan{font-size:15px!important;left:40%!important; }
}
@media only screen and (max-width: 852px){
    .slogan{font-size:12px!important;left:45%!important;width:200px; }
}
@media only screen and (max-width: 771px){
    .slogan{display:none; }
}

2. Найдите данный блок кода в шаблоне main.css

#module_area {width:100%;text-align:center;padding:5px 0;}

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

#module_area {width:60%;margin:0 auto;padding:5px 0;}

3. При добавлении данного блока в указанное место при разных разрешениях экрана ваш сайт может некорректно отображаться.Так-как нарушается область с адаптивностью слайдера.

[Olga2209]

Благодарю за ответ!

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

Смысл в том, что слайдер хотели сделать примерно на половину (чуть больше) ширины страницы, а в блоке справа прописать преимущества работы с компанией...чтобы,когда человек заходил на сайт, ему в первую очередь бросался в глаза баннер и блок с информацией о компании.

[Alexey11]

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

[Olga2209]

Было бы прекрасно) вот только изображения на слайдер идут размером 600х400 px(( ,да и качество изображений не позволит растянуть их до ширины страницы...поэтому пытаемся найти выход.

Подскажите еще пожалуйста, если уменьшать размеры слайдера, каким образом возможно прописать под него фон (по высоте слайдера)? и где по коду прописать ему рамку?

Спасибо!

[ТурИстин]

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

ребят, где-то видела на форуме точные размеры слайдера. Но уже сутки ищу - найти не могу. Пжлт, подскажите: 900 на сколько пикселей?

[Olga2209]

Что я уже и делаю) добавляю к изображениям справа нужную информацию,чтобы подогнать под размеры слайдера во всю ширину и загрузить)

Как вариант еще решила глянуть др слайдеры,у которых справа идет блок с информацией автоматически...тоже неплохо выглядит) вот только установить бы еще его)

[ТурИстин]

Olga2209 (06 Март 2014 - 09:27) писал:

Что я уже и делаю) добавляю к изображениям справа нужную информацию,чтобы подогнать под размеры слайдера во всю ширину и загрузить)

Каковы размеры слайдеров грузите?

Olga2209 (06 Март 2014 - 09:27) писал:

Как вариант еще решила глянуть др слайдеры,у которых справа идет блок с информацией автоматически...тоже неплохо выглядит) вот только установить бы еще его)

здесь важно не переборщить: "лучшее - враг хорошего". Покупатель может растеряться от избытка информации...

[Olga2209]

Ширина изображений,загруженных в исходный шаблон - 1920px (при том,что ширина страницы 1351px). Пробовала сделать ширину меньше,встает криво на сайт без доп.корректировок по коду. Высоты мне 400 px достаточно

[ТурИстин]

Olga2209 (06 Март 2014 - 09:35) писал:

Ширина изображений,загруженных в исходный шаблон - 1920px (при том,что ширина страницы 1351px). Пробовала сделать ширину меньше,встает криво на сайт без доп.корректировок по коду. Высоты мне 400 px достаточно

а если делать 900 на 270, надо будет что-то в коде менять?

[Castiel]

ТурИстин (06 Март 2014 - 09:36) писал:

а если делать 900 на 270, надо будет что-то в коде менять?

Здравствуйте, напишите пожалуйста номер вашего аккаунта или адрес вашего сайта

[ТурИстин]

Castiel (06 Март 2014 - 09:42) писал:

Здравствуйте, напишите пожалуйста номер вашего аккаунта или адрес вашего сайта

SL-71572 turistin.ru

[Olga2209]

Уважаемые модераторы,подскажите пож-та, реально заменить слайдер в шаблоне Весна на вот этот:

http://www.htmldrive...er-Using-jQuery

Сможете ли помочь в этом нелегком деле?)

[Castiel]

ТурИстин (06 Март 2014 - 09:44) писал:

SL-71572 turistin.ru

Установите пожалуйста слайдер, чтобы мы могли помочь вам в реализации нужных размеров слайдера.

[Olga2209]

Castiel, а мне подскажете?)

[ТурИстин]

Castiel (06 Март 2014 - 09:49) писал:

Установите пожалуйста слайдер, чтобы мы могли помочь вам в реализации нужных размеров слайдера.

Так я его ДЕЛАЮ, Для этого я и спрашиваю точные размеры, чтобы потом не ковыряться в кодах или переделывать слайдер ))
Мне просто нужны ТОЧНЫЕ размеры слайдера. сколько на сколько - в пикселях. Спасибо заранее )

[Castiel]

Olga2209 (06 Март 2014 - 09:45) писал:

Уважаемые модераторы,подскажите пож-та, реально заменить слайдер в шаблоне Весна на вот этот:

http://www.htmldrive...er-Using-jQuery

Сможете ли помочь в этом нелегком деле?)

Здравствуйте, для этого выполните инструкцию.

Редактируем шаблон HTML
Находим

		  <div id="module_area">
			<div id="flexslideshow" class="flexslider">
			  <ul class="slides">
				<li>
				  <div class="bigPic" style="width: 1920px; height: 400px; background:url({ASSETS_IMAGES_PATH}slide1.png) no-repeat;"></div>
				  <img src="{ASSETS_IMAGES_PATH}slide1.png" alt="Slide 1" class="slide_img">
				</li>
				<li>
				  <div class="bigPic" style="width: 1920px; height: 400px; background:url({ASSETS_IMAGES_PATH}slide2.png) no-repeat;"></div>
				  <img src="{ASSETS_IMAGES_PATH}slide2.png" alt="Slide 2" class="slide_img">
				</li>
				<li>
				  <div class="bigPic" style="width: 1920px; height: 400px; background:url({ASSETS_IMAGES_PATH}slide3.png) no-repeat;"></div>
				  <img src="{ASSETS_IMAGES_PATH}slide3.png" alt="Slide 3" class="slide_img">
				</li>
			  </ul>
			</div>
		  </div>

Заменяем на

<div id="module_area">
  <div id="featured" >
	<ul class="ui-tabs-nav">
		 <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="{ASSETS_IMAGES_PATH}image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
		 <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="{ASSETS_IMAGES_PATH}image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
		 <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="{ASSETS_IMAGES_PATH}image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
		 <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="{ASSETS_IMAGES_PATH}image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
	   </ul>
	 <!-- First Content -->
	 <div id="fragment-1" class="ui-tabs-panel" style="">
   <img src="{ASSETS_IMAGES_PATH}image1.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
	</div>
	 </div>
	 <!-- Second Content -->
	 <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
   <img src="{ASSETS_IMAGES_PATH}image2.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
	<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
	</div>
	 </div>
	 <!-- Third Content -->
	 <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
   <img src="{ASSETS_IMAGES_PATH}image3.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >35 Amazing Logo Designs</a></h2>
	<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
		  </div>
	 </div>
	 <!-- Fourth Content -->
	 <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
   <img src="{ASSETS_IMAGES_PATH}image4.jpg" alt="" />
	<div class="info" >
	<h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
	<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
		  </div>
	 </div>
  </div>
</div>

Далее добавляем скрипты
Находим

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

Заменяем на

<script type="text/javascript" src="{ASSETS_JS_PATH}main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

Далее добавляем стили в main.css

#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px; 
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px;
color:#333;  background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('images/selected-item.gif') top left no-repeat; 
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px;
background: url('images/transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}

ТурИстин (06 Март 2014 - 09:51) писал:

Так я его ДЕЛАЮ, Для этого я и спрашиваю точные размеры, чтобы потом не ковыряться в кодах или переделывать слайдер ))
Мне просто нужны ТОЧНЫЕ размеры слайдера. сколько на сколько - в пикселях. Спасибо заранее )

Исходные размеры слайдов 1920x500px, в стандартном шаблоне слайдер имеет размер 1920x400px

[ТурИстин]

Castiel (06 Март 2014 - 09:58) писал:

Исходные размеры слайдов 1920x500px, в стандартном шаблоне слайдер имеет размер 1920x400px

СПАСИБО!!!

теперь ещё вопросЫ по теме, на них не было ответа:
1. КАК ПОМЕНЯТЬ ЦВЕТ КНОПОК В КАТАЛОГЕ
2. КАК ПОМЕНЯТЬ ЦВЕТ ПОДЧЕРКИВАЮЩЕЙ ПОЛОСЫ В НАЗВАНИЯХ СТРАНИЦ И РУБРИК НА ГЛАВНОЙ (НОВИНКИ, ХИТЫ ПРОДАЖ И Т.Д.)

[Olga2209]

Castiel, по замене слайдера все сделала по инструкции. На сайте выдает уведомление,что есть 1 JS ошибка. Проверьте пожалуйста.

И еще, не могу подстроить слайдер под размер своего изображения (не растягивается).На сайте видно...

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

[Castiel]

Olga2209 (06 Март 2014 - 10:21) писал:

Castiel, по замене слайдера все сделала по инструкции. На сайте выдает уведомление,что есть 1 JS ошибка. Проверьте пожалуйста.

И еще, не могу подстроить слайдер под размер своего изображения (не растягивается).На сайте видно...

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

Редактируем main.css
Находим

#module_area {
width: 100%;
margin: -25px auto 0 50px;
padding: 5px 0;
}

Заменяем на

#module_area {
width: 60%;
margin: 0 auto;
padding: 5px 0;
}