Questions tagged [css]

Questions related to CSS in the context of Magento

25
votes
3answers
51k 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?
4
votes
3answers
2k 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 ....
29
votes
14answers
61k 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:
46
votes
15answers
70k 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 ...
27
votes
6answers
17k 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/* ...
8
votes
2answers
34k 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 ...
2
votes
2answers
2k views

Load Custom CSS After style-l.css For Home Page

I am using below code to include my custom CSS file in home page only: File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml <?xml version="1.0"?> <page xmlns:...
29
votes
2answers
23k 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 ...
14
votes
5answers
30k 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/...
12
votes
4answers
5k 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 ...
2
votes
9answers
12k 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?
24
votes
10answers
22k 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 ...
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>/<...
11
votes
9answers
18k 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....
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 ...
5
votes
8answers
32k 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 ...
3
votes
1answer
2k views

Changing the address book drop down (for shipping) from drop down list to radio buttons

I need to know how to change the address book drop down on a registered account checkout to radio buttons (similar to Amazon)
23
votes
13answers
30k 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/...
4
votes
4answers
15k views

Defer parsing of JavaScript in Magento

i analyzed my website on Gmetrix.com for for optimization and the result was this: 361.0KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page ...
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 ...
2
votes
1answer
2k views

Wrap sub menu items in div

I would like the wrap my second and third level categories in my main menu in a div tag so i can make a mega menu using the div to position the links. Is this possible. Heres an example of what i ...
8
votes
4answers
6k 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 ...
2
votes
2answers
2k views

Change the background color of the catalog product view page?

Which file should I edit in my custom theme to change the background color and any other CSS of the catalog product view page?
2
votes
1answer
7k views

how to use cookie-free domains in magento? [closed]

I analyzed my website on Gtmetrix.com for optimization and the result was this: There are 245 components that are not cookie-free: http://mysite.com/media/css/dabf35e7cd79eb387a68eed1d5f3f925.css ...
9
votes
2answers
4k 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 ...
14
votes
2answers
10k 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 ?
7
votes
3answers
15k 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 ...
3
votes
5answers
4k views

Magento2 does not showing images/css/js

I have installed Magento 2 but for some reason all the css/js/images are not loaded. Below are the steps I follow to install Magento 2 Create a sub-domain on cpanel Downloaded Magento and uploaded ...
2
votes
2answers
7k views

Accidentally deleted .htaccess file inside pub/static folder

I accidentally deleted my .htaccess file. Before that I could just delete everything in the var and pub/static folder (except the .htaccess file of course) and just reload the page to see my CSS / ...
1
vote
1answer
1k views

Broken Magento 2 Admin Design

Current version is Magento 2.1.3. Installed from dist. Many admin pages are looking broken like this. Although CSS seems to be loaded like following: I tried clearing/flushing cache, deleting pub/...
10
votes
6answers
1k 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/...
4
votes
1answer
5k views

How to use bootstrap in my custom theme [duplicate]

In my extended LUMA theme , how to integrate Bootstrap JS and CSS . So I can make my CMS page's layout on Bootstrap grid . Already seen few post here : How to develop theme using twitter bootstrap ...
3
votes
1answer
5k views

How to utilise the existing LESS variables in my new less file

As the title says, i want to use LESS variables that are already defined by Magento. for example, there is variable called @color-white defined in following file. ROOT/lib/web/css/source/lib/...
1
vote
2answers
3k views

Fixed Headers in Magento

I want to fix my header for my magento site. Please get me some solutions so that I will be helpful
4
votes
2answers
13k views

How to Customize Magento 2 header layout with luma theme

I use Magento 2 with luma theme and trying to change the header layout but I don't know the best way to do that. ie. I want the logo in div with some styles and the navigation in another div and so ...
4
votes
6answers
4k views

CSS broken for the fresh magento ver 1.9.2.0 install

I've downloaded magento ver 1.9.2.0 (latest one) from the official website magentocommerce.com/download and installed it using the standard steps. But, now the css is broken and I'm getting a plain ...
2
votes
3answers
5k views

AddJs / CSS in footer. getCssJsHtml() not working

I've been looking through a lot of posts on how to add CSS / JS file in the footer. As right now I have followed this path : page.xml <block type="page/html_head" name="foot" as="foot" template="...
0
votes
1answer
962 views

Override Less file

im work on a new magento 2 page. Now i want change a css class over my custom theme.less file. But how can i override the css class? I want override the padding from the .header.content class which ...
58
votes
15answers
40k 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 ...
3
votes
1answer
6k 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> ...
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 ...
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 ...
5
votes
2answers
10k views

Magento 2: How to work with minified JS and CSS files

I don't understand how minification is supposed to work for JS/CSS. My version is Magento 2.1.0 I found the setting in the configuration under Stores -> Configuration -> Advanced -> ...
5
votes
2answers
23k 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
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 ...
5
votes
3answers
9k 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?
5
votes
2answers
8k views

Magento 2 page-header background color

I want to change the background color to black on luma theme page-header. i am using luma as my default template - what is the best way to go about? - I am using github version fresh Magento 2 ...
4
votes
2answers
6k views

Add Owl Carousel to Homepage in Magento CE 1.9

I was able to locally create the carousel but now sure how to implement this into Magento. I have my CSS, Js and Images. Images are in Magento already but not sure where to put the CSS and Js files. ...
1
vote
3answers
6k views

Make merged js and css file asynchronous in magento

Hello actually is anyone know how to make the merged js and css file load asynchronous in magento i try add <param>defer</param> into <action method="addItem"><type>...
1
vote
2answers
1k views

Magento site is frequently getting CACHE issue and failing to serve CSS, site is getting broken page

Magento site is frequently getting CACHE issue and failing to serve CSS, site is getting broken page. Once after flush redis cache or restart of redis is bringing site into normal position. Below ...