Отключен JavaScript

У вас отключен JavaScript. Некоторые возможности системы не будут работать. Пожалуйста, включите JavaScript для получения доступа ко всем функциям.

Изменение Стилистики

Автор blackdron, 15 авг. 2014 16:31

новости логотип стиль шапка

Авторизуйтесь для ответа в теме

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

#41 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 14:33) писал:

Все супер, осталось только сделать блок Новости такой же ширины, как и блок Каталога

Код:

div#News {
padding: 25px 0;
border-bottom: 1px solid #e1e1e1;
font-size: 20px;
font-weight: normal !important;
margin: 0 10px;
color: #666666;
}

замените на:

div#News {
padding: 25px 0;
border-bottom: 1px solid #e1e1e1;
font-size: 20px;
font-weight: normal !important;
color: #666666;
width: 100%;
}

Наверх

#42 blackdron

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

Пользователи
65 сообщений

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

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

Наверх

#43 MikDark

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

Модераторы
6 468 сообщений

Отправлено 19 Август 2014 - 15:04

blackdron (19 Август 2014 - 14:50) писал:

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

Наверх

#44 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 15:04) писал:

Я код присылал, мне сказали, что мне попробовать самому и если появятся вопросы, то писать. Код слайдера: http://css-tricks.co...content-slider/

Наверх

#45 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 15:07) писал:

Для начала скачайте с этого сайта архив и все js и css файлы, кроме query-1.2.6.min.js загрузите в раздел Сайт - Редактор шаблонов

Наверх

#46 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 15:09) писал:

Скрипты и стили загрузил, создал страницу http://edoshakazan.c...tovaya-stranica, чтобы не портить пока главную страницу

Наверх

#47 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 15:15) писал:

Скрипты и стили загрузил, создал страницу http://edoshakazan.c...tovaya-stranica, чтобы не портить пока главную страницу

В main.css добавьте:

.slider-wrap	  { width: 419px; position: absolute; top: 87px; left: 40px; }  
.stripViewer .panelContainer
.panel ul	  { text-align: left; margin: 0 15px 0 30px; }
.stripViewer	  { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer	{ position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel   { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav   { display: none; }
.nav-thumb	   { border: 1px solid black; margin-right: 5px; }
#movers-row	  { margin: -43px 0 0 62px; }
#movers-row div	 { width: 20%; float: left; }
#movers-row div a.cross-link	 { float: right; }
.photo-meta-data	 { background: url(images/transpBlack.png); padding: 10px; height: 30px;
			 margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span	  { font-size: 13px; }
.cross-link	  { display: block; width: 62px; margin-top: -14px;
			 position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb	   { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }

Далее в шаблон HTML перед </head> вставляем:

<script type="text/javascript" src={ASSETS_JS_PATH}jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src={ASSETS_JS_PATH}jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src={ASSETS_JS_PATH}coda-slider.1.1.1.pack.js"></script>

<script type="text/javascript">

  var theInt = null;
  var $crosslink, $navthumb;
  var curclicked = 0;
 
  theInterval = function(cur){
   clearInterval(theInt);
  
   if( typeof cur != 'undefined' )
	curclicked = cur;
  
   $crosslink.removeClass("active-thumb");
   $navthumb.eq(curclicked).parent().addClass("active-thumb");
	$(".stripNav ul li a").eq(curclicked).trigger('click');
  
   theInt = setInterval(function(){
	$crosslink.removeClass("active-thumb");
	$navthumb.eq(curclicked).parent().addClass("active-thumb");
	$(".stripNav ul li a").eq(curclicked).trigger('click');
	curclicked++;
	if( 6 == curclicked )
	 curclicked = 0;
   
   }, 3000);
  };
 
  $(function(){
  
   $("#main-photo-slider").codaSlider();
  
   $navthumb = $(".nav-thumb");
   $crosslink = $(".cross-link");
  
   $navthumb
   .click(function() {
	var $this = $(this);
	theInterval($this.parent().attr('href').slice(1) - 1);
	return false;
   });
  
   theInterval();
  });
</script>

А в код страницы, через кнопку Источник вставьте:

<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
  <div class="panelContainer">
   <div class="panel" title="Panel 1">
	<div class="wrapper">
	 <!-- REGULAR IMAGE PANEL -->
	 <img src="images/tempphoto-1.jpg" alt="temp" />
	 <div class="photo-meta-data">
	  Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
	  <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
	 </div>
	</div>
   </div>
   <div class="panel" title="Panel 2">
	<div class="wrapper">
	 <!-- PANEL CONTENT -->
	</div>
   </div> 
   <div class="panel" title="Panel 3">
	<div class="wrapper">
	 <!-- EXAMPLE OF OTHER PANEL POSSIBILITIES -->
	 <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
  
	 <h1>How to Cook a Scotch Egg</h1>
  
	 <ul>
	  <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
	  <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
	  <li>1/2 cup AP flour</li>
	  <li>1-2 eggs, beaten</li>
	  <li>3/4 cup panko-style bread crumbs</li>
	  <li>Vegetable oil for frying</li>
	 </ul>
	</div>
   </div>
   <div class="panel" title="Panel 4">
	<div class="wrapper">
	 <!-- PANEL CONTENT -->
	</div>
   </div>
   <div class="panel" title="Panel 5">
	<div class="wrapper">
	 <!-- PANEL CONTENT -->
	</div>
   </div>
   <div class="panel" title="Panel 6">
	<div class="wrapper">
	 <!-- PANEL CONTENT -->
	</div>
   </div>
  </div>
</div>
<!-- TO MAKE THESE THUMBNAILS ACTUALLY WORK, BOTH THE HASH VALUE (#1, ETC.)
		  AND THE CLASS="CROSS-LINK" ARE REQUIRED -->
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
  <div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  <div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  <div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  <div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
  <div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>

Только ссылки на изображения поменяйте на свои.

Наверх

#48 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 15:28) писал:

В main.css добавьте:

Пишет ошибку JS и на странице хаос, посмотрите,. пожалуйста.

На странице возникла JS ошибка:
Uncaught TypeError: undefined is not a function на строке: 75.
Адрес файла: http://edoshakazan.com/page/testovaya-stranica

Наверх

#49 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 16:01) писал:

Пишет ошибку JS и на странице хаос, посмотрите,. пожалуйста.

На странице возникла JS ошибка:
Uncaught TypeError: undefined is not a function на строке: 75.
Адрес файла: http://edoshakazan.com/page/testovaya-stranica

В main.css ищем:

.nav-thumb {
border: 1px solid black;
margin-right: 5px;
}

меняем на:

.nav-thumb {
border: 1px solid black;
margin-right: 5px;
max-width: 100px;
}

Далее ищем:

.cross-link {
display: block;
width: 62px;
margin-top: -14px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

меняем на:

.cross-link {
display: block;
width: 62px;
margin-top: -7px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

В HTML после:

<!-- PANEL CONTENT -->

Укажите изображения с помощью:

<img src="images/scotch-egg.jpg">

ссылку на изображение замените на свою.

Наверх

#50 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 16:18) писал:

В main.css ищем:

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

Наверх

#51 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 16:44) писал:

Миниатюры нужно настроить после того, как настроим все картинки и размеры.

Размер миниатюр меняем здесь:

.nav-thumb {
border: 1px solid black;
margin-right: 5px;
max-width: 100px;
}

Параметром max-width

Размер основного изображения здесь:

.stripViewer .panelContainer .panel {
float: left;
height: 100%;
position: relative;
width: 419px;
}

Параметр width

Наверх

#52 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 16:58) писал:

Миниатюры нужно настроить после того, как настроим все картинки и размеры.

Изменил параметр width до 1000px у основного изображения, но ничего не изменилось

Наверх

#53 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (19 Август 2014 - 17:19) писал:

Изменил параметр width до 1000px у основного изображения, но ничего не изменилось

Еще увеличьте здесь:

.stripViewer {
position: relative;
overflow: hidden;
width: 782px;
height: 285px;
}

но для адаптивности нужно указывать в процентах.

Наверх

#54 blackdron

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

Пользователи
65 сообщений

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

MikDark (19 Август 2014 - 17:26) писал:

Еще увеличьте здесь:

.stripViewer {
position: relative;
overflow: hidden;
width: 782px;
height: 285px;
}

но для адаптивности нужно указывать в процентах.

Если делать в %, то слайдер одну и ту же картинку передвигает. Сейчас поставил 100% у параметра width. А если указывать в px, то нормально

Наверх

#55 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (20 Август 2014 - 08:23) писал:

Чтобы выравнять иконки, в main.css код:

.cross-link {
display: block;
width: 62px;
margin-top: -7px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

меняем на:

.cross-link {
display: block;
width: 62px;
margin-top: -18px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

Еще вопросы остались по слайдеру?

Наверх

#56 blackdron

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

Пользователи
65 сообщений

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

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

Наверх

#57 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (20 Август 2014 - 08:29) писал:

Снимок58.jpg

Изменили, посмотрите.

Наверх

#58 blackdron

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

Пользователи
65 сообщений

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

MikDark (20 Август 2014 - 08:28) писал:

Чтобы выравнять иконки, в main.css код:

.cross-link {
display: block;
width: 62px;
margin-top: -7px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

меняем на:

.cross-link {
display: block;
width: 62px;
margin-top: -18px;
position: relative;
padding-top: 15px;
z-index: 9999;
}

Еще вопросы остались по слайдеру?

Да еще есть. Как опустить миниатюры на 20px и сделать их по центру

Наверх

#59 MikDark

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

Модераторы
6 468 сообщений

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

blackdron (20 Август 2014 - 09:27) писал:

Да еще есть. Как опустить миниатюры на 20px и сделать их по центру

2) Произвели некоторые изменения, посмотрите

1) В main.css ищем:

.stripViewer {
position: relative;
overflow: hidden;
width: 966px;
height: 277px;
}

и меняем на:

.stripViewer {
position: relative;
overflow: hidden;
width: 966px;
height: 277px;
margin-bottom:20px;
}

margin-bottom можно менять.

Наверх

#60 blackdron

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

Пользователи
65 сообщений

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

MikDark (20 Август 2014 - 09:47) писал:

2) Произвели некоторые изменения, посмотрите

1) В main.css ищем:

.stripViewer {
position: relative;
overflow: hidden;
width: 966px;
height: 277px;
}

и меняем на:

.stripViewer {
position: relative;
overflow: hidden;
width: 966px;
height: 277px;
margin-bottom:20px;
}

margin-bottom можно менять.

Большое спасибо, еще один вопрос, как сейчас их растянуть? Размеры миниатюр я изменил, только они налегают друг на друга

Наверх

Обратно в Шаблон Весна

Темы с аналогичным тегами новости, логотип, стиль, шапка

Вопросы работы сервиса StoreLand → Дизайн → Шаблон Маркетплейс → Главная → Добавление В Шапку Сайта Почты И Сделать Крупно Номер Телефона Автор Гость_Art_* , 05 марта 2021 банер, телефон, почта, бренд и 2 еще...	Популярная тема 9 Ответов 886 Просмотров	Vaccina 18 марта 2021
Вопросы работы сервиса StoreLand → Дизайн → Вопросы общие для всех шаблонов → Главная → Помогите Создать Второй Блок Новостей-Статей, Отдельных От Первого Автор Гость_sotvorcov_* , 05 марта 2021 новости	2 Ответов 694 Просмотров	sotvorcov 11 марта 2021
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Маркетплейс → Другое → Заменить Логотип Соц Сетей Автор Гость_ya.r.ik_* , 21 февр. 2021 логотип, сойсети, заменить	2 Ответов 654 Просмотров	ya.r.ik 22 февр. 2021
Вопросы работы сервиса StoreLand → Предложения по улучшению сервиса → Добавление Видео В Новости, Статьи Пр. Автор Гость_Максим Бакланов_* , 14 февр. 2020 видео, новости, статьи и 1 еще...	2 Ответов 1 070 Просмотров	Кенгуру 19 марта 2020
Вопросы работы сервиса StoreLand → Дизайн → Шаблон Техно → Изменение общей стилистики → Добавил Элементы В Шапке Автор Гость_like.hornet.6_* , 22 авг. 2019 шапка, добавить, элементы	0 Ответов 1 538 Просмотров	like.hornet.6 22 авг. 2019

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

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

Изменение Стилистики

Темы с аналогичным тегами новости, логотип, стиль, шапка

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

Войти

Google поиск