CODEWITHSUNDEEP
cssmagentomagento2magento-2.0
atifaltaf
atifaltaf

Reputation: 178

My css is not working in magento 2

I had installed Magento 2.0.2 and also override the templates I am stuck on a point that where do i write my css for my own styling. How do i change the css of existing template.

i have done these steps

create _theme.less

app/design/frontend/vendor/theme/web/source/_theme.less

and deploy the content by using

php bin/magento setup:static-content:deploy

also change the Front-end development workflow into client side less compilation and i found the styles.css file included at backend which source was

pub/media/styles.css

if i make changes in styles.css then it will apply on frontend and backend both.

now i want to write my own css to apply my own created theme how can i do that?

thanks alot!

Upvotes: 1

Views: 4089

Answers (3)

Phillip Huynh
Phillip Huynh

Reputation: 11

Make sure your tree looks like this:

-app
--design
---frontend
----VendorName
-----VendorTheme
------Magento-Theme
-------layout
--------default.xml
--------default_head_blocks.xml
------media
-------preview.png
------web
-------css
--------yourcss.css
------registration.php
------theme.xml

Upvotes: 1

Qaisar Satti
Qaisar Satti

Reputation: 2762

app/design/frontend/vendor/theme/Magento_Theme/layout/default_head_blocks.xml

add your custom theme and try to make changes there.

<head>
<css src="css/style.css" />
</head>

Upvotes: 3

Makwana Ketan
Makwana Ketan

Reputation: 1388

Try this steps.

  1. Create css file under this directory. app/design/frontend/Vendor/theme/web/css/customcss.css
  2. Create default_head_blocks.xml file if not exist at this path app/design/frontend/Vendor/theme/Magento_Theme/layout/default_head_blocks.xml

Put below code in default_head_blocks.xml

<?xml version="1.0"?>
<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, maximum-scale=1.0, user-scalable=no"/>
        <css src="css/customcss.css" />
    </head>
</page>

Hope this helps you!!

Upvotes: 3

Related Questions