Как добавить дочернюю тему или только отдельный файл CSS в Magento Тема или сайт

Question

Наш сайт построен с Magento внешним агентством. Недавно я попросил их создать дочернюю тему для нас или просто отдельный файл CSS, где я мог бы сделать некоторые изменения, не затрагивая основную тему.

Они вернулись с цитатой из £ 65 * 8 часов работы. Я лично думаю, что создание папки и сброс файла css не займет 8 часов, но у меня нет опыта создания темы Magento, поэтому я не уверен, как ответить.

Может ли кто-нибудь помочь мне, как добавить отдельный файл CSS или дочернюю тему, любая помощь будет высоко оценена.

Answer 1

Создание дочерней темы Шаг 1: Создание папок и файлов структура для ребенка темы Magento в.

Goto app/design/frontend и создайте свой пакет и следующие папки и файлы в нем. Вы заметили, что уже есть три пакета: base, default и rwd.

Мы собираемся создать дочернюю тему rwd-темы, которая является отзывчивой.

приложение/дизайн/интерфейс/{PackageName}/{THEMENAME}/и т.д. приложение/дизайн/интерфейс/{PackageName}/{THEMENAME} /etc/theme.xml приложение/дизайн/интерфейс/{PackageName }/{THEMENAME}/макет приложение/дизайн/интерфейс/{PACKAGENAME}/{} THEMENAME /layout/local.xml приложение/дизайн/интерфейс/{PACKAGENAME}/{THEMENAME}/шаблон

заменить {packageName} с вашим именем пакета и тем же именем {themeName}. В нашем случае имя пакета - MyPackage, а тема - MyTheme соответственно.

приложение/дизайн/интерфейс/MyPackage/MyTheme/и т.д. приложение/дизайн/интерфейс/MyPackage/MyTheme/и т.д./theme.xml приложение/дизайн/интерфейс/MyPackage/MyTheme/макета приложение/дизайн/интерфейс/MyPackage/MyTheme/макет/local.xml приложение/дизайн/интерфейс/MyPackage/MyTheme/шаблон

Как мы сделали с файлами и каталогами теперь мы должны сказать, что наш Magento родительская тема - rwd для MyPackage/My Тема. Чтобы сделать это открытое приложение/дизайн/интерфейс/MyPackage/MyTheme/и т.д./theme.xml и редактировать theme.xml ниже -

<?xml version="1.0" ?> 
<theme> 
     <parent>rwd/default</parent> 
</theme> 

Теперь перейдите кожи/фронтэнда/и создавать папки кожи своего пакета и файлов следующим образом.

кожа/интерфейс/MyPackage/MyTheme/CSS кожа/интерфейс/MyPackage/MyTheme/CSS/myStyle.css кожа/интерфейс/MyPackage/MyTheme/изображений кожа/интерфейс/MyPackage/MyTheme/JS кожа/интерфейс/MyPackage/MyTheme/JS/myScript.js

Шаг 2: Рассказывая Magento для загрузки CSS и JS файлов дочерней темы.

Поскольку мы создали наши файлы css и js как css/myStyle.css и js/myScript.js соответственно, нам нужно подключить эти файлы к нашей дочерней теме. Открыть приложение/дизайн/интерфейс/MyPackage/MyTheme/макет/local.xml и поместите следующий код XML, как это -

<?xml version="1.0"?> 
    <layout version="0.1.0"> 
     <default translate="label" module="page"> 
     <reference name="root"> 
     <reference name="head"> 

     <!-- Loading css/myStyle.css file --> 
     <action method="addItem"><type>skin_css</type><name>css/myStyle.css</name></action> 

     <!-- Loading myScript.js file --> 
     <action method="addItem"><type>skin_js</type><name>js/myScript.js</name></action> 

     </reference> 
     </reference> 
    </default> 
    </layout> 

Аналогично можно подключить несколько файлов к нашей теме, как шрифт-awsome.css и т.д.

Выше XML загрузит наш myStyle.css успешно, но вот проблема. Он перехватывает css на самом верху под заголовком заголовка перед всеми файлами css по умолчанию вместе с parent styles.css. Это не позволит нам переопределить настройку темы. Поэтому, чтобы переопределить дизайн темы родителя, нам нужно подключить его после css родителя. Для этого сначала удалим parent.css родителя, а затем добавим его в следующую последовательность. Таким образом, обновленный local.xml будет -

<?xml version="1.0"?> 
    <layout version="0.1.0"> 
    <default translate="label" module="page"> 
     <reference name="root"> 
     <reference name="head"> 

      <!-- Remove the rwd parent's styles.css file --> 
      <action method="removeItem"><type>skin_css</type><name>css/styles.css</name></action> 

      <!-- Add it again before your css/myStyle.css file --> 
      <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action> 

      <!-- Loading css/myStyle.css file just after parent's styles.css --> 
      <action method="addItem"><type>skin_css</type><name>css/myStyle.css</name></action> 

      <!-- Loading myScript.js file --> 
      <action method="addItem"><type>skin_js</type><name>js/myScript.js</name></action> 

     </reference> 
     </reference> 
    </default> 
    </layout> 

Шаг 3: Сохранение конфигурации ребенка ТЕМЫ это находится в панели администратора.

Теперь войти в админ-панели и Гото системы Magento> Конфигурация> Genral> Разработка и обновление, как показано ниже

пакет Опция - Текущий Название пакета - MyPackage Theme вариант - кожи (Images/CSS) - MyTheme По умолчанию - MyTheme

После завершения сохранения конфигурации очистите кеш и перезагрузите домашнюю страницу. Если Everthing сделано тщательно, вы увидите загруженную myStyle.css и myScript.js в исходном коде с URL вновь созданного Magento темы дочернего пакета, как -

http://example.com/skin/frontend/MyPackage/MyTheme/css/myStyle.css 
http://example.com/skin/frontend/MyPackage/MyTheme/css/myScript.js 

Все. Мы успешно создали пользовательскую тему Magento для детей. Теперь вы можете безопасно настроить дизайн вашей темы в вашем myStyle.css FiLea и все пользовательские JavaScripts будет myScript.js

Примечание: Не копировать всю родительскую тему создать детскую тему. Скопируйте только те файлы из темы YourParentTheme/Default или base/default , которые вам нужно отредактировать.