Magento 2.2.6 – How to Add Custom CSS File

cssmagento2.2.6styles

I tried to add some custom styles in Magento but I couldn't find out how to do this.

How do I add the custom css stylesheets in magento-2.2.6?

Best Answer

You need to follow the below steps:

Step 1: Create default_head_blocks.xml like below:

app/design/frontend/[vendor]/[theme]/Magento_Theme/layout/default_head_blocks.xml

Step 2: Andd create local.css like below

app/design/frontend/[vendor]/[theme]/web/css/local.css

Step 3: Add the below code to default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="css/local.css" />
  </head>
</page>

Related Solutions

Magento 1.8 CSS File Merge – Fix Data URIs Problem

In iphone.css magento also uses data URI but without quotes, try to do the same

background: #fafafa url(data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==) no-repeat;

In your case instead of

/url\\(\\s*(?!data:)([^\\)\\s]+)\\s*\\)?/

you should use

/url\\(\\s*(?![\"\']?data:)([^)]+)\\)/

Magento 1.9 – Add Custom CSS File to Head

There are two way to add css to head one is using function addCss and another is addItem. You have mix-up two format. Your format is wrong.

try this

<action method="addCss">
    <stylesheet>css/javcustom.css</stylesheet>
</action>

instead of

<action method="addCss">
    <type>skin_css</type>
    <file>css/javcustom.css</file>
</action>

or try this

<action method="addItem">
    <type>skin_css</type>
    <name>css/javcustom.css</name>
</action>

Best Answer

Related Solutions

Magento 1.8 CSS File Merge – Fix Data URIs Problem

Magento 1.9 – Add Custom CSS File to Head

Related Topic