cancel
Showing results for 
Search instead for 
Did you mean: 

Adding a Style Sheet

Highlighted

Adding a Style Sheet

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;
}


 

17 REPLIES 17
Highlighted

Re: Adding a Style Sheet

Hi @foysal,

 

Try to deploy your css changes using below command.

rm -rf pub/static/frontend

chmod 777 -R pub/static/* var/*

php bin/magento s:s:d -f 

php bin/magento c:f

 

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

Highlighted

Re: Adding a Style Sheet

Thanks @Nishu Jindal . Your solution is not working. Thanks.

Highlighted

Re: Adding a Style Sheet

Hi @foysal ,

 

Can you please try some points:

1. Please mentioned the path of your css (fixed_css.css)

2. Try adding some new property as well in your css which is showing on the front end after ctrl + U.

 

Thanks!

 

Highlighted

Re: Adding a Style Sheet

Thanks @Nishu Jindal .

 

I placed my CSS file fixed_css.css  in app/design/frontend/Codazon/fastest/grocery_gourmet/web/css/fixed_css.css.

I am browsing the file pub/static/frontend/Codazon/fastest_grocery_gourmet/en_US/css/fixed_css.css

Now code of fixed_css.css is like below

body {
    background-color: red;
}

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


But output is as like before. Thanks.

 

Highlighted

Re: Adding a Style Sheet

Hi @foysal ,

 

Thanks for the information sharing.

One last trick which we can try is removing the comments from the css file and then deploying the changes in pub/static file.

If possible, please try that.

 

Problem solved! Click Kudos & Accept as Solution!

Highlighted

Re: Adding a Style Sheet

Thanks @Nishu Jindal .
I flushed all caches here.

 



I tried several ways but nothing is working.

Highlighted

Re: Adding a Style Sheet

Hi @foysal ,

 

If possible, can you please share the design folder subdirectory view with me. Especially for the 

fixed_css.css file.

 

It seems like your CSS file location is not correct. Please share the File directory structure with me.

 

Thanks!

Highlighted

Re: Adding a Style Sheet

Thanks @Nishu Jindal . What does it mean by design folder subdirectory view ?

Are you meaning below directory ? Thanks


Highlighted

Re: Adding a Style Sheet

Hi @foysal ,

 

Please refer below screenshot for the Design Folder subdirectory view.

https://ibb.co/vDYzRtG

 

Thanks!