1

I am trying to add a Style sheet in my Magento 2 store. My default_head_blocks.xml is like below

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"  src_type="url" rel="stylesheet" type="text/css"  />
        <css rel="stylesheet" type="text/css" src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" src_type="url" /> 
        <css src="css/fixed_css.css"/>
        <css src="css/custom.css"/>
    </head>
</page>


fixed_css.css code is like below

.search-hearder-main.row {
    justify-content: center !important;
}

/* Facebook */ .fa-facebook { background: #3B5998; color: white; }

/* Twitter */ .fa-twitter { background: #55ACEE; color: white; }

.fa { padding: 20px; font-size: 30px; width: 30px; text-align: center; text-decoration: none; border-radius: 50%; }


I ran php bin/magento setup:upgrade command.

But I am getting only below code when I am inspecting using ctrl + u .

.search-hearder-main.row {
justify-content: center !important;
}


 

I tried in several ways. I ran below commands.

php bin/magento setup:upgrade php bin/magento setup:static-content:deploy -f php bin/magento indexer:reindex php bin/magento setup:di:compile php bin/magento cache:clean php bin/magento cache:flush

I flushed all the caches here.

enter image description here

Now I placed below CSS in fixed_css.css file.

body {
    background-color: red;
}

But nothing is working.

  • 1
    Run rm -rf pub/static/* then run content deploy command – Pawan Jul 8 at 2:12
  • Thanks @Pawan, I did all these, result is as like before. – abu abu Jul 8 at 2:22
1

To add css or js use vendor_module::style.css Refer this link for more info http://this-adarsh.epizy.com/module-development-3/

Happy Magento

| improve this answer | |
  • Thanks @Adarsh Shukla. How to know which vendor_module I have ? Thanks. – abu abu Jul 8 at 3:32
  • 1
    Where your head default file is located? – Adarsh Shukla Jul 8 at 3:34
  • Thanks. Here is the location public_html/app/design/frontend/Codazon/fastest/grocery_gourmet/Magento_Theme/layout/default_head_blocks.xml – abu abu Jul 8 at 3:35
  • 1
    Try Magento_Theme and reed from above link for more info – Adarsh Shukla Jul 8 at 3:39
  • Thanks @Adarsh Shukla. I am getting this error. i.stack.imgur.com/olUXa.png – abu abu Jul 8 at 3:48
1

create default.xml in app/code/yourvendor/yourmodulename/view/frontend/layout

add this below lines of code in it:-

<?xml version="1.0"?>
<page
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   layout="admin-1column"
   xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd"
>
   <head>
       <css src="Yourvendorname_Yourmodulename::yourstylesheet.css"/>
   </head>
   <body/>
</page>

now put your css at below location

app/code/Yourvendorname/Yourmodulename/view/frontend/web/css

Now go to root and room content from Pub/static/frontend now run the magento commands of setup:upgrade and deploy flush cache

now check your changes on frontend hope this helps

| improve this answer | |
  • Thanks @Chikku. How to know Module name ? – abu abu Jul 8 at 3:58
  • 1
    can you share your code of module.xml file – Pramod Jul 8 at 3:59
  • 1
    <magento root>app/code/yourvendorname/yourmodulename/etc/module.xml – Pramod Jul 8 at 4:02
  • 1
    follow this link on how to create a basic custom module in magento 2 – Pramod Jul 8 at 4:02
  • 1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.