Questions tagged [css]

Questions related to CSS in the context of Magento

Filter by
Sorted by
Tagged with
62
votes
15answers
41k 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 ...
51
votes
16answers
79k 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 ...
30
votes
14answers
67k 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:
30
votes
3answers
58k 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?
29
votes
2answers
25k 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 ...
28
votes
16answers
41k 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: "Refused to apply style from 'https://www.ornativa.com/pub/static/version1502029409/adminhtml/...
28
votes
7answers
18k 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/* ...
24
votes
10answers
24k 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 ...
16
votes
2answers
12k 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 ?
15
votes
2answers
11k 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 ...
15
votes
3answers
20k 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 ...
14
votes
5answers
33k 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/...
13
votes
4answers
6k 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 ...
12
votes
4answers
10k 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.
12
votes
1answer
5k 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 ...
11
votes
9answers
22k 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....
10
votes
2answers
36k 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 ...
10
votes
3answers
11k 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 ...
10
votes
6answers
2k 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/...
9
votes
4answers
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 ...
9
votes
2answers
13k 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>/<...
9
votes
2answers
4k 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/...
9
votes
3answers
14k 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> <...
9
votes
1answer
4k 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 ...
9
votes
2answers
1k 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
8
votes
3answers
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 ...
8
votes
1answer
986 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.
8
votes
4answers
9k 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 ...
8
votes
3answers
17k 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 ...
8
votes
1answer
417 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 ...
7
votes
4answers
18k 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 ...
7
votes
1answer
825 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/...
7
votes
1answer
1k 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.
7
votes
1answer
652 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 ...
7
votes
3answers
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 ...
7
votes
2answers
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, ...
6
votes
3answers
11k 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?
6
votes
2answers
24k 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?
6
votes
3answers
10k 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 ...
6
votes
4answers
763 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 ...
6
votes
3answers
4k 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 ...
6
votes
1answer
3k 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::...
6
votes
2answers
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 ...
6
votes
1answer
8k 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 ...
6
votes
3answers
1k views

How to include module's CSS in CMS pages with module block

I have prepared one module in which I have prepared two .phtml files and included css and js through module layout file. Now, I want to include those .phtml file in different blocks and pages. I have ...
6
votes
2answers
14k views

Https - layout broken

When I open the site using https://mydomain.com all layout (front/backend) is "broken" and appears inconsistent: The headers contains all js/css but they are loaded with http:// protocol and the css ...
6
votes
4answers
7k views

How to change all the blue colors of RWD theme to another color?

How to change all the blue color of RWD theme to another color?Actually this question may be duplicate but please help me none of the methods worked for me in Google or in MSE.
5
votes
3answers
3k views

How to change color of cart icon in minicart?

I am trying to change color of cart icon in header/minicart , as currently it's in grey shade I tried changing via adding following css in my custom.css at \web\css\custom.css .minicart-wrapper ....
5
votes
2answers
4k views

Magento2: After delete pub/static folder and making deploy, no css files found

I use Magento 2 custom theme and when I made changes to .less file, I wanted to compile files, so I deleted pub/static folder and made deploy: php bin/magento setup:static-content:deploy. After that, ...
5
votes
4answers
3k views

Owl Carousel Magento 2 not Fully Responsive

I would like to use Owl Carousel in a new Magento 2 install, but I am having issues when resizing the browser window. I have a clean and working install of Magento 2. I have created a very simple ...