В топ меню вставить ссылку/статью

[florapraktik]

 

 

но как тут col-md-2 col-sm-12 col-xs-12

незнаю сделал так первые значения поменял 2 сделал 3 у 2-го блока 8 сделал 7

 

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

Пробовали проверять результат на разных размерах экрана?

Есть причины подозревать, что теперь там что-то "сломалось".

Вы бы не трогали размер логотипа... пусть остаётся как есть ;)

 

Вы ссылку не дали, или я не увидел?

Змінено 24 грудня 2016 користувачем florapraktik

[deniss83]

Зашел с планшета логотип и корзина на месте а вот иконки доставки гарантии и тех.поддержки съехали по левому краю в хидере и текста нет к ним

сделал 1024 на 768 эти иконки есть ввхерху но текста нет 

вслючена адаптивность но ссылки мои как будто их нет

Змінено 25 грудня 2016 користувачем deniss83

[florapraktik]

Зашел с планшета логотип 

Вообще говоря, есть консоль разработчика - имитирует устройство с любым размером экрана.

Не меняйте цифры после col-  - будет съезжать вёрстка. 

[SiteMix]

Не меняйте цифры после col- - будет съезжать вёрстка.

Менять можно, но нужно делать это правильно. Я не зря дал ссылку на статью из которой можно почерпнуть эти моменты. Важно понять, что -md -sm -xs это разные разрешения. И на разных разрешениях возможна разная ширина блока.

 

Кстати, кроме этого ряда, есть ещё косяк в вёрстке в топ панели (о которой, кстати, тема). О нём я уже сообщал

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

Разобравшись с -md -sm -xs можно их легко заметить.

[florapraktik]

Менять можно, но нужно делать это правильно. 

Разобравшись с -md -sm -xs можно их легко заметить.

Я знаю. Но Автор темы хочет по-быстрому изменить уже сегодня. А разбираться потом, когда-нибудь.

Автор, так можно изменить, скажем, цвет бордера. Но не сетку бутстрапа.

[deniss83]

Я знаю. Но Автор темы хочет по-быстрому изменить уже сегодня. А разбираться потом, когда-нибудь.

Автор, так можно изменить, скажем, цвет бордера. Но не сетку бутстрапа.

 

Я не говорил что хочю изменить уже сегодня ! Моя цель сделать все правильно поэтому я читаю разные статьи например Что такое Bootstrap?

другой вопрос в том что практики не хватает.

Поэтому я здесь! 

я заменил только 1 блок md2 на 3,  2-й блок и md-8 на 6 и  3 блок корзина md-2 на 3 !!! в общей сумме 12 md 

3-й блок менял т.к. сумма в корзине вылазила за саму корзину 

 

-md -sm -xs как понять привязку к разрешениям вот это я не понял

Змінено 26 грудня 2016 користувачем deniss83

[SiteMix]

-md -sm -xs как понять привязку к разрешениям вот это я не понял

 

Посмотри абзац Функционал разметки в этой статье, станет понятнее.

[deniss83]

Посмотри абзац Функционал разметки в этой статье, станет понятнее.

Классная статья!  -md -sm -xs значит каждый из этих тегов отвечает за определенное разрешение

Но как строить есть например в топ меню где доставка 2 значения -sm -xs причем деленое двумя блоками

Еще из статьи понял что -md- 12 долей -xs- 18 долей  -sm-6 долей 

Как я уже выше писал что если заходишь с планшета логотип и корзина на месте а вот иконки доставки гарантии и тех.поддержки съехали по левому краю в хидере и текста(ссылки) нет к ним соответственно и выбрать нельзя

col. надо как-то прописывать?

[florapraktik]

Я не говорил что хочю изменить уже сегодня ! Моя цель сделать все правильно 

 

 Еще из статьи понял что -md- 12 долей -xs- 18 долей  -sm-6 долей ...

  col. надо как-то прописывать?

Вы возьмите и создайте простейшую html страницу. Подключите бутстрап + CSS файл. И попробуйте поиграться с этой сеткой. Не надо на движке. Просто возьмите примеры с того же бутстрапа, вбейте их вручную так, что бы кроме них вообще ничего не было. И попробуйте изменить нужный вам размер на примере тупо одного ряда прямоугольников. По изменяйте ширину окна и посмотрите на реакцию, сделайте вложенность, добавьте маржины и паддинги.

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

Змінено 26 грудня 2016 користувачем florapraktik

[SiteMix]

Еще из статьи понял что -md- 12 долей -xs- 18 долей -sm-6 долей

Не, неверно понял. Это пункты разрешения экранов:

xs - до 760рх включительно

sm - 768рх и выше

md - 992рх и выше

lg - 1200рх и выше

Эти точки могут применяться с префиксами (или как там они называются), наример, hidden. В примере ниже:

<span class="hidden-xs hidden-sm hidden-md">Доставка и оплата</span>

span будет скрыт на разрешениях до 1200рх. Это твой случай.

С колонками тот же принцип. Только нужно их не скрывать, а менять количество пунктов так, чтобы на разных разрешениях была необходимая ширина блока. Но в сумме в одной строке должно получиться 12 для каждого разрешения. Если на маленьких разрешениях этого будет недостаточно, то делается большее количество пунктов, чтобы один или несколько блоков перенеслись на другую строку. Например, если сделать так:

<div class="row">
<div class="header-top-left form-inline col-xs-12 col-sm-6 compact-hidden">
<div class="header-top-right form-inline col-xs-12 col-sm-6 compact-hidden">
</div>

то на разрешении до 760рх блок займёт всю ширину и второй блок перенесётся на следующую строку, а на разрешении 768 и выше блоки займут половину ширины каждый и они уместятся в строке.

[SiteMix]

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

 

Не могу не согласиться!

 

Мне вот так вот никто ссылок на статьи не подкидывал и не разжёвывал в своё время (может быть потому, что я сам дурак - не спрашивал...  :rolleyes: ). Разбирался с этими xs sm md lg методом тыка, "в полевых условиях"...

[deniss83]

Заниматься сайта строением это вообще не мой профиль ) но очень интересная тема которая может пригодится в современной жизни! 

Я по образованию архитектор))) к компьютерной тематике никакого отношения не имею, но хочу научится чему то новому!

Тут надо осваивать все последовательно, а у меня все направления одновременно  получается помаленьку ! Вот  голова уже  и дымиться) от новой инфы)

Что стоит доставку и оплату настроить это для меня вообще жесть 

Змінено 26 грудня 2016 користувачем deniss83

[deniss83]

Не, неверно понял. Это пункты разрешения экранов:

xs - до 760рх включительно

sm - 768рх и выше

md - 992рх и выше

lg - 1200рх и выше

Эти точки могут применяться с префиксами (или как там они называются), наример, hidden. В примере ниже:

<span class="hidden-xs hidden-sm hidden-md">Доставка и оплата</span>

span будет скрыт на разрешениях до 1200рх. Это твой случай.

С колонками тот же принцип. Только нужно их не скрывать, а менять количество пунктов так, чтобы на разных разрешениях была необходимая ширина блока. Но в сумме в одной строке должно получиться 12 для каждого разрешения. Если на маленьких разрешениях этого будет недостаточно, то делается большее количество пунктов, чтобы один или несколько блоков перенеслись на другую строку. Например, если сделать так:

<div class="row">
<div class="header-top-left form-inline col-xs-12 col-sm-6 compact-hidden">
<div class="header-top-right form-inline col-xs-12 col-sm-6 compact-hidden">
</div>

то на разрешении до 760рх блок займёт всю ширину и второй блок перенесётся на следующую строку, а на разрешении 768 и выше блоки займут половину ширины каждый и они уместятся в строке.

 

 

<span class="hidden-xs hidden-sm hidden-md">Доставка и оплата</span>

 

значит надо убрать префиксы hidden-xs hidden-sm hidden-md? чтобы он показывался до1200 px 

или я чтото не так понял

 

Для чего вообще что либо скрывать?

 

и добавить в этот код 

<!-- Header Top -->

<section class="header-top">

<div class="container">

<div class="row">

<div class="header-top-left form-inline col-xs-12 col-sm-9 compact-hidden">

 

вот это col-xs-12

 

и еще добавить сюда

 

</div>

<div class="header-top-right collapsed-block col-xs-12 col-xs-3 compact-hidden">

<h5 class="tabBlockTitle visible-sm visible-xs"><?php echo $text_more; ?><a class="expander " href="#TabBlock-1"><i class="fa fa-angle-down"></i></a></h5>

<div  class="tabBlock" id="TabBlock-1">

Змінено 28 грудня 2016 користувачем deniss83

[florapraktik]

Такое впечатление, что вы пытаетесь угадать.

[SiteMix]

Доставка и оплата значит надо убрать префиксы hidden-xs hidden-sm hidden-md? чтобы он показывался до1200 px или я чтото не так понял

Для чего вообще что либо скрывать?

Да, если убрать эти классы, то надпись будет отображаться всегда. Но надо понимать, что эти классы добавлены не просто так. На маленьких экранах все надписи не помещаются, поэтому тексты скрываются и остаются только значки. Можно отдельные надписи скрывать не на всех разрешения, а только на xs и sm, например.

 

и добавить в этот код

вот это col-xs-12

и еще добавить сюда

<div class="header-top-right collapsed-block col-xs-12 col-xs-3 compact-hidden">

Направление мысли правильное. Если не умещается в строку и нужно сделать перенос блока на другую строку, то можно так сделать. Но посмотри внимательно, у тебя получается xs два раза!

 

И, да, многие вопросы разрешаются сами собой и появляется понимание, когда начинаешь пробовать. Нажми Ctr + Shift + M и смотри как сайт выглядит на разных разрешениях. Правда, на маленьких разрешениях может отличаться от увиденного на экране телефона, но в основном настроить можно, а потом поправить сверяясь.

Змінено 28 грудня 2016 користувачем SiteMix

[deniss83]

@SiteMix,

  Но посмотри внимательно, у тебя получается xs два раза!

 Получается col-xs-3 надо сlелать sm-3 и сюда добавить col-xs-12

[SiteMix]

Да, для данного примера, если

<div class="header-top-left form-inline col-xs-12 col-sm-9 compact-hidden">

то должно быть

<div class="header-top-right collapsed-block col-xs-12 col-sm-3 compact-hidden">

[deniss83]

 

 

 

Да, для данного примера, если

<div class="header-top-left form-inline col-xs-12 col-sm-9 compact-hidden">

то должно быть

<div class="header-top-right collapsed-block col-xs-12 col-sm-3 compact-hidden">

 

Нажал ctrl shift + m вылез гостевой режим а как тут разные разрешения ставить?

Змінено 28 грудня 2016 користувачем deniss83

[SiteMix]

Нажал ctrl shift + m вылез гостевой режим а как тут разные разрешения ставить?

Вероятно, мне следовало написать, что я использую FireFox. Как вызвать такой эмулятор в других браузерах не знаю.

[deniss83]

Вероятно, мне следовало написать, что я использую FireFox. Как вызвать такой эмулятор в других браузерах не знаю.

Все спасибо за уточнения!

 

Слушай вопрос не по теме тоже нравится FireFox но каждый раз при закрытии и открытии закрываются вкладки ! Как настроить чтобы вкладки оставались как например в опере?

Змінено 28 грудня 2016 користувачем deniss83

[SiteMix]

Все спасибо за уточнения!

 

Слушай вопрос не по теме тоже нравится FireFox но каждый раз при закрытии и открытии закрываются вкладки ! Как настроить чтобы вкладки оставались как например в опере?

 

Настройки - Основное - При запуске Firefox: Откывать окна и вкладки открытые в прошлый раз

[deniss83]

Настройки - Основное - При запуске Firefox: Откывать окна и вкладки открытые в прошлый раз

я естественно и раньше  смотрел, но нет у меня такой строки 

все нашел у меня по другому чучуть :geek:

СПАСИБО ДРУГ ЗА ВСЕ! :D

Змінено 28 грудня 2016 користувачем deniss83

[SiteMix]

Пожалуйста!

8-)

[deniss83]

Слушай у меня еще вот такие вопросы!

Как посмотреть структурную разметку шаблона?

У меня на главной странице ( под главным горизонтальным меню справа на нем надпись "Нет пункта показать!" )есть модуль он почему-то не работает !

Работать он должен вот так ДЕМО

http://opencart.magentech.com/themes/so_shoppystore/

интересный модуль

Может есть что то подобное среди модулей для опенкарта 2.1 ? т.к. этот я наврятли заведу в настройках перетыкал все реакции ноль!

Не могу найти его исходник в каком файле его искать?

Хочю добавить <span class="hidden-xs hidden-sm hidden-md"> чтобы он не вылазил при малом разрешении! Т.к сейчас он на планшете занимает всю ширину страницы!

Заранее спасибо!

[SiteMix]

С этим шаблоном не знаком. Разметку можно найти в Схемах.

 

Возможно этот модуль называется "Daily Deals" или как-то так.
 
<span class="hidden-xs hidden-sm hidden-md">...</span> предназначен для определения строчных элементов, поэтому оборачивать им DIV-ы не надо. Можно добавить class="hidden-xs hidden-sm" самому блоку. Например, есть <div class="module style-dev-so-deals">...</div>, добавляешь нужные классы и получается <div class="module style-dev-so-deals hidden-xs hidden-sm">...</div> Но в этом случае там возможно будет пустота. Надо смотреть какие стили у слайдера.

 

Кстати, в данном случае проще вместо правки шаблона модуля скрыть его через /catalog/view/theme/so-shoppystore/css/theme-red.css

Для этого добавь в конце файла

.module.style-dev-so-deals {display: none;}

Если нужно скрыть только на определённых разрешениях погугли про медиа запросы.