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


Помогите Добиться Такого Результата

Автор mehman4uk, 06 авг. 2013 23:49

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

#1 mehman4uk

mehman4uk

    Пользователь

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

Отправлено 06 Август 2013 - 23:49

Вот скрин,как нужно.Помогите,пожалуйста
Изображение

#2 Сake

Сake

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

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

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

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

Ваш сайт имеет разное отображение в зависимости от разрешения экрана. Например он может выглядеть так

todo-tea_ru.png

#3 mehman4uk

mehman4uk

    Пользователь

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

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

Просмотр сообщенияСake (07 Август 2013 - 02:08) писал:

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

Ваш сайт имеет разное отображение в зависимости от разрешения экрана. Например он может выглядеть так

Прикрепленный файл todo-tea_ru.png
Ну как хотябы просто переместить виджет вк туда?

#4 Сake

Сake

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

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

Отправлено 08 Август 2013 - 00:39

Вы можете например сделать следующее - в шаблоне "HTML" после строки 

<div class="container-fluid">

добавить

<div style="width: 980px; margin: 0 auto; position: relative;">
  <div style="width: 200px; height: auto; top: 215px; right: -220px; position: absolute;">
	Тут код вашего виджета VK
  </div>

далее перед строкой 

<div class="clear"></div>
</body>

добавить 

</div>

#5 mehman4uk

mehman4uk

    Пользователь

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

Отправлено 11 Август 2013 - 19:47

А вот вопрос.Как добиться для такого кросбраузерности? А то на маленьких экранах скролл появляется

#6 miyako

miyako

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

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

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

Просмотр сообщенияmehman4uk (11 Август 2013 - 19:47) писал:

А вот вопрос.Как добиться для такого кросбраузерности? А то на маленьких экранах скролл появляется

Протестировать Ваш сайт на во всех браузерах и выявить не схожести, затем написать хаки под разные браузеры.
Лучше убрать этот блок с виджетом влево.

#7 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 04 Октябрь 2013 - 13:41

Помогите исправить проблему со вставкой видео.
На сайте все ок, но если открываю с телефона, дизайн нарушается. Это на главной. Такая же проблема со вставкой видео в описание
Фото телефона приложила. Спасибо

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

  • IMG_0647.JPG

#8 CrazyCat

CrazyCat

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

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

Отправлено 04 Октябрь 2013 - 14:04

Просмотр сообщенияНаталья C. (04 Октябрь 2013 - 13:41) писал:

Помогите исправить проблему со вставкой видео.
На сайте все ок, но если открываю с телефона, дизайн нарушается. Это на главной. Такая же проблема со вставкой видео в описание
Фото телефона приложила. Спасибо
Здравствуйте!
Видео на YT не адаптировано под Ваш телефон. Попробуйте выбрать другой размер  ScreenShot 13.png

#9 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 04 Октябрь 2013 - 15:50

Просмотр сообщенияCrazyCat (04 Октябрь 2013 - 14:04) писал:

Здравствуйте!
Видео на YT не адаптировано под Ваш телефон. Попробуйте выбрать другой размер  Прикрепленный файл ScreenShot 13.png

Понятно, спасибо.
А как мне вставить мое видео в монитор? Монитор я уже подогнала под размер видео.
Заранее благадарю

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

  • Безымянный.png

#10 ne_yana

ne_yana

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

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

Отправлено 04 Октябрь 2013 - 18:58

Просмотр сообщенияНаталья C. (04 Октябрь 2013 - 15:50) писал:

Понятно, спасибо.
А как мне вставить мое видео в монитор? Монитор я уже подогнала под размер видео.
Заранее благадарю


Добрый вечер, в разделе Сайт - Страницы откройте Главную для редактирования, нажмите кнопку Источник на панели редактора страницы и замените
<img alt="" src="http://design.tvoistart.info/monitor1.png?0728" style="width: 220px; height: 192px;" /></p>
&nbsp;<iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe>
на
<div id="TVbg">
<iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe> </div></p>

и добавьте в конец файла style.css
#TVbg {
background: url('{ASSETS_IMAGES_PATH}monitor1.png?0728') no-repeat top left;
background-size: 100% 100%;
width: 224px;
height: 252px;
padding-top: 13px;
padding-left: 13px;
}

#11 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 04 Октябрь 2013 - 20:31

Просмотр сообщенияne_yana (04 Октябрь 2013 - 18:58) писал:

Добрый вечер, в разделе Сайт - Страницы откройте Главную для редактирования, нажмите кнопку Источник на панели редактора страницы и замените
<img alt="" src="http://design.tvoistart.info/monitor1.png?0728" style="width: 220px; height: 192px;" /></p>
&nbsp;<iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe>
на
<div id="TVbg">
<iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe> </div></p>

и добавьте в конец файла style.css
#TVbg {
background: url('{ASSETS_IMAGES_PATH}monitor1.png?0728') no-repeat top left;
background-size: 100% 100%;
width: 224px;
height: 252px;
padding-top: 13px;
padding-left: 13px;
}

Отлично получилось! Спасибо. Как мне поставить 3 таких монитора с видео в один ряд. И чтобы третий монитор не "залазил" на мою картинку с пленкой?

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

Благодарю за инструкцию!

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

  • Безымянный.jpg

#12 Сake

Сake

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

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

Отправлено 05 Октябрь 2013 - 01:52

Найдите код ваших блоков 

<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>

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

<div class="wrapper-TVbg">
  <div class="TVbg block-1"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
  <div class="TVbg block-2"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
  <div class="TVbg block-3"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
</div>

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

#TVbg {
	background: url("{ASSETS_IMAGES_PATH}monitor1.png?0728") no-repeat left top / 100% 100%;
	height: 252px;
	padding-left: 13px;
	padding-top: 13px;
	width: 224px;
}

и замените на

.TVbg {
	background: url("{ASSETS_IMAGES_PATH}monitor1.png?0728") no-repeat left top / 100% 100%;
	height: 252px;
	padding-left: 13px;
	padding-top: 13px;
	width: 224px;
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
}

далее добавьте

.TVbg.block-3 {
	left: 528px;
}
.TVbg.block-2 {
	left: 264px;
}

#13 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 05 Октябрь 2013 - 10:29

Просмотр сообщенияСake (05 Октябрь 2013 - 01:52) писал:

Найдите код ваших блоков

<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div id="TVbg"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>

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

<div class="wrapper-TVbg">
<div class="TVbg block-1"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div class="TVbg block-2"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
<div class="TVbg block-3"><iframe allowfullscreen="" frameborder="0" height="158" src="//www.youtube.com/embed/Ruhzv9jKC3M" width="210"></iframe></div>
</div>

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

#TVbg {
background: url("{ASSETS_IMAGES_PATH}monitor1.png?0728") no-repeat left top / 100% 100%;
height: 252px;
padding-left: 13px;
padding-top: 13px;
width: 224px;
}

и замените на

.TVbg {
background: url("{ASSETS_IMAGES_PATH}monitor1.png?0728") no-repeat left top / 100% 100%;
height: 252px;
padding-left: 13px;
padding-top: 13px;
width: 224px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
}

далее добавьте

.TVbg.block-3 {
left: 528px;
}
.TVbg.block-2 {
left: 264px;
}

Спасибо. При 3-х мониторах нарушается адаптивность шаблона ((

#14 miyako

miyako

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

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

Отправлено 05 Октябрь 2013 - 10:59

Просмотр сообщенияНаталья C. (05 Октябрь 2013 - 10:29) писал:

Спасибо. При 3-х мониторах нарушается адаптивность шаблона ((

Можете прислать скриншот или объясните пожалуйста подробнее, где Вы увидели нарушение адаптивности шаблона?

#15 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 05 Октябрь 2013 - 11:10

Просмотр сообщенияmiyako (05 Октябрь 2013 - 10:59) писал:

Можете прислать скриншот или объясните пожалуйста подробнее, где Вы увидели нарушение адаптивности шаблона?

Я на смартфоне открываю и сразу вижу нарушение адаптивности. Мониторы стоят не один под другим и друг за другом. Таким образом, что 1.5 монитора смотрятся "в сайте", а еще 1,5 выходят за его границы и просто расположены на черном фоне. Я уже обратно откатила, а то бы фото со смартфоном прислала бы.

Я вчера хотела видео в мониторе крупнее сделать, так такая же проблема. Больше 30% "вылазиет" за сайт (фото приложила).
Crazy Cat сообщил, что проблему необходимо устранить только уменьшением размера видео...

Точно никак нельзя иначе? Маленькое видео очень плохо смотрится на сайте...

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

  • IMG_0647.JPG

#16 support 2.0

support 2.0

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

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

Отправлено 05 Октябрь 2013 - 16:59

Просмотр сообщенияНаталья C. (05 Октябрь 2013 - 11:10) писал:

Я на смартфоне открываю и сразу вижу нарушение адаптивности. Мониторы стоят не один под другим и друг за другом. Таким образом, что 1.5 монитора смотрятся "в сайте", а еще 1,5 выходят за его границы и просто расположены на черном фоне. Я уже обратно откатила, а то бы фото со смартфоном прислала бы.

Я вчера хотела видео в мониторе крупнее сделать, так такая же проблема. Больше 30% "вылазиет" за сайт (фото приложила).
Crazy Cat сообщил, что проблему необходимо устранить только уменьшением размера видео...

Точно никак нельзя иначе? Маленькое видео очень плохо смотрится на сайте...

Видео не изменяет размер свой в зависимости от разрешения экрана. Можно конечно сделать следующее: поставить 2 видео и в одном прописать условие: если разрешение экрана больше, предположим, 400*300, то показывать большое видео, у второго блока с видео меньшего размера прописать условие: если разрешение экрана меньше 400*300, то показывать то видео. Вам подойдет такое решение?

#17 Гость_Наталья C._*

Гость_Наталья C._*
  • Гости

Отправлено 05 Октябрь 2013 - 20:43

Просмотр сообщенияsupport 2.0 (05 Октябрь 2013 - 16:59) писал:

Видео не изменяет размер свой в зависимости от разрешения экрана. Можно конечно сделать следующее: поставить 2 видео и в одном прописать условие: если разрешение экрана больше, предположим, 400*300, то показывать большое видео, у второго блока с видео меньшего размера прописать условие: если разрешение экрана меньше 400*300, то показывать то видео. Вам подойдет такое решение?

Ребята модераторы, Вы такие молодцы!
Настоящие профессионалы!!! Спасибо Вам!

Да, такое решение мне подойдет, конечно. Пока не пишите мне инструкцию, так как я жду ответ на вопрос о перенесении "Новинок", "Хитов продаж" и других больших изменений на главной. Как доделаю все, запрошу у Вас здесь инструкцию для мониторов.
Будет последним штрихом ))
Обратно в Изменение общей стилистики


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

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

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