Adding a Style Sheet

foysal · ‎07-07-2020

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

Nishu Jindal · ‎07-07-2020

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!

foysal · ‎07-07-2020

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

Nishu Jindal · ‎07-07-2020

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!

foysal · ‎07-07-2020

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.

Nishu Jindal · ‎07-07-2020

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!

foysal · ‎07-07-2020

Thanks @Nishu Jindal .
I flushed all caches here.

I tried several ways but nothing is working.

Nishu Jindal · ‎07-08-2020

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!

foysal · ‎07-08-2020

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

Are you meaning below directory ? Thanks

Nishu Jindal · ‎07-08-2020

Hi @foysal ,

Please refer below screenshot for the Design Folder subdirectory view.

https://ibb.co/vDYzRtG

Thanks!

Adding a Style Sheet

Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet

Re: Adding a Style Sheet