Start Free Trial

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:

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

Open in new window

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?

ASKER

https://web.ubwebsite.com/brock2020/manufacture/ridgid/pipe-and-tubing-tools.html

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

ASKER

Correct, that is exactly the issue. The file is not being loading by Magento.
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...

ASKER

Just changing some colors to see if it works. Here is CSS:

.CatagoryPageHolder2Row {
  background-color: blue;
}

.table-wrapper {
  background-color: black;
}

Open in new window

looks like you are using SwissUp/argento-stripes/en_US theme
can you copy that file to this theme and try

can you please add a new unique css like

.HainKurt {
  border:1px solid red;
}

Open in new window

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. :)

no, it is no where...
probably you are editing wrong file
or you are putting the css to wrong folder...

User generated image

are you using this theme?
is the css file copied to correct theme?

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.

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

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.

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

ASKER

"currently you are using a theme and updating something else and it is not used/rendered on client... "???
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?

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" />

Open in new window

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" />

Open in new window

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.

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

User generated image

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.

This question needs an answer!

Become an EE member today

7 DAY FREE TRIAL

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