Adding a Style Sheet

Question 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.

Question 2

Run rm -rf pub/static/* then run content deploy command

Question 3

Thanks @Pawan, I did all these, result is as like before.

Question 4

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

Question 5

Thanks @Adarsh Shukla. How to know which vendor_module I have ? Thanks.

Question 6

Where your head default file is located?

Question 7

Thanks. Here is the location public_html/app/design/frontend/Codazon/fastest/grocery_gourmet/Magento_Theme/layout/default_head_blocks.xml

Question 8

Try Magento_Theme and reed from above link for more info

Question 9

Thanks @Adarsh Shukla. I am getting this error. i.sstatic.net/olUXa.png

Question 10

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

Question 11

Thanks @Chikku. How to know Module name ?

Question 12

can you share your code of module.xml file

Question 13

<magento root>app/code/yourvendorname/yourmodulename/etc/module.xml

Question 14

follow this link on how to create a basic custom module in magento 2

Question 15

mageplaza.com/magento-2-module-development

Adarsh Shukla Adarsh Shukla 5831 gold badge7 silver badges26 bronze badges · Answer 1 · 2020-07-08 03:28:29Z

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

Share

Improve this answer

answered Jul 8, 2020 at 3:28

Adarsh Shukla's user avatar

Adarsh Shukla Adarsh Shukla

5831 gold badge7 silver badges26 bronze badges

5

Thanks @Adarsh Shukla. How to know which vendor_module I have ? Thanks.

abu abu
– abu abu

2020年07月08日 03:32:11 +00:00
Commented Jul 8, 2020 at 3:32
1

Where your head default file is located?

Adarsh Shukla
– Adarsh Shukla

2020年07月08日 03:34:26 +00:00
Commented 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
– abu abu

2020年07月08日 03:35:48 +00:00
Commented Jul 8, 2020 at 3:35
1

Try Magento_Theme and reed from above link for more info

Adarsh Shukla
– Adarsh Shukla

2020年07月08日 03:39:00 +00:00
Commented Jul 8, 2020 at 3:39
Thanks @Adarsh Shukla. I am getting this error. i.sstatic.net/olUXa.png

abu abu
– abu abu

2020年07月08日 03:48:34 +00:00
Commented Jul 8, 2020 at 3:48

Add a comment |

Pramod Pramod 1,4841 gold badge15 silver badges42 bronze badges · Answer 2 · 2020-07-08 03:53:00Z

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

<magento root>app/code/yourvendorname/yourmodulename/etc/module.xml
follow this link on how to create a basic custom module in magento 2

Stack Exchange Network

Adding a Style Sheet

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Adding a Style Sheet

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions