Questions tagged [css]

Questions related to CSS in the context of Magento

Filter by
Sorted by
Tagged with
65 votes
15 answers
46k views

How to force flush CSS cache on client side?

Suppose that we changed a lot of functionality for the module (templates, layouts, CSS) and we are going to move these changes to the production site, but a lot of customers have cached CSS in their ...
Nick's user avatar
  • 1,020
57 votes
18 answers
122k views

Magento2: Re generate css file in pub/static folder

I have installed Magento 2 and set developer mode, then I have installed one module that contains css and js files. The module works fine and css and js files are rendering from pub/static folder. Now ...
chirag dodia's user avatar
  • 2,122
39 votes
24 answers
114k views

Refused to apply style "because its MIME type ('text/html') is not a supported stylesheet MIME type"

Suddenly CSS is not loading on my Magento 2 admin panel. The frontend is working fine. Error details: 1. "Refused to apply style from 'https://www.ornativa.com/pub/static/version1502029409/...
Nabarun006's user avatar
36 votes
4 answers
88k views

How to add a custom CSS file in Magento 2

Is there a way to create my own CSS file that loads last in the cascade? If so, how and where do I add my custom CSS file?
H. Ferrence's user avatar
  • 1,041
33 votes
15 answers
98k views

magento 2 admin url not working and loaded frontend is all messy

Admin url is showing 404 error after installing magento 2 on wamp server and frontend design is all messy and css is not linked to it.Error visuals are shown below. Frontend error:
Arun Pal's user avatar
  • 523
31 votes
2 answers
28k views

Magento CSS and JavaScript not loading due to using file system path

I was unable to install a module using Magento Connect, getting a Connection Error try again later error. Following the instructions of the module developer I attempted to fix permissions in the ...
Navarr's user avatar
  • 1,712
29 votes
7 answers
28k views

Clear Theme/CSS Cache in Magento 2

When I am theming a Magento 2 store, what is the suggested way to clean the caches? I edit the .less files and then I currently do rm -rf pub/static/frontend/* var/view_preprocessed/ var/*cache/* ...
Alex's user avatar
  • 13.8k
24 votes
4 answers
29k views

Magento 2 : How to add custom css for adminhtml?

I need to add CSS file for Admin side in my custom module. How can I add this for Admin (back-end) only ?
Ashish Jagnani's user avatar
24 votes
12 answers
32k views

Merged JS and CSS do not work when Production mode

I was in developer mode, everything was great, when I changed to Production mode, the Merged options of CSS and JS seem to be ignored, it was back listing all css and js. Also the product page only ...
user37025's user avatar
  • 1,383
16 votes
4 answers
25k views

Less files in custom modules

How do you use less inside custom module having created code/Vendor/module/view/frontend/web/css/source/custom.less how do I include and compile?
fefe's user avatar
  • 927
16 votes
5 answers
41k views

Magento2: Best practice to modify css files

I want to modify css file pub/static/frontend/Magento/luma/en_US/css/styles-l.css. Initially this file is not present in pub/static folder and it's present in vendor/magento/theme-frontend-blank/web/...
amitshree's user avatar
  • 7,006
16 votes
5 answers
10k views

What is the proper way of positioning/ordering CSS files in Magento 2?

In the Magento 2 DevDoc it says To include a CSS file, add the <css src="<path>/<file>" media="print|<option>"/> block in <head> section in a layout file. However it ...
Jey DWork's user avatar
  • 1,101
15 votes
3 answers
22k views

Magento 2: style-m.css vs style-l.css

How style-m.css and style-l.css files are generated in Magento2? In theory style-m.css should have less code and to have styles only for mobile devices than style-l.css in order to load on mobile ...
Aleksey Razbakov's user avatar
15 votes
2 answers
12k views

When merging CSS or JS, a new file is generated for each page type

We have a lot of small CSS and JS files and enabling merging seems to be a good choice. Many of the CSS and JS files are used on every page (home page, category page, product detail page). Whenever ...
Alex's user avatar
  • 13.8k
15 votes
3 answers
21k views

Magento adding CSS and JS includes to the footer

I'm doing some Yslow optimization of my Magento site and am trying to add the CSS and Js to the footer of the site. At the moment I'm using a head reference tag in the layout XML and using addJs and ...
Chris Morris's user avatar
  • 1,517
14 votes
4 answers
26k views

How to add Bootstrap 4 in a Magento 2 theme?

I've to add Bootstrap 4 in my custom theme. I add Bootstrap 3 by using the reference: How to use bootstrap in my custom theme But, bootstrap 4 is not working.
Magecode's user avatar
  • 1,504
13 votes
3 answers
10k views

Magento 2 custom theme layout xml and css not working

I created a new theme and it was working fine but after a few days, I realized some things weren't working. default_head_blocks.xml is no longer pulling in any css files that I include (both hosted ...
Amy Ling's user avatar
  • 390
11 votes
9 answers
34k views

Magento 2: Not loading CSS and JS after successful installation in windows

CSS and JS not loading after installation of Magento 2 default template OS: Windows 10 Xampp Control panel V3.2.2 PHP version: 5.6.28 Server: Apache/2.4.23 (Win32) phpmyadmin Version information: 4....
Amrith Prakash's user avatar
11 votes
2 answers
41k views

Magento 1.9 : Add custom css file to head

I need to add a custom CSS file to Magento that then is used site-wide. I know you have to add this to a local.xml file, however, the stylesheet I add is just not loaded. Anyone that can help? Here ...
dsolivier's user avatar
  • 113
10 votes
3 answers
16k views

Overriding Blank Theme Styles in Magento 2

How would you go about overriding the navigation styles for a custom theme when inheriting from the blank theme in Magento 2? I have a theme.css file in my app/design/frontend/<Vendor>/<...
Gareth Daine's user avatar
10 votes
6 answers
3k views

Magento 2 - Overriding CSS without using !important everywhere

I'm working on a Magento 2 site at the moment for a client. Suppose my client's brand is boofar and the theme I'm trying to extend/override is foobar I've set as the parent theme using frontend/...
Francis Kim's user avatar
  • 2,973
10 votes
5 answers
14k views

Magento2 CSS was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff)

I am using Magento 2 in Windows 10 using xampp. I have installed magento2 and it was running perfectly. After that, I migrate data from magento1 with migration tool. Now I am having an error with ...
Bhavesh Dave's user avatar
10 votes
1 answer
6k views

How to add Block Specific JS (and CSS) - The _right_ way?

So I've spent literally hours on hours googling, reading, studying ect, but no one (not even Alan Storm!) has spelt this out to me. It seems the entire internet is interested in adding JS or CSS to a ...
cygnus digital's user avatar
9 votes
2 answers
7k views

Magento 2 - How can I add custom template file into <head>?

In magento 1.x, I can add the css files into the head using helper like below code. <reference name="head"> <action method="addCss"><stylesheet helper="module/helperclass/...
skynetch's user avatar
  • 1,662
9 votes
4 answers
53k views

Adding CSS and JS to <head> using a module layout.xml for block

Synopsis I would like to add a block to my grouped product view and my simple product view. This block will have some nice tooltips for hover states, i'm using a small library with one jquery plugin ...
Ash's user avatar
  • 1,746
9 votes
3 answers
2k views

Problem with Data URIs and CSS File Merge

Magento CSS file merge is pretending the hostname to my data-uris because the RegEx in Mage_Core_Model_Design_Package (beforeMergeCss) does not work as expected. It should prepend hostname to relative ...
michael's user avatar
  • 153
9 votes
2 answers
5k views

Magento 2 - How to reset XML block arguments such as CSS

I'm wondering how to unset CSS that has been set through the XML, for example: <block class="Magento\Framework\View\Element\Template" name="navigation.sections" before="-" template="Magento_Theme::...
Ben Crook's user avatar
  • 15.7k
9 votes
3 answers
16k views

Magento 1.9.1.0 - Upload PDF File Type in Wysiwyg Editor and show PDF Icon

I made a custom module allowing user to upload .PDF file type in CMS > Pages. The code used is below: app/etc/modules <?xml version="1.0"?> <config> <modules> <...
Slimshadddyyy's user avatar
9 votes
2 answers
2k views

how to increase the width of date field in admin grid

How to increase the width of date field in admin grid while searching the value is cut-off. Please See the image below
surya's user avatar
  • 605
8 votes
4 answers
28k views

Static content deploy issue

I am creating a custom theme. Now I added a css file, only for checkout page. css file call by default_head_block.xml at app/design/frontent/Amit/Customtheme/Magento_Checkout/layout/ <?xml ...
Amit Bera's user avatar
  • 77.5k
8 votes
1 answer
1k views

Magento2 CSS IE hacks

In Magento2, want to add css, specifically for IE 8, using <css src="css/ie-8.css" /> Not able to find anywhere in native source code.
huzefam's user avatar
  • 2,586
8 votes
1 answer
2k views

How to add wrapper in checkout page in magento 2?

I want to add container div and add Shipping address and Order summary in it as below design. How can i do that? Thanks.
Dipesh Rangani's user avatar
8 votes
3 answers
19k views

How to style transactional email with email-inline.css

I am using Magento 1.9.1. I want to customize my Magento Transactional Emails. To do so, I duplicated email-inline.css and email-non-inline.css from base package into my customized package (into this ...
ecmedia's user avatar
  • 81
8 votes
1 answer
583 views

How to add 3rd level category to scrolling dropdown list

I have long drop down list of subcategory which also includes third level subcategory. i have added using css tricks reference: https://css-tricks.com/long-dropdowns-solution/ now im unable to display ...
rashmi sm's user avatar
  • 887
7 votes
2 answers
21k views

Magento 2: Override/extend the email.css that is being used in the transactional email header

When adding a new email header template i see the following bit of code: <style type="text/css"> {{var template_styles|raw}} {{css file="css/email.css"}} </style> ...
Prometheus's user avatar
7 votes
2 answers
9k views

Magento 2: Email Templates Template Style is not Working

In Template Content i have put <p class="test">Hi</p> Template Styles i have put .test { font-size: 40px;} Then i have clicked on Preview Template, but it's not applying. I like to ...
Jackson's user avatar
  • 9,909
7 votes
1 answer
2k views

Magento 2 - Change positions of the navigation submenu

I made some modifications on the top navigation menu in Blank theme. I need to change the position of the submenu. I try to find some JavaScript but no luck, then I see this in the Magento_Theme/...
Robert's user avatar
  • 2,166
7 votes
3 answers
9k views

add preload for fonts in magento 2

I want to add below in the head of Magento 2 via default.xml, unable to get the exact syntax for same <link rel="preload" href="https://example.com/static/version1580127835/frontend/theme/...
user1799722's user avatar
7 votes
11 answers
42k views

CSS is not loading on the frontend in Magento

We are facing an issue with the css styling in Magento store. I tried refreshing the cache in admin but that didn´tt fix the issue. Use Varnish as external cache NGINX Magento 1.7.0.2 Ultimo as ...
Sai Kumar J's user avatar
7 votes
1 answer
1k views

Magento 2: Force CSS reload with query string

When I want to force reload CSS and JS on my sites (non-Magento 2), I usually just add a query string to the end of the URLs. For example: css/styles.css?v=1 I tried this in M2 by adding adding the ...
MikeMason's user avatar
  • 1,357
7 votes
3 answers
3k views

how to display image in dropdown menu in magento without using any plugins [closed]

In Magento i have added categories and subcategories,these will be displayed in home page of my website. Now, I want to display subcategories along with respective image. But I do not want to use any ...
rashmi sm's user avatar
  • 887
7 votes
2 answers
3k views

theme email-inline.css not being used

I am using Magento 1.9.1. I want to modify email-inline.css with some custom styles for a particular transactional email. I have created email-inline.css in my theme, but when I preview the email, ...
Catherine's user avatar
6 votes
10 answers
34k views

Magento 2 shows 404 error and front end css crashed

I have installed Magento 2 successfully. When i am trying to open front end that looks like this picture and backend shows 404 error. how to solve this?
Saravanan DS's user avatar
  • 1,126
6 votes
2 answers
27k views

How do I disable merged CSS and JS

I merged CSS and/or JavaScript and my website is all messed up. How do I disable the CSS/JS merge functions? It's so messed up I can't access the Admin panel, how do I do it in the database?
Fiasco Labs's user avatar
  • 7,593
6 votes
3 answers
11k views

Is there a way to load an external CSS file in local.xml?

I found out on Google CDN jQuery with Local Fallback in Magento Layout XML from @philwinkle answer that an external js can be loaded to the "head" via local.xml. Is there also a way to load an ...
J -at- Paper Traitors's user avatar
6 votes
3 answers
5k views

Why clear pub/static/frontend after css changes in dev mode?

I am working with Magento2 and have a question. I am working in the development mode. But when I do some CSS changes in my theme, why I have to manually clear the pub/static/frontend folder every ...
user3310748's user avatar
6 votes
4 answers
839 views

Why the input element id's for one-page-checkout are in "type:elementname" format?

Why magento One-Page-Checkout page has the input fields with Id's that cannot be referred to any CSS attributes or by a javascript / jquery? Does this holds any security measures ? or it can be ...
Dev's user avatar
  • 1,144
6 votes
2 answers
6k views

Magento 2 - overwrite module Less / css with theme

I currently have a module installed inside of the following directory: httpdocs/vendor/module/module-name I've installed the module with composer and it works. However I've noticed the module is ...
andy jones's user avatar
  • 1,383
6 votes
2 answers
3k views

Where to place Magento 2 Theme customizations?

I installed Magento 2 via Composer and it does not have a directory for theme in frontend. I tried to create a new theme in app/design, every time I create registration.php I get an error. Question ...
roger's user avatar
  • 551
6 votes
1 answer
9k views

calling css using layout xml

I have made a custom module and within that module I want to add my own css file. So far I have made all the required phtml files and the necessary layout.xml file. Testing the module I can see that ...
tony09uk's user avatar
  • 1,707

1
2 3 4 5
27