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.

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

2 Answers 2

Reset to default
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
5
  • Thanks @Adarsh Shukla. How to know which vendor_module I have ? Thanks.
    – abu abu
    Jul 8, 2020 at 3:32
  • 1
    Where your head default file is located?
    – Adarsh Shukla
    Jul 8, 2020 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, 2020 at 3:35
  • 1
    Try Magento_Theme and reed from above link for more info
    – Adarsh Shukla
    Jul 8, 2020 at 3:39
  • Thanks @Adarsh Shukla. I am getting this error. i.stack.imgur.com/olUXa.png
    – abu abu
    Jul 8, 2020 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
7
  • Thanks @Chikku. How to know Module name ?
    – abu abu
    Jul 8, 2020 at 3:58
  • 1
    can you share your code of module.xml file
    – Pramod
    Jul 8, 2020 at 3:59
  • 1
    <magento root>app/code/yourvendorname/yourmodulename/etc/module.xml
    – Pramod
    Jul 8, 2020 at 4:02
  • 1
    follow this link on how to create a basic custom module in magento 2
    – Pramod
    Jul 8, 2020 at 4:02
  • 1
    mageplaza.com/magento-2-module-development
    – Pramod
    Jul 8, 2020 at 4:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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