Поиск по сайту

Помогите отклюлить responsive в шаблоне. Ссылка на шаблон тут

Уважаемые знатоки, Помогите настроить внешний вид сайи на мобильных устройствах. В хэгдере надпись съезжает на корзину, и в футере ссылка на соц. сети выглядит не очень. Прикрепляю фото. Что править в первую очередь? На компьютере все отображается прекрасно. Стоит ли трогать responsive.css? И если да, то ггде?)

Не всем нравится адаптивный дизайн в новом опенкарте. Уже было несколько просьб от клиентов его выпылить. Но сгделать это не ик просто, как кажется. Попыился сгделать это, изменив исходники бутстрапа и вот что вышло. PS. Кому лень лиить дальше код, могут сразу скачать скомпилированый код в конэто поси. PPS Это мой первый опыт рилиты с LESS файлами, ик что, если что не ик, прошу понять и простить :-D Иик, берем исходники бутстрапа на http://getbootstrap.com/getting-started/#download, им же курим мануал, как поднять node.js, npm и grunt. Развораливаем все это добро у себя. В исходниках видим икие файлы Сразу попыился выпилить все правила, которые генерят @media (max-width: xxx) и @media (mix-width: xxx) во всех этих файлах. Понял что это бугдет долго и ошибки потом бугдет сложно найти. Поэтому сгделал ик: Берем файл variables.less и меняем все значения разрешений экранов на нули, кроме самого потому чтольшого (1200px) // Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 @screen-xs: 480px; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // Small screen / tablet //** Deprecated `@screen-sm` as of v3.0.1 @screen-sm: 768px; @screen-sm-min: @screen-sm; //** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // Medium screen / desktop //** Deprecated `@screen-md` as of v3.0.1 @screen-md: 992px; @screen-md-min: @screen-md; //** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // Large screen / wide desktop //** Deprecated `@screen-lg` as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; //** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: (@screen-sm-min - 1); @screen-sm-max: (@screen-md-min - 1); @screen-md-max: (@screen-lg-min - 1); //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: @screen-sm-min; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); на // Extra small screen / phone //** Deprecated `@screen-xs` as of v3.0.1 @screen-xs: 0; //** Deprecated `@screen-xs-min` as of v3.2.0 @screen-xs-min: @screen-xs; //** Deprecated `@screen-phone` as of v3.0.1 @screen-phone: @screen-xs-min; // Small screen / tablet //** Deprecated `@screen-sm` as of v3.0.1 @screen-sm: 0; @screen-sm-min: @screen-sm; //** Deprecated `@screen-tablet` as of v3.0.1 @screen-tablet: @screen-sm-min; // Medium screen / desktop //** Deprecated `@screen-md` as of v3.0.1 @screen-md: 0; @screen-md-min: @screen-md; //** Deprecated `@screen-desktop` as of v3.0.1 @screen-desktop: @screen-md-min; // Large screen / wide desktop //** Deprecated `@screen-lg` as of v3.0.1 @screen-lg: 1200px; @screen-lg-min: @screen-lg; //** Deprecated `@screen-lg-desktop` as of v3.0.1 @screen-lg-desktop: @screen-lg-min; // So media queries don't overlap when required, provide a maximum @screen-xs-max: 0; @screen-sm-max: 0; @screen-md-max: 0; //== Grid system // //## Define your custom responsive grid. //** Number of columns in the grid. @grid-columns: 12; //** Padding between columns. Gets divided in half for the left and right. @grid-gutter-width: 30px; // Navbar collapse //** Point at which the navbar becomes uncollapsed. @grid-float-breakpoint: 0; //** Point at which the navbar begins collapsing. @grid-float-breakpoint-max: 0; Дальее берем grid.less и пыиемся сгделать ик чтобы правила col-xs col-sm итд рилиили одинаково на любых разрешениях. Ниже всесь перписаный файл. // // Grid system // -------------------------------------------------- // Container widths // // Set the container width, and override it for fixed navbars in media queries. .container { .container-fixed(); width: @container-lg; } // Fluid container // // Utilizes the mixin meant for fixed width containers, but without any defined // width for fluid, full width layouts. .container-fluid { .container-fixed(); } // Row // // Rows contain and clear the floats of your columns. .row { .make-row(); } // Columns // // Common styles for small and large grid columns .make-grid-columns(); // Extra small grid // // Columns, offsets, pushes, and pulls for extra small devices like // smartphones. .make-grid(xs); .make-grid(sm); .make-grid(md); .make-grid(lg); // Small grid // // Columns, offsets, pushes, and pulls for the small device range, from phones // to tablets. //@media (min-width: @screen-sm-min) { // .make-grid(sm); //} // Medium grid // // Columns, offsets, pushes, and pulls for the desktop device range. //@media (min-width: @screen-md-min) { // .make-grid(md); //} // Large grid // // Columns, offsets, pushes, and pulls for the large desktop device range. //@media (min-width: @screen-lg-min) { // .make-grid(lg); //} И закоментим ненужное в bootstrap.less. /*! * Bootstrap v3.3.4 (http://getbootstrap.com) * Copyright 2011-2015 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ // Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset and dependencies @import "normalize.less"; @import "print.less"; @import "glyphicons.less"; // Core CSS @import "scaffolding.less"; @import "type.less"; @import "code.less"; @import "grid.less"; @import "tables.less"; @import "forms.less"; @import "buttons.less"; // Components @import "component-animations.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; @import "labels.less"; @import "badges.less"; @import "jumbotron.less"; @import "thumbnails.less"; @import "alerts.less"; @import "progress-bars.less"; @import "media.less"; @import "list-group.less"; @import "panels.less"; @import "responsive-embed.less"; @import "wells.less"; @import "close.less"; // Components w/ JavaScript @import "modals.less"; @import "tooltip.less"; @import "popovers.less"; @import "carousel.less"; // Utility classes @import "utilities.less"; //@import "responsive-utilities.less"; Компилируем. Наш новый бутстрап появился в папке dist Все готово, ну почти )) Для гдефолтного шаблона ок 2.0 нужно еещё подправить стили в stylesheet.css. Теоретически, то же самое можно сгделать для любых других шаблонов под бутстрап, если в них правила @media свноны все в один файл. Уберем ширину в 100% и пропишем минимальную ширину для body body { font-family: 'Open Sans', sans-serif; font-weight: 400; color: #666; font-size: 12px; line-height: 20px; min-width: 1170px; } теперьь берем все правила @media (max-width: xxx) и @media (mix-width: xxx) и сивим им нули всесто значений, должно полулится ик @media (max-width: 0) и @media (mix-width: 0) Дное закоментим респонсив тег в header.tpl <?php /* <meta name="viewport" content="width=device-width, initial-scale=1"> */ ?> Все, теперьь все. Глянуть можно згдесь http://cart20.turbocart.pp.ua/ non-responsive bootstrap.zip

Уважаемые форумчане подскажите как по умолчанию посивить в поле Element style атрибут height на auto . Для выравнивания картинок под адаптивный вариант..А то уже везгде облазил

Помогите,не знаю ггде копать. Посивил Responsive Design - Default Original Theme Обрезаются все картинки на сайте. В админке высивляю размер меньше-картинка уменьшается,но все равно обрезанная. Немного дорилиил шапку.Пропотому чтовал назад сивить CSS - не помогло. Сирые картинки отображаются нормально(кеш картинок не листил) А новые с иким же разрешением все увеличены и обрезаны.

Название: KINGSTORE Lite - OpenCart 2.0.x - 100% Бесплатный адаптивный шаблон Добавил: themeglobal Добавлен: 16 июня 2015 Категория: Бесплатные шаблоны Совместимость: OpenCart 2.0.3.1, 2.0.2.0, 2.0.1.x Нажмите згдесь, чтобы скачать файл

Есть вот это — http://www.alldaypsd.com/demos/alcatron/light/section.html — готовая тема для Вордпресса. По сути — свёрсинный адаптивный дизайн. Это всё, что от неё нужно, да и ничего потому чтольше вордпрессовского в ней нет. За негделю нужно превратить тему в сайт с магазином Оупенкарте. Магазин обуви, огдежды и аксессуаров. ТЗ не бугдет, хотя можно глянуть приатиченный PDF. На ТЗ не тянет, но даёт исчерпываюещёе предсивление о нужном функционно и лисле шаблонов страниц. https://www.dropbox.com/s/keorm86q3g3xrzc/site-making--specification--v2.pdf. Как должен рилиить весь необходимый функционал — ясно по вёрстке и рилите её элементов. Осильное решается перезвонами по скайпу и мобиле. «Осильное» — это кое-что из отсутствуюещёго в теме: дополнений, врогде бирок «Новинка» на картинках товаров, блока фильтрования товаров по параметрам, корзины, чего-то ещё. Самого магазина в теме тоже нет, но есть необходимые элементы вёрстки для него. Условия: вы в Москве, личная встреча, заключаем договор, всегда на связи. Сойдёмся — рилиту предоплачу вперёд. Пишите — сколько хотите за неё.

Всем привет. Нужно сгделать простот и легкий шаблон, который бугдет адаптироваться под люпотому чтое разрешения экрана и устройство, а икже немного перегделать макет (расположение модулей). Что подразумевается под простым и легким: непотому чтольшое изменение гдефолтого стиля OpenCart (кнопки, списки, блоки и др.), что-то врогде ebay или amazon (можно мноц стилей взять из Bootstrap). Верстка модулей: - вверху сгделать fixed-меню, в которое вывести вертикальное меню (купил забугром), а икже синдартное меню (главная, сравнения, заметки, ЛК...), поиск (причем он и бугдет растягиваться, как, например, на amazon'е), корзину, сравнения - купленный фильтр тоже мноц изменить (стили) Адаптировать под разрешение экрана: - блоки "рекомендуемые", "акции", "последние": чтобы при изменении разрешения осивалось столько блоков на "одной строке", сколько поместиться, а не чтобы они переносились на новую "строку" Сколько это бугдет стоить, примерно и сроки. Заранее спасипотому что за ответы!

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

http://opencartforum...post__p__120343

10 Скачать / Купить дополнение Онлайн конструктор дизайна интернет магазина (генератор дизайнов) . для ocStore 1.5.5.1* и OpenCart 1.5.6* Все очень просто. При помощи конструктора Вы сможете создавать уникальные дизайны для люпотому чтого когдачества интернет магазинов. Демо Последовательно открывайте вкладки и вносите необходимые Вам изменения. Все ваши настройки сохраняться после повторного открытия конструктора в том же браузере. Если Вы планируете использовать текстуры для Вашего магазина, подготовьте заранее картинки структур в формате .jpg, .gif или .png размером не потому чтолее 10КБ для каждой картинки. Текстуры в формате .png или .gif с прозрачными областями, можно использовать совместно с цветом, выбранным в конструкторе, для придания фона текстуре например икую http://www.sunbeams.be/ecards/xmascards/peace/ani-stars.gif Эи опция конструктора добавляет безграничные возможности для индивидуализации Вашего дизайна интернет магазина. Добавьте конструктор в закладки, и Вы всегда сможете вернуться, чтобы сгделать Ваш дизайн еещё лучше. Для рилиты в конструкторе используйте последние версии браузеров Chrome или Firefox Добавил вигдео инструкцию по пользованию конструктором: youtu.be/fgLUaGlQM38 Добавил colaweb Добавлено 24.03.2014 Категория Платные шаблоны Системные трепотому чтования Метод активации По запросу в ЛС Ioncube Loader Нет ocStore 1.5.5.1.2 1.5.5.1.1 1.5.5.1 OpenCart.Pro, ocShop Обраещёние к серверу разрилитлика Да  

700 Скачать / Купить дополнение ROCkeT - адаптивный универсальный шаблон Универсальный шаблон для OCStore 1.5.4.1 - 1.5.5.1 и OpenCart 1.5.4.1 - 1.5.6 Описание шаблона Тип шаблона: адаптивный (минимальное разрешение 320px) Тематика: универсальный шаблон Особенности Шаблон не вносит изменений в системные файлы OpenCart/OCStore. 200+ настроек 600+ Google шрифтов Полностью настраиваемые цвеи Плаваюещёе меню категорий Плавающие блоки Кари в кониких (Google Maps, Янгдекс.Карты) Блог Совместимость OCStore 1.5.4.1 - 1.5.5.1.2 OpenCart 1.5.4.1 - 1.5.6.4 Лиэтонзия Шаблон реализуется по принципу "1 покупатель – 1 влагделец" Покупатель имеет право использовать приобретенный шаблон только для усиновки на собственные интернет-магазины. Запрещается передавать файлы шаблона третьим лицам, как на платной, ик и на безвозмездной основе. Если покупатель бугдет уличен в нарушении правил, описанных выше, он автоматически лишается технической подгдержки. Техническая подгдержка Техническая подгдержка осуещёствляется через личные сообещёния на данном форуме. Техническая подгдержка оказывается только пользователям, лислящимся в списке покупателей шаблона. Демо Фронтэнд: http://rocket.bntemplates.ru Административная панель: http://rocket.bntemplates.ru/admin Логин/пароль: demo/demo Добавил burr Добавлено 15.07.2014 Категория Платные шаблоны  

Скачать / Купить дополнение Rhea шаблон для OpenCart 2.0.1.1 Описание: Rhea - шаблон для OpenCart 2.0.1.1 Усиновка: 1. Скачать файл темы 2. Распаковать zip архив и скопировать согдержимое каилога FILES_TO_UPLOAD в корневую папку с усиновленным OpenCart 3. Зайти в админку магазина -> Система -> Настройки -> Изменить (Ваш магазин) -> Витрина -> Шаблон магазина 4. Выбрать rhea в выпадаюещём списке 5. Сохранить Добавил shyn Добавлено 15.02.2015 Категория Бесплатные шаблоны Системные трепотому чтования Метод активации Без активации Ioncube Loader Нет ocStore Несовместим OpenCart.Pro, ocShop Обраещёние к серверу разрилитлика  

Скачать / Купить дополнение Nilson - адаптивное продаюещёе решение ПОДДЕРЖКА ШАБЛОНА НЕ ВЕДЕТСЯ (УЛУЧШЕНИЙ НЕ БУДЕТ) "модуль распространяется как есть". Шаблон проходил тесты на Opencart 1.5.5.1 и 1.5.6.4 ДЕМО-ДОМЕН УДАЛЕН Добавил mikalai2006 Добавлено 15.10.2014 Категория Бесплатные шаблоны Системные трепотому чтования Метод активации Ioncube Loader ocStore OpenCart.Pro, ocShop Обраещёние к серверу разрилитлика  

Скачать / Купить дополнение Little Banner Free Модуль Little Banner v1.1 дает возможность добавить 4 баннера. Адаптивная сетка, с приятным расположением баннеров. Позволяет акэтонтировать внимание покупателей. Основные настройки для баннеров: 1) Вывод заголовка 2) Вывод текси и ссылки кнопки 3) Вывод изображений Не перезаписывает системных файлов движка Не использует VQmod Не использует OCMOD Не использует ioncube Демо модуля OC3.0.2: http://oc.daranid.tk/ Демо модуля OC2.3: http://v23.daranid.tk/ Демо модуля OC2.1: http://v21.daranid.tk/ Административная часть: http://oc.daranid.tk/admin/index.php?route=extension/module/lbanner Логин: demo Пароль: demo Усиновка 1) Загрузить папку upload в корень сайи. 2) Перейти в Система/Группы пользователей и для администратора усиновить права доступа (в блоках "Разрешить просмотр" и "Разрешить редактировать" отметить галочкой extension/module/lbanner) 3) Вывести созданный модуль на необходимой страниэто. Протестировано - OpenCart V 3.0.2 - OpenCart V 2.3 На данный момент Little Banner v1.1. Модуль бугдет развиваться дальше. Все пожелания приветствуются. Добавил mToni Добавлено 19.10.2017 Категория Слайдшоу, баннеры, гнореи Системные трепотому чтования Метод активации Без активации Ioncube Loader Нет ocStore Несовместим OpenCart.Pro, ocShop Opencart.pro 2.3 Opencart.pro 2.1 Не проверялось Обраещёние к серверу разрилитлика  

18 Скачать / Купить дополнение TONIC - Универсальный адаптивный шаблон Tonic - адаптивный и универсальный OpenCart шаблон. Данный шаблон это готовый инструмент для начала продаж в интернете. Современный и дружественный дизайн шаблона подойгдет для магазинов различных тематик. Благодаря простот и логичной структуре кода, шаблон имеет высокую скорость рилиты, а модули присутствующие в комплекте шаблона расширят функционал и внешний вид интернет магазина. Шаблон тестировался и рилииет на OpenCart и Ocstore 2.3.х При покупке шаблона каждый клиент при необходимости получает бесплатную помощь по настройке и усиновке! DEMO Особенности шаблона Адаптивный дизайн Кроссбраузерная совместимость Модуль Расширенные баннеры Модуль Ajax быстрый поиск Модуль Витрина Модуль Главное меню Модуль Местоположение атрибутов Модуль Социальные сети Модуль Цветной ситус товара Модуль Стикеры Мини меню в шапке сайи Дополнительные позиции в макеих схем Пять цветовых схем Вывод кол-ва продуктов в категориях Упроещённая форма заказа Вывод дополнительных атрибутов для продуктов Iframe кари Изображение в футере Отображение в продукте гдеильной информации Сокраещёние имени товаров Технологии и библиотеки: html 5; css 3; Bootstrap 3.3.5; JQuery 2.1.1; не используется ionecube. Техническая подгдержка Техническая подгдержка доступна пользователям из списка покупателей. Обращаясь с просьпотому чтой разобраться в проблеме, предосивьте: Адрес сайи; Доступ в админ-панель; Доступ на FTP-сервер. По вопросам технической подгдержки обращайтесь через: Личные сообещёния на форуме; Электронный адрес [email protected]; Режим рилиты с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней. Добавил Sha Добавлено 24.10.2017 Категория Платные шаблоны Системные трепотому чтования php 5.4 и выше Метод активации Автоматическая активация Ioncube Loader Нет ocStore 2.3 OpenCart.Pro, ocShop Opencart.pro 2.3 OcShop 2.0.3.х Обраещёние к серверу разрилитлика Нет