Questions tagged [css]
Questions related to CSS in the context of Magento
1,260
questions
0
votes
1answer
13 views
How to make round border with gap in swatch in css?
I have to make orange border of swatches like below image
I made round swatches in magneto 2.4 and it look like below image
My css code
.swatch-option{border-radius:50%;min-width: 18px;width: 18px !...
0
votes
0answers
14 views
How to add inline css to the Transaction Emails
I need to update existing email header. There for I have to modify some styles.but doesn't define in specific style in app/design/frontend/{themename}/{namespace}/Magento_Email/email/header.html
app/...
0
votes
0answers
27 views
Magento 2 on Valet not loading CSS
So, as the title says, css is not loading on my local Magento page.
I have used Valet, and Magento has been working fine up until today. Today, I wanted to try something and executed valet secure {...
2
votes
2answers
33 views
Styles are not loading in Magento 2.4.2 on Mac OS
I have installed vanilla (with sample data) Magento Community edition 2.4.2 on Mac OS with following technology stack however styles are not loaded at all, not even in head block. However I can see ...
0
votes
0answers
14 views
Magento applying incorrect inline css style size to upsell block
Using Luma as parent I have set image size in my theme's view.xml file for "related_products_list" "small_image" to 80/80.
On the front end this displays correctly, and I notice ...
0
votes
2answers
42 views
Remove a style from style-m
this style is causing an issue with my mobile menu.
.navigation .submenu:not(:first-child).expanded {
display: block !Important;
}
I have tried to overwrite it but it still appears as a ...
0
votes
0answers
31 views
CSS color variable override not working
I have created a child theme using LUMA as parent. Although many of the variables I have updated in my /theme_name/web/css/source/_extend.less file seem to work correctly I have now noticed that I can'...
0
votes
2answers
24 views
Magento2 - Changing the position of header content
I want to make the Free Shipping content at the top center of the site but it is in right corner.
How to change the css for doing it?
Created a block on the admin panel and applied this code on ...
0
votes
1answer
29 views
Using different background images for desktop/mobile display on blocks - widgets
I created a block and a widget in magento 2.4 page top to display as a banner promotion, but i want a different display for desktops and different for mobile.
what i have tried:
<div style="...
0
votes
2answers
27 views
How to change the front look of the website as it is showing without css?
I made the custom theme with the parent theme luma and now applied it as well but site lost its css.
0
votes
1answer
25 views
Issues with .css changes back to original settings
I am nearing the end of my M2 dev site and ready to go live however I keep having one main issue. We have made some changes to some of the text on the home page, menu and my shop by brands page. We ...
0
votes
1answer
33 views
Magento 2 How to add custom CSS to HTML Template?
I have a custom html template where I have classes.
On layout I have added my css like this:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance&...
0
votes
1answer
22 views
Magento 2.4 - changing CSS
I want to change the menu bar and some other elements on the luma theme for Magento.
I have not found a way to do this yet, anyone knows how to do it?
Any tips and help is appreciated
-JP
0
votes
1answer
30 views
Proper Place to Add CSS in Magento2 and Magento only Showing CSS Changes when Clearing Browser Cache?
I am trying to modify some CSS files in my Porto theme in Magento 2.3.5pt-2. When modifying the CSS in pub/media/porto/web/css/custom.css I am not seeing any changes. I am in developer mode, I have ...
0
votes
1answer
32 views
Free Shipping Bar In Mini Cart
I Followed the tutorial Add Free Shipping Bar In Mini Cart, Magento 2 https://kiwicommerce.co.uk/blog/how-to-add-free-shipping-bar-in-top-mini-cart/
The progress bar showing but the Title Text is ...
0
votes
2answers
32 views
Magento 2.4 : Frontend/Backend Not working
I am using below configuration :
Magento 2.4.x
PHP 7.4
Composer 2.0
Frontend and Backend is not working. All .htaccess files are there in required folder.
But still,I am getting below log in apache
...
0
votes
0answers
22 views
How can I prevent styles-l.css loading for mobile only?
I'm trying to clean up some of our over stuffed css and js. Chrome inspector shows that styles-l.css is 100% unused for mobile and is used a little for desktop. I used 'remove' in the ...
1
vote
1answer
33 views
How do I load custom CSS for a widget only when the widget is used?
I have a custom widget for the product page (catalog product view). How can I load the custom CSS file into the head only when the Widget is actually placed on the page?
I am looking for a best ...
1
vote
1answer
34 views
How can I use the Magento UI library to display a link as a button?
I'm migrating an old module to Magento 2.4 and I would like to use the native classes from the Magento UI library to replace my Bootstrap classes.
What classes should I use to make my links look like ...
0
votes
3answers
42 views
What's the best way to customize the css in Magento 2?
I created my theme as Luma child but I cannot really understand what's the best way to customize the css. Until now I just wrote all of my styles in _extend.less file but it's a lot of stuff for just ...
0
votes
1answer
28 views
Magento 2 Theme Development Image to spread across home page
I can't figure out to spread a image across a screen.
It's in a block, which is then put into the cms home page.
Block;
<div><img id="intro-img" src="{{media url="images/...
0
votes
0answers
39 views
Magento 2 - How to apply different email style for outlook?
I try to create a e-mail template. I created custom header and footer, they are loaded and look good in magento 2. However in outlook it looks complelty destroyed and weird
So I figured out that ...
0
votes
1answer
29 views
How to add Twenty Twenty(Image Before & After) in magento2.4.2
I need to add a picture comparison function. This is the code Twenty Twenty I need, it looks very good, and it's free. But we don't know how to make it run.
Twenty Twenty Download Link https://zurb....
0
votes
0answers
28 views
Today, can I safely use CSS Flexbox and Grid in order to develop my Magento theme?
Today (April 2021), can I safely use these new CSS property in order to develop my Magento theme?
Flexbox
Grid
Or should I still prefer Float and Inline-Block?
This is my audience:
0
votes
0answers
25 views
How to defer CSS via layout xml?
I'm trying to defer a CSS file through default_head_blocks.xml.
After reading through as much as possible on here - and across the internet - I came across an answer suggesting to add defer="...
0
votes
0answers
44 views
Url Not working - Category Pages not Loading
I ran the following commands to enable a module on magento 2.4.1:
bin/magento module:enable testapp
bin/magento setup:upgrade
The command executed successfully, but this caused the images on my ...
0
votes
0answers
17 views
PHP third party library assets integrate in Magento
I want to integrate third party PHP raw library (Not a Magento 2 library) assets (JS, CSS and other) so that during the deployment of the static content, they are made available.
I tried the approach ...
0
votes
2answers
50 views
how to hide the filter in product listing page without modify the code base?
How to hide the filer in product listing page without touching the code?
Can I do it by CSS or javascript? Thank you
1
vote
2answers
29 views
What is the recommended way to include small CSS customizations to an extension?
I've installed an extension and want to make some CSS customizations to the modal pop-up that it provides. There are basic options in the backend for styles, but I want to use CSS to write some custom ...
0
votes
2answers
129 views
What is use of Critical.css file in Magento 2?
I want to know what is use of critical.css file in Magento 2. I enable configuration for that. But, how that file will create ?
Note : After enable configuration, CSS not loading in network.
Can ...
0
votes
2answers
42 views
Specific deploy magento view files
I'm trying run two step below
step1:
rm -rf pub/static/* ./var/view_preprocessed/* ./var/page_cache/* ./var/cache/* ./var/generation/*
step2:
php bin/magento setup:static-content:deploy -f --theme ...
0
votes
1answer
32 views
Trying to remove unwanted space in a table,
I'm trying to create a 6 cell table on my site that contains 3 images and i want the corners of the three images to touch, with no boarder or padding. I've tried everything I can think of but ...
1
vote
0answers
23 views
Magento 2 Content Security Policy: The page’s settings observed the loading of a resource at https://xuz/font-awesome.min.css (“style-src”) [duplicate]
We transfer hosting to another hosting company everything is working fine but we are getting console errors in firefox like this - "The page’s settings observed the loading of a resource at https:...
0
votes
1answer
30 views
Why do I see the wrong static files path in my JS?
After installing and deploying the static files, Magento is looking for:
http://127.0.0.1/magento2/static/adminhtml/Magento/backend/en_US/requirejs/require.js
instead of:
http://127.0.0.1/magento2/pub/...
0
votes
0answers
11 views
Magento2 custom UTF icons corrupted in frontend
I've got a problem with certain icons not being displayed correctly in a store I'm working on.
The relevant css, as far as I can tell:
/*
* Font Icon
*/
@mixin font-icon($icon:'\e5cd', $font-family:$...
3
votes
1answer
37 views
Magento2 Append a css class to a product detail page if a special parameter is in the URL
Here's what I'm trying to achieve.
When a product page URL has a parameter added to it like so: https://example.com/This-THI08.html?specialview=1
I'm trying to append a “specialview” class to the ...
0
votes
1answer
45 views
Magento 2.4 add Read More in the Product Description
I want to add "Read More" button in the product description. I use this code:
<div class="value more" <?php /* @escapeNotVerified */
echo $_attributeAddAttribute; ?> >
...
0
votes
1answer
19 views
Product details page get product custom attribute and apply custom css
I have create a custom attribute for a product. The attribute name is "hide"
When product load at product detail page, if this product custom attribute is "hide", it will apply a ...
0
votes
1answer
57 views
How to preload custom fonts in Magento 2.2
I have a custom font in my theme already added through the "web/css/source/_typography.less".
& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__base,
...
0
votes
1answer
15 views
Magento 2.3 Header Skewed
I have modified the header in my Magento2 site and it appears skewed to the right. I have checked the CSS of the div and the subsequent elements - logo, search and cart and cannot find a fix. Attached ...
0
votes
1answer
156 views
M2 - How to change Wishlist icon color after product added to Wishlist
My code:
app\design\frontend\Zero\my_theme\Magento_Wishlist\templates\catalog\product\view\addto\wishlist.phtml
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for ...
0
votes
1answer
11 views
When adding item to cart minicart doesnt show the subtotal
When I'm adding an item to the cart from product page it doesn't show the subtotal in minicart but when I reload the page it does. How to fix that? Here is the link.
0
votes
0answers
11 views
how to custom value which will be exported?
I have a grid and buttons for exporting like this.
There is field status in my grid. The value is 1 or 0. After exporting the grid, the value of this status is 1 or 0 in the CSV file. How can I make ...
0
votes
2answers
122 views
CSS stylesheet order acting inconsistently
I have my standard styles-m and styles-l stylesheets. I also have a custom.css stylesheet that loads later than those 2.
On both staging and production everything loads in that order, but in ...
0
votes
0answers
32 views
media css not reflect in mobile magento 2
I am making responsive design for mobile view. I have installed Porto Magento 2 theme. Porto theme provides css file custom design changes. I have made custom changes in custom.css file.
Porto theme ...
0
votes
1answer
20 views
Deleted files won't go away
I have a file that's auto generated by my theme. It's called design_storename.css
There are a few changes that weren't updating on my site, so I deleted that file, changed another setting and it ...
0
votes
2answers
20 views
How to override preprocessed CSS element which is !important
The preprocessed css [/public_html/var/view_preprocessed/pub/static/frontend/Vendor/Theme_custom/en_US/css] is overriding my custom css file because it have !important. It happens only on the large ...
1
vote
0answers
91 views
porto theme - critical.css file is not evaluated
Magento 2.3.6. We are trying to increase the pagespeed of the porto magento theme and we got recommendations to use critical css path.
We followed up the instructions for critical css path:
https://...
0
votes
0answers
20 views
What will be the major impacts if I removed all core css from Magento core and changing core class names?
Im using magento 2.4. I would like to know the impacts of removing all magento core css and changing some of core class names.
As per my understanding below areas will be impact
Magento Upgrade
...
0
votes
1answer
17 views
Where is configured_css generated?
I have a directory in /pub called /configed_css. It's full of css files called things like design_default.css and design_.css
I don't want to make changes to those files, because they're clearly auto ...
