David Barman
asked on
Magento 2 - add CSS
Have a Magento 2 site, with a pre-built theme. I am trying to add a custom CSS file.
I believe that the recommended method is to add a custom CSS file in the app/design/frontend file structure versus add the css file directly to the theme which resides in under the vendor folder.
I created the app/design/frontend/vendor/theme/web/css/local.css file
I also created the app/design/frontend/vendor/theme/Magento_Theme/layout/default_head_blocks.xml file.
In the XML file I have the following:
However, the CSS file never loads on the site.
Any thoughts on what might be wrong here?
I believe that the recommended method is to add a custom CSS file in the app/design/frontend file structure versus add the css file directly to the theme which resides in under the vendor folder.
I created the app/design/frontend/vendor/theme/web/css/local.css file
I also created the app/design/frontend/vendor/theme/Magento_Theme/layout/default_head_blocks.xml file.
In the XML file I have the following:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/local.css" rel="stylesheet" type="text/css" />
</head>
</page>
I also cleared and flushed the Magento cache. However, the CSS file never loads on the site.
Any thoughts on what might be wrong here?
do you have a link to test?
ASKER
HainKurt: what do you mean by a link to test?
is it live? can we look at it?
However, the CSS file never loads on the site.
did you check the HTML file on browser?
can you see the css file is here?
is path correct?
use FIDDLER to check the trafic and missing files
ASKER
The CSS file is not listed under sources in the Chrome inspector.
ASKER
I'm not familiar with FIDDLER
I dont see any local.css is loaded in HTML
what do you have in the css file?
maybe it is renamed, or merged into some file...
what do you have in the css file?
maybe it is renamed, or merged into some file...
ASKER
Correct, that is exactly the issue. The file is not being loading by Magento.
Thus the reason for the post. :)
Thus the reason for the post. :)
ASKER
Are you familiar with Magento?
can you copy paste your css file content or at least a part of it...
maybe it is somehow merged into another file...
maybe it is somehow merged into another file...
ASKER
Just changing some colors to see if it works. Here is CSS:
.CatagoryPageHolder2Row {
background-color: blue;
}
.table-wrapper {
background-color: black;
}
looks like you are using SwissUp/argento-stripes/en_US theme
can you copy that file to this theme and try
can you copy that file to this theme and try
can you please add a new unique css like
CatagoryPageHolder2Row is not helping since it is everywhere...
.HainKurt {
border:1px solid red;
}
i want to check for that class...CatagoryPageHolder2Row is not helping since it is everywhere...
ASKER
Yes, I have done that. It works inside the theme. But I don't want to modify the theme directly in case I have a need to update the theme in the future. Therefore, I was adding the custom CSS under the app/design/frontend/ folder structure.
ASKER
I added .HainKurt class as requested. :)
ASKER
Yes, the CSS is not loaded in the browser.
I have created the files/folders as I described in the question. I was under the impression that it was correct. But I am missing something. That was why I was hoping for some insight to see if someone could help direct me to what I did wrong.
I have created the files/folders as I described in the question. I was under the impression that it was correct. But I am missing something. That was why I was hoping for some insight to see if someone could help direct me to what I did wrong.
as I said, probably you added/modified wrong files in a different theme...
make sure you are working under the correct theme...
what I see is, you are using SwissUp/argento-stripes/en_US theme
make sure you are working under the correct theme...
what I see is, you are using SwissUp/argento-stripes/en_US theme
ASKER
When I successfully edited the theme directly, I was able to add a new CSS file to the: /vendor/swissup/theme-frontend-argento-stripes/web/css folder and the default_head_blocks.xml file in the /vendor/swissup/theme-frontend-argento-stripes/Magento_Theme/layout folder.
That worked. But I don't want to edit the theme directly. So I am replicating the folder/file structure under the app/design/frontend folders. Which seems to be what is required based on what I have found online. However, I must be missing something to this puzzle.
That worked. But I don't want to edit the theme directly. So I am replicating the folder/file structure under the app/design/frontend folders. Which seems to be what is required based on what I have found online. However, I must be missing something to this puzzle.
Not sure...
here document says what to do
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-themes.html
currently you are using a theme and updating something else and it is not used/rendered on client...
here document says what to do
https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-topics/css-themes.html
currently you are using a theme and updating something else and it is not used/rendered on client...
ASKER
"currently you are using a theme and updating something else and it is not used/rendered on client... "???
What is the something else?
What is the something else?
ASKER
This is an article that is similar to what I am trying to do: https://magento.stackexchange.com/questions/102994/overriding-blank-theme-styles-in-magento-2
if I understand correctly, you are trying to add a custom css to your magento without touching any theme
this way, you can switch theme any time and your custom css should be available...
correct?
this way, you can switch theme any time and your custom css should be available...
correct?
ASKER
Not exactly. The css will be tied to the theme name. By overriding it, if the theme content/design is updated by the theme designer, I can update the theme without worrying about my custom css being wiped out.
can you search the file that contains
<css src="css/styles.css" />
<css src="css/print.css" media="print" />
and add your custom css here (which includes HainKurt class<css src="css/styles.css" />
<css src="css/print.css" media="print" />
<css src="css/local.css" media="print" />
ASKER
None of the files in the theme have that content. Thus it must be default Magento files that are producing those files.
Modifying Magento files is definitely not the way to proceed.
Modifying Magento files is definitely not the way to proceed.
still could not understand what you are trying to achieve...
1. do not touch magento files and customize the theme
2. do not touch theme but make changes to magento and customizations will be available for all themes
the easiest thing to do is do not change anything, but copy your css content into
https://web.ubwebsite.com/brock2020/pub/static/frontend/Swissup/argento-stripes/en_US/css/styles-l.css
just edit this and copy/paste all you need...
1. do not touch magento files and customize the theme
2. do not touch theme but make changes to magento and customizations will be available for all themes
the easiest thing to do is do not change anything, but copy your css content into
https://web.ubwebsite.com/brock2020/pub/static/frontend/Swissup/argento-stripes/en_US/css/styles-l.css
just edit this and copy/paste all you need...
ASKER
The static folder structure is not where development files are located. Magento compiles content and creates the static folder structure.
What I am trying to achieve is to override the theme CSS by creating CSS files in the /app folder structure. But as of now, the Magento system is not recognizing that they are there. Therefore, I must be creating the folders structure incorrectly or some type of configuration issue. That is what I am having an issue figuring out.
What I am trying to achieve is to override the theme CSS by creating CSS files in the /app folder structure. But as of now, the Magento system is not recognizing that they are there. Therefore, I must be creating the folders structure incorrectly or some type of configuration issue. That is what I am having an issue figuring out.
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.