css градиент в safari

Как задать css градиент в браузере Safari? 4/5 (1)

Общеизвестно, что браузер Safari от  компании Apple, функционирующий на движке Webkit, немного по-другому отображает контент веб – страницы в сравнении с браузерами Opera, Mozilla Firefox и Google Chrome.

Но если с Firefox всё понятно – он разработан на движке собственного производства Gecko, то почему  в браузере Safari сайт выглядит несколько иначе, чем в Opera и Chrome, так же работающих на движке Webkit?

Причина здесь кроется в небольших различиях механизмов рендеринга браузеров, отвечающих за вывод веб – страницы на экран монитора. Т. к. эта статья не о различиях в движках браузеров, то подробно на этом останавливаться не будем.

Кому интересно, можно почитать здесь.
Читать дальше проКак задать css градиент в браузере Safari? 4/5 (1)


Редактируем клавишу “купить” в OpenCart 5/5 (2)

Стандартный блок клавиш карточки товара в OpenCart состоит из 3-х кнопок: “Купить”, “В сравнение” и “Закладки”.

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

Давайте разберём, как это сделать на примере дефолтного шаблона OpenCart.

Читать дальше проРедактируем клавишу “купить” в OpenCart 5/5 (2)


Как отключить java – скрипт при определённом разрешении экрана? 5/5 (1)

Очень часто возникает необходимость сделать так, чтобы какой – либо скрипт не срабатывал на устройствах с маленькой диагональю экрана или низким разрешением, таких, как смартфоны и планшеты. Почему? Потому что некоторые скрипты некорректно отрабатывают на мобильных устройствах, мешая пользователям просматривать контент на сайте, поэтому  возникает необходимость отключить javascript на этих девайсах. Как же это сделать? […]

адаптивный дизайн сайта

Адаптивный дизайн сайта 5/5 (1)

Как сделать сайт адаптивным?

Адаптивный дизайн (“резиновая” верстка) – одно из основных требований к современному сайту. С развитием цифровых технологий и появлением на рынке мобильных  устройств смартфонов и планшетов адаптивный дизайн стал одним из ключевых требований при разработке любого веб – ресурса.

Так что же такое адаптивность? Давайте рассмотрим на конкретном примере.

Допустим, у нас есть сайт со стандартной разметкой, представляющий собой  хедер, боковые сайдбары, блок контента и футер (рис.1).
Читать дальше проАдаптивный дизайн сайта 5/5 (1)


css меню

Горизонтальное css – меню для сайта

В этом примере  мы создадим простое горизонтальное меню для сайта при помощи html и css.

Для этого сначала сделаем html – разметку нашего будущего меню:

<ul>
<li><a href=”#”>Главная</a></li>
<li><a href=”#”>О нас</a></li>
<li><a href=”#”>Портфолио</a></li>
<li><a href=”#”>Статьи</a></li>
<li><a href=”#”>Контакты</a></li>
</ul>

Отлично. После того, как разметка готова, необходимо задать меню необходимые свойства посредством css.

Для этого пропишем следующий код:

<style>
ul{width:700px;margin:0 auto;}
li{display:inline-block;border:1px solid rgb(95, 79, 17);padding:10px 20px;margin-right:5px;background:coral;color:white;text-transform:uppercase;}
li:hover{background:orange;color:black;}
a{color:white;text-decoration:none}
</style>

Читать дальше проГоризонтальное css – меню для сайта


модальное окно на bootstrap

Модальное окно на Bootstrap 4/5 (2)

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

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

В этой же статье рассмотрим, как подключить модальное окно на сайт,  которое появляется при нажатии на ссылку. А делать мы это будем с помощью фреймворка Twitter Bootstrap.
Читать дальше проМодальное окно на Bootstrap 4/5 (2)


Как поменять значок корзины Open Cart? 5/5 (3)

Как поменять стандартный значок корзины Open Cart?

Для того, чтобы поменять значок корзины в CMS Opencart, необходимо:

  1. Загрузить на сервер вашу иконку.
  2. Прописать путь к ней в нескольких файлах.

Для начала через админ-панель открываем файл cart.twig, расположенный по адресу: дизайн→редактор шаблона→common→cart.twig и находим в строке 2 такой код:

<i class=”fa fa-shopping-cart”></i>.

cart.twig

рис.1 cart.twig

Читать дальше проКак поменять значок корзины Open Cart? 5/5 (3)


Как перенести корзину в Open Cart? 4/5 (1)

Переносим корзину в верхнее меню OpenCart

Многие при создании интернет – магазина на OpenCart сталкиваются с необходимостью перенести корзину в место, отличное от того, где она расположена  изначально. В нашем примере рассмотрим,  как перенести её в верхнее меню хедера стандартного шаблона OpenCart.

Для того, чтобы перенести корзину OpenCart в верхнее меню, открываем в админ-панели файл header.twig, расположенный по адресу дизайн→редактор шаблона→common→header.twig и находим в строке 77 такой код:

 <div class=”col-sm-3″>{{ cart }}</div>

перенести корзину open cart

рис 1.  header.twig

Читать дальше проКак перенести корзину в Open Cart? 4/5 (1)


Как удалить ссылки из футера OpenCart?

Чистим футер OpenCart от лишних ссылок

Ещё одна вещь, которую мне предстояло решить в процессе создания магазина – это удаление лишней информации из футера сайта.
Подвал OpenCart перегружен различными ссылками на страницы тех. помощи и информацией об акциях, скидках, купонах и т.д.
Удалить всё ненужные строчки, как и добавить свои, можно через файл footer.twig. расположенный в панели управления по адресу:  дизайн→редактор шаблона→common→footer.twig.
Допустим, если вам нужно убрать информацию о сертификатах, партнёрской программе и производителях, то удаляем (а лучше комментируем, вдруг понадобятся), эти строки:

<!–<li><a href=”{{ manufacturer }}”>{{ text_manufacturer }}</a></li>
<li><a href=”{{ voucher }}”>{{ text_voucher }}</a></li>
<li><a href=”{{ affiliate }}”>{{ text_affiliate }}</a></li>–>

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

Читать дальше проКак удалить ссылки из футера OpenCart?


Как добавить адреса и телефоны в шапку OpenCart?

Так получилось, что срочно возникла необходимость создать интернет-магазин на OpenCart. При этом практического опыта работы с этой CMS до начала проектирования сайта у меня не было. В арсенале были знания css3 и html5, немного php и javascript, а из популярных систем управления я был знаком только с joomla. Но отступать было некуда — задача была […]