suppose I need to add following changes in my css:
.border{1px solid #cecece}
.box{float:left}
I am stucked to add these in my styles, i can only see .less files and not sure how it works.
Add a comment
|
2 Answers
In your custom theme , Extend your theme CSS file under Magento_Theme\web\css\source _extend.less
you need to create this less file under theme module and then you can write your new styles here or can override existing .
-
i already extended theme and have written css in _extend.less but it is not reflecting. I wrote:
.border{1px solid #cecece} .box{float:left}Rohit– Rohit2017-06-17 11:13:30 +00:00Commented Jun 17, 2017 at 11:13 -
run upgrade and static content deploy command , extended less takes effect after these commandsManoj Deswal– Manoj Deswal2017-06-17 11:15:14 +00:00Commented Jun 17, 2017 at 11:15
-
Another way adding CSS is adding in \web\css\bootstrap.css and call this file in head block Magento_Theme\layout\default_head_blocks.xml <css src="css/bootstrap.css" />Manoj Deswal– Manoj Deswal2017-06-17 11:17:14 +00:00Commented Jun 17, 2017 at 11:17
-
ran the deploy command but changes are not visible in any file of css, i checked styles-m.css and others tooRohit– Rohit2017-06-17 11:20:54 +00:00Commented Jun 17, 2017 at 11:20
-
crosscheck your file names like " _extend.less " and send me your extended path , or have you tried another way ? this is wrong styling " .border{1px solid #cecece} "Manoj Deswal– Manoj Deswal2017-06-17 11:23:52 +00:00Commented Jun 17, 2017 at 11:23
Try this way to add css to frontend page:
- Put your css into
app/code/VendorName/ModuleName/view/frontend/web/css/custom.css. Create xml layout to call your css file, e.g:
app/code/VendorName/ModuleName/view/frontend/layout/default.xml<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <head> <css src="VendorName_ModuleName::custom.css" /> </head> </page>Run
php bin/magento setup:static-content:deploy
