Правка дизайна шаблона в Opencart 2 (OcStore 2.1.0.2.1) #39

Автор Filip Sergienko
Правка дизайна шаблона в Opencart 2 (OcStore 2.1.0.2.1) #39

Всем привет друзья.

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

Гуру отлично разбирающийся в HTML и CSS, но за время работы над своим и другими проектами кое-чему научился, что хочу с вами поделиться всё, что вам потребуется для изменения дизайна вашего шаблона — это браузер Google Chrome и доступ к вашему ftp-серверу и так начнем по сути изменение цветов почти.

Всех элементов нашего шаблона сводится к редактированию файла оставил щит. который стандартном шаблоне располагается по пути каталог в User default или название вашей. Новой темы. Павел ищет style.css. Если вы хотите отредактировать стеллини стандартного шаблона, а какого-либо другого перед тем как что-то менять сначала внимательно проверить основные настройки вашего шаблона которые обычно в админке по пути дополнения модуля и название вашего шаблона возможного шаблон уже содержит в себе инструменты необходимые для более простой и удобный правки дизайна и элементов несколько готовых световых схем которые можно применить. Настоятельно Рекомендую вам делать бэкап всех изменяемых вами файлов в том числе и style.css перед началом работ в случае каких-либо ошибок они вам очень пригодятся я покажу вам как изменить цвета нескольких на главной странице диффузного шаблона, а именно. Давайте начнём с цвета фона главного меню и так, что нам нужно сделать открываем главную страницу или ту страницу на вы хотите что-то изменить в браузере Google Chrome далее нам нужно выбрать элемент который мы хотим изменить в нашем случае — это будет главное меню кликаем по нему правой кнопкой мыши в любом месте и выбираем. Самый Нижний пункт просмотреть кот после того как вы — это сделаете в правой части браузер у вас откроется окно с заголовком Elements. Где вы видите код выбранного элемента и всей страницы в целом в этом окне синим цветом под светится строка с кодом того элемента который вы выбрали. А в окне браузера выбранный элемент под светится зелёным цветом чуть ниже в левой части нового окна вы увидите ещё название msstyles как раз-таки содержимое этого окна нам и нужна она как раз таки отображает код который содержится в файле styles.css. Нам необходимо найти в окне Styles маленькую иконку в виде квадрата цветом выбранного нами элемента. Если вы не увидите iconx сразу в верхней части окна. Прокрутите ползунок ниже после того как вы считаете, что нашли нужную иконку просто кликните по ней прямо в центр и вас откроется цветная палитра с помощью которой вы сможете так сказать примерить нужный вам цвет данного элемента. Что значит примерить. Это значит, что все изменения которые. Мы производим с вами в коде браузера виден только мы и они никак не влияют на отображение вашего сайта для других его посетить пока мы не внесли изменения в файл стилей на ftp-сервере и так если при изменении свет в окне палитра цвет вашего выбранного элемента в окне браузера тоже изменяется то. Поздравляю вас вы нашли нужную строку кода дело остается за малым. Если вы не мог найти иконку то возможно вы неверно выбрали строку кода в окне с заголовком Elements. Попробуйте под нажимать настройки рядом стоящие с выбранным элементам выше или ниже при этом смотрите какие блоки или элементы страницы подсвечиваются зеленым цветом в основном окне браузера считаете, что нашли нужный элемент пробуйте опять искать цветную пленку в окне ставилась и цвет если выбранный вами элемент начал менять цвет значит вы нашли то, что нужно обращаю. Ваше внимание на то, что цвет некоторых элементов может из нескольких цветов цвет фона background цвет границы и цвет тени случай с меню. Так оно и есть. Так, что если вам нужна. Вы можете изменить все нужные цвета элементы меню они только фон после того как мы нашли нужную иконку и выбрали в палитре нужный нам цвет меню над текстом hex в окне палитры вы увидите HTML код выбранного цвета. Вам необходимо его скопировать в блокнот теперь нам нужно найти изменить эту жест рук отвечающие за цвет меню в нашем файлы стилей или CSS правой части окна в котором вы меняли цвет иконки вы увидите ссылку при наведении на которую отобразится в путь к нужному файлу стилей в котором содержатся нужные нам код как правило в 90% случаев этот файл с именем stylesheet CSS который в стандартном шаблоне по пути catalog View The default stylesheet в самом конце указывается через двоеточие номер нужный нам строки который находится в данный код всё, что нам теперь остаётся сделать — это открыть данный файл через FTP сервер найти строку со стилями нашего мента изменить в строчке код цвета на тот который мы скопировали в блокнот и конечно же не забыть сохранить редактируемый файл и залить изменения на сервер в самом конце также не забудьте обновить страницу в браузере сбросить кэш нажав Control Plus опять если после этих действий вы увидите, что нужны вам элемент изменил цвет то вас всё получилось. Поздравляю вас таким же образом вы сможете менять цвет и всех других элементов вашего шаблона далее я просто покажу как изменить цвет от других элементов стандартного шаблона уже без комментариев для того что.

0 комментариев
0

Читайте также