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


Доп. Меню. Проблема При Просмотре С Других Браузеров.

Автор ligorempty, 21 мая 2014 17:16
меню IE масштаб

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

#1 ligorempty

ligorempty

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

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

Отправлено 21 Май 2014 - 17:16

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


3. На данный момент страница товара отображается под названием "Общее", рядом "Отзывы". Как реализовать табличку товара, на примере этого сайта?

То есть перенести "ОТЗЫВЫ" под описание товара

4. На некоторых товарах требуется много фото, все они вместе выглядят как непонятная куча. (рис.3) Хочется реализовать код, как на этом сайте.


Огромная просьба о помощи!

Спасибо всем откликнувшимся!

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

  • рис. 1.jpg
  • рис. 3.jpg
  • Подтянуть каталог.png

#2 Сake

Сake

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

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

Отправлено 22 Май 2014 - 04:54

У вас используется адаптивный дизайн. Для отключения адаптивности вам необходимо или сменить тему оформления (например на "Мокко") или же в файле стилей удалить все стили внутри блоков @media. Например

@media screen and (max-width: 785px) {
  .orderStepName {font-size: 16px;}
  table.form  {table-layout: fixed;}
  table.form tr td:first-child {width: auto;}
}

Вам необходимо точно определить используемую тему оформления. Например если вы выберите не адаптивную ("Мокко", "Сияние", "Лайт"), то изменения понадобиться другие в отличие от адаптивной темы. Каждый шаблон редактируется по разному. Из описанных вами изменений складывается впечатление что вам лучше всего подойдет именно "Мокко". В шаблоне "Мокко" по умолчанию реализовано горизонтальное меню, и сама тема оформления не адаптивная - т.е будет отображаться как storeland.ru. Вы можете сделать резервную копию вашего текущего шаблона и переустановить тему оформления для ознакомления.

#3 ligorempty

ligorempty

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

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

Отправлено 22 Май 2014 - 09:04

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

<ul class="slides">
							 <li>
								 <a href="http://peplanet.ru/catalog/Provari"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://s322050.storeland.net/Provari_buy.jpg?2412) center no-repeat;"></div></a>
								 <img src="http://s322050.storeland.net/Provari_buy.jpg?2412" alt="Slide 1" class="slide_img">
							 </li>
							 <li>
								 <a href="#"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://s322050.storeland.net/ProVariMiniPolish-4.jpg?6725) center no-repeat;"></div></a>
								 <img src="http://s322050.storeland.net/ProVariMiniPolish-4.jpg?6725" alt="Slide 2" class="slide_img">
							 </li>
							 <li>
							 <a href="http://peplanet.ru/catalog/eCom"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://design.peplanet.ru/ecom_buy1.jpg?7301) center no-repeat;"></div></a>
								 <img src="http://design.peplanet.ru/ecom_buy1.jpg?7301" alt="Slide 3" class="slide_img">
							 </li>

Теперь стали отображаться картинки значения не background а img src.

На мобильном устройстве слайдер прилеплен слева, а не по центру, как решить? (рис)

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

  • Screenshot_2014-05-22-09-56-00.png

#4 sengun

sengun

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

  • Модератоpы
  • 1 139 сообщений
  • ГородНижний Новгород

Отправлено 22 Май 2014 - 16:36

Просмотр сообщенияligorempty (22 Май 2014 - 09:04) писал:

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

<ul class="slides">
							 <li>
								 <a href="http://peplanet.ru/catalog/Provari"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://s322050.storeland.net/Provari_buy.jpg?2412) center no-repeat;"></div></a>
								 <img src="http://s322050.storeland.net/Provari_buy.jpg?2412" alt="Slide 1" class="slide_img">
							 </li>
							 <li>
								 <a href="#"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://s322050.storeland.net/ProVariMiniPolish-4.jpg?6725) center no-repeat;"></div></a>
								 <img src="http://s322050.storeland.net/ProVariMiniPolish-4.jpg?6725" alt="Slide 2" class="slide_img">
							 </li>
							 <li>
							 <a href="http://peplanet.ru/catalog/eCom"><div class="bigPic" style="width: 250px; height: 250px; background:url(http://design.peplanet.ru/ecom_buy1.jpg?7301) center no-repeat;"></div></a>
								 <img src="http://design.peplanet.ru/ecom_buy1.jpg?7301" alt="Slide 3" class="slide_img">
							 </li>

Теперь стали отображаться картинки значения не background а img src.

На мобильном устройстве слайдер прилеплен слева, а не по центру, как решить? (рис)
Здравствуйте.
Можно просто сделать слайдер по ширине страницы.
В main.css замените
#module_area {width:100%;text-align:center;padding:5px 0;}
на
#module_area {width:1200px;margin:auto;text-align:center;padding:5px 0;}

#5 ligorempty

ligorempty

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

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

Отправлено 01 Июнь 2014 - 10:35

Спасибо, но это выглядит ужасающе. Похоже, что на мобильных устройствах значение margin не работает.

Помогите с пунктом #3 пожалуйста!

#6 ligorempty

ligorempty

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

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

Отправлено 03 Июнь 2014 - 21:19

Ув. Модераторы! Прошу помощи. Жду уже которую неделю, думаю найдется пару минуток чтобы помочь мне  с вопросам в топе

#7 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 04 Июнь 2014 - 04:12

Не дублируйте пожалуйста темы.

Попробуйте сл.вариант, найдите:
#header .flexslider {
	margin: 0 auto !important;
	width: 100%;
}

#module_area {
	margin: 0 auto;
	padding: 5px 0;
	text-align: center;
	width: 760px;
}
замените на:
#header .flexslider {
	margin: 0 auto !important;
	width: 760px;
}

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

#8 ligorempty

ligorempty

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

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

Отправлено 04 Июнь 2014 - 10:57

Спасибо, ув.  Vaccina!
Не помогло. Я думаю это связано с тем, какое разрешение изначально открывает сайт на мобильных устройствах.
Я прилагаю скриншоты с смартфона (1-4 рис.) и с планшета (5рис.)
С смартфоном проблем нет -можно раздвинуть сайт для полного отображения, а вот планшет отказывается уменьшить -только прокрутка сайта.

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

  • 1.png
  • 2.png
  • 3.png
  • 4.png
  • 5.png

#9 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 05 Июнь 2014 - 01:20

Возможно, это связано с тем, что вы отключили у себя адаптивность.
В main.css в самый низ вставьте:
/* Адаптивность шаблона ==============================*/
@media only screen and (min-width: 981px) and (max-width: 1220px) {
  .inner {width:95%;}
}
@media only screen and (min-width: 990px) {
  #header  .flexslider li img.slide_img{display:none !important;}
  #header  .flexslider li .bigPic {display:block !important;}
  #header.borderless {border-bottom:none;}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
  .inner {width:95%;}
  #header_colapse .inner {background:none !important;}
  #footer .column {width:22% !important;margin:10px !important;min-height:100px;}
  div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .price {margin-bottom:25px;}
  #column-left + #content div.prod_hold, #column-left + #content div.prod_hold_recent  { margin:0px 11px 20px 11px;}
  #toggle_switch {display:block;}
  p img {max-width:100% !important;height:auto !important;}
  .product-info .cart {height:auto;overflow:auto;}
  .product-info .cart input[type="text"] {margin-bottom:10px;}
  .orderStepName {font-size: 18px;}
  .orderStepName:before {margin-right: 5px;}
  table.form tr td:first-child {width: 40%;*width: 0px;}
  #content .login-content .content {padding: 0;overflow: visible;}
  .login-content  table.form td {position: relative;width: 100%;display: block; padding: 4px 0;}
}
@media screen and (max-width: 785px) {
  .orderStepName {font-size: 16px;}
  table.form  {table-layout: fixed;}
  table.form tr td:first-child {width: auto;}
}
@media only screen and (max-width: 625px) {
  .orderHeader  {display: none !important;}
}
@media only screen and (min-width: 557px) and (max-width: 898px) {
  .item-detail{width: 49%;}
}
@media only screen and (min-width: 480px) and (max-width: 556px) {
  .item-detail {width: 40%;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  #toggle_switch {display:none;}
  .inner {width:86%;}
  #header_colapse .inner {display:block !important;}
  #header #cart {right: 0px;width: auto;float: none;}
  .box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
  div.prod_hold, div.prod_hold_recent {margin:10px auto;}
  div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}
  div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly{display: block;position: relative;padding: 0;bottom: 0;opacity: 1;width: 200px; }
  div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price { display: block !important;}
  #header .links {margin:0;}
  #compareInfo {margin: 10px auto -20px;width: 100%;text-align: center;}
  #header #welcome { display: none;}
  #header #search { position:relative;clear:both;width:440px;margin-bottom: 19px;float: left;}
  #header #search input {width:380px;}
  #header #support {display:none;}
  #header #cart h4, #header #cart #cart-total {display:block;}
  #header #cart .content {top:35px;}
  #header_colapse .inner { overflow: visible; padding:8px 0; background:none !important;}
  #column-left { float:none; width:100%;}
  #column-left .recent {display: none!important;}
  #column-left + #content {margin: 0; }
  #footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
  #footer .one_fourth {display: none;}
  #footer .one_fourth.last {display: block;}
  #tabs a {font-size:14px;}
  .product-info .image {width:380px;}
  .product-info .image img{max-width:100%; }
  .product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
  img {max-width:100% !important;height:auto !important;}
  textarea {width: 100%;}
  #column-left div.prod_hold, #column-left div.prod_hold_recent {margin:0px 8px 20px 8px;}
  .product-filter .view-mode label {display: none;}
  #main_nav { display: none; }
  .selectnav { display: block; margin:6px 0 0 0; width:100%; }
  #column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
  #column-left .box .box-heading + .box-content {display: none;}
  #column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png") no-repeat right center;}
  table.form  {table-layout: fixed;}
  #content .login-content .content {padding: 0;overflow: visible;}
  .login-content h4, .login-content .right p {display: none;}
  p.required {display: none;}
  .login-content  table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
  .generally label:after {content: ""; display: block;clear: both;}
}
@media only screen and (max-width: 480px) {
  h2 {font-size: 24px;}
  .inner {width:80%;}
  #header_colapse .inner {display:block !important;}
  #toggle_switch {display:none;}
  #header .links {margin:0;}
  #compareInfo {margin-left:0px;float: left;}
  #header #welcome {display: none;}
  #header #search {position:relative;clear:both;width:100%;margin-bottom:10px;}
  #header #search input {width:70%;}
  #header #support {display:none;}
  #header #logo {margin: 0;}
  #header #cart{ width: 98%; min-width: 98%;float: none;margin-bottom: 10px;}
  #header #cart .heading {padding: 0 0 0 46px;}
  #header #cart .cart_circle {right: auto; left: 0;}
  #header #cart h4, #header #cart #cart-total {display:block;text-align: left !important;}
  #header #cart .content {top:35px;}
  #header_colapse .inner {overflow:visible;padding:8px 0;background:none !important;}
  #main_nav { display: none; }
  .selectnav { display: block; margin:6px 0 0 0; width:100%; }
  #column-left {float:none;width:100%;}
  #column-left .recent {display: none!important;}
  #column-left + #content {margin: 0;}
  .box-product, .product-list, .product-list2, .product-list3, .product-list4 {text-align:center;}
  div.prod_hold, div.prod_hold_recent {margin:10px auto;width: 90%;}
  div.prod_hold > div .prod-info-fly, div.prod_hold_recent > div .prod-info-fly {width: 100%;}
  div.prod_hold .name, div.prod_hold .price, div.prod_hold_recent .name, div.prod_hold_recent .price {display: none;}
  div.prod_hold .prod-info-fly, div.prod_hold_recent .prod-info-fly {display: block;position: relative;padding: 0;bottom: 0;opacity: 1; }
  div.prod_hold .prod-info-fly .name, div.prod_hold .prod-info-fly .price, div.prod_hold_recent .prod-info-fly .name, div.prod_hold_recent .prod-info-fly .price{display: block !important;}
  .item-detail {width: 100%;}
  #footer .column {width:100% !important;margin:10px 0 !important;min-height:100px;}
  #footer .one_fourth {display: none;}
  #footer .one_fourth.last {display: block;}
  #tabs a {font-size:12px;padding:10px;}
  .category-info {padding: 10px 0;}
  .category-info .left {float:none;}
  .category-info .right {margin: 10px 0 0 0; padding: 0;}
  .product-info .image {width:260px;}
  .product-info .image img{max-width:100%; }
  .product-info >.left, .product-info > .left + .right {float:none;margin: 0;}
  .login-content .left, .login-content .right {width:95%;float:left;margin-bottom:10px;}
  img {max-width:100% !important;height:auto !important;}
  textarea {width: 100%;}
  #column-left .box .box-heading:after {content: url("{ASSETS_IMAGES_PATH}downArrow.png") no-repeat right center;position: absolute;right: 16px;top: 10px;cursor: pointer;}
  #column-left .box .box-heading + .box-content {display: none;}
  #column-left .box .box-heading.up:after {content: url("{ASSETS_IMAGES_PATH}UPArrow.png") no-repeat right center;}
  table.form td {position: relative;width: 100%;display: block;padding: 4px 0;}
  #content .login-content .content {padding: 10px 0;overflow: visible;}
  p.required {display: none;}
  #content .buttons .left {display: none;}
}
/* /END адаптивность шаблона ======================================================*/

#10 ligorempty

ligorempty

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

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

Отправлено 23 Июнь 2014 - 08:11

Спасибо, а как реализовать 3 и 4 пункты?

#11 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 24 Июнь 2014 - 07:25

Просмотр сообщенияligorempty (21 Май 2014 - 17:16) писал:

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


3. На данный момент страница товара отображается под названием "Общее", рядом "Отзывы". Как реализовать табличку товара, на примере этого сайта?

То есть перенести "ОТЗЫВЫ" под описание товара

4. На некоторых товарах требуется много фото, все они вместе выглядят как непонятная куча. (рис.3) Хочется реализовать код, как на этом сайте.


Огромная просьба о помощи!

Спасибо всем откликнувшимся!

Здравствуйте, можно вывести отзывы во вкладку Общее
Попробуйте такой вариант
Обновите код шаблона Товар
Скрытый текст

Далее в файле main.js
Находим
if(hash == 'goodsDataOpinionAdd') {
	hash = 'show_tab_4';
  }
Заменяем на
if(hash == 'goodsDataOpinionAdd') {
	hash = 'show_tab_1';
  }

Обратно в Изменение общей стилистики


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Весна
  5. → Изменение общей стилистики
  6. Privacy Policy