How do I extend css with theme that doesn't call extend?
sorry if this is obvious or has been answered. I tried looking around and didn't see it. Also I'm getting around Magento okay but by no means an expert.
I have a Magento 2 theme that it was recommended I purchase for work. I have created my own theme that extended that purchased theme and it works and seems properly set up.
I then tried to create less files to extend the styling but none of them worked. I did all the necessary steps and my changes just never showed up. Finally I found that the issue was that the purchased theme does NOT extend Magento Blank or Luma. It's a top level theme. None of the basic extending mechanisms (_extend.less, _widgets.less etc) work. When I updated the theme table to have the custom theme extend Magento/blank, my css changes do appear but then the theme itself is a bit wrecked, presumably because it's including a bunch of Magento stuff that it hadn't before.
So, I don't know where to go from here. First of all, does that diagnosis sound right? It's completely possible that there's some way to do it after all that I haven't thought of. Then, is this normal? Should a purchased theme extend Blank? (and really the question is, if I dropped it and purchased another will I have the same problem).
How can I make my own style changes to this purchased theme? Or should I abandon it and start over?
theme custom extend
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
add a comment |
sorry if this is obvious or has been answered. I tried looking around and didn't see it. Also I'm getting around Magento okay but by no means an expert.
I have a Magento 2 theme that it was recommended I purchase for work. I have created my own theme that extended that purchased theme and it works and seems properly set up.
I then tried to create less files to extend the styling but none of them worked. I did all the necessary steps and my changes just never showed up. Finally I found that the issue was that the purchased theme does NOT extend Magento Blank or Luma. It's a top level theme. None of the basic extending mechanisms (_extend.less, _widgets.less etc) work. When I updated the theme table to have the custom theme extend Magento/blank, my css changes do appear but then the theme itself is a bit wrecked, presumably because it's including a bunch of Magento stuff that it hadn't before.
So, I don't know where to go from here. First of all, does that diagnosis sound right? It's completely possible that there's some way to do it after all that I haven't thought of. Then, is this normal? Should a purchased theme extend Blank? (and really the question is, if I dropped it and purchased another will I have the same problem).
How can I make my own style changes to this purchased theme? Or should I abandon it and start over?
theme custom extend
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27
add a comment |
sorry if this is obvious or has been answered. I tried looking around and didn't see it. Also I'm getting around Magento okay but by no means an expert.
I have a Magento 2 theme that it was recommended I purchase for work. I have created my own theme that extended that purchased theme and it works and seems properly set up.
I then tried to create less files to extend the styling but none of them worked. I did all the necessary steps and my changes just never showed up. Finally I found that the issue was that the purchased theme does NOT extend Magento Blank or Luma. It's a top level theme. None of the basic extending mechanisms (_extend.less, _widgets.less etc) work. When I updated the theme table to have the custom theme extend Magento/blank, my css changes do appear but then the theme itself is a bit wrecked, presumably because it's including a bunch of Magento stuff that it hadn't before.
So, I don't know where to go from here. First of all, does that diagnosis sound right? It's completely possible that there's some way to do it after all that I haven't thought of. Then, is this normal? Should a purchased theme extend Blank? (and really the question is, if I dropped it and purchased another will I have the same problem).
How can I make my own style changes to this purchased theme? Or should I abandon it and start over?
theme custom extend
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
sorry if this is obvious or has been answered. I tried looking around and didn't see it. Also I'm getting around Magento okay but by no means an expert.
I have a Magento 2 theme that it was recommended I purchase for work. I have created my own theme that extended that purchased theme and it works and seems properly set up.
I then tried to create less files to extend the styling but none of them worked. I did all the necessary steps and my changes just never showed up. Finally I found that the issue was that the purchased theme does NOT extend Magento Blank or Luma. It's a top level theme. None of the basic extending mechanisms (_extend.less, _widgets.less etc) work. When I updated the theme table to have the custom theme extend Magento/blank, my css changes do appear but then the theme itself is a bit wrecked, presumably because it's including a bunch of Magento stuff that it hadn't before.
So, I don't know where to go from here. First of all, does that diagnosis sound right? It's completely possible that there's some way to do it after all that I haven't thought of. Then, is this normal? Should a purchased theme extend Blank? (and really the question is, if I dropped it and purchased another will I have the same problem).
How can I make my own style changes to this purchased theme? Or should I abandon it and start over?
theme custom extend
theme custom extend
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
edited 3 hours ago
S Adamson
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
asked Dec 19 '18 at 2:07
S AdamsonS Adamson
116
116
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27
add a comment |
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27
add a comment |
1 Answer
1
active
oldest
votes
Okay, so I finally have a detailed answer to this question over a month later. Their theme does not have the built-in include to _extend.less that Luna does. In fact the theme that I purchased uses sass not less. However the same layout overrides still work and less is still built into Magento.
I did NOT need to edit their code I just needed to extend their layout.
Here's what I did:
app/design/frontend/MyVendor/MyTheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/custom.css" /><!-- My theme -->
</head>
</page>
app/design/frontend/MyVendor/MyTheme/web/css/source/custom.less
@import "./file1.less";
@import "./file2.less";
[ ... etc ...]
- Yes I called it as custom.css but the file is custom.less and is a less file. Magento does that automagically.
- You don't have to logically separate your less files-- you can include all your custom styling in custom.less-- but when you have a lot of styles it's easier to read. In practice file1 and file2 will have names like header.less or catalog.less or checkout.less and will live in the same folder (css/source/) as the custom.less file.
answered 4 hours ago
S AdamsonS Adamson
116
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f255118%2fhow-do-i-extend-css-with-theme-that-doesnt-call-extend%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Okay, so I finally have a detailed answer to this question over a month later. Their theme does not have the built-in include to _extend.less that Luna does. In fact the theme that I purchased uses sass not less. However the same layout overrides still work and less is still built into Magento.
I did NOT need to edit their code I just needed to extend their layout.
Here's what I did:
app/design/frontend/MyVendor/MyTheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/custom.css" /><!-- My theme -->
</head>
</page>
app/design/frontend/MyVendor/MyTheme/web/css/source/custom.less
@import "./file1.less";
@import "./file2.less";
[ ... etc ...]
- Yes I called it as custom.css but the file is custom.less and is a less file. Magento does that automagically.
- You don't have to logically separate your less files-- you can include all your custom styling in custom.less-- but when you have a lot of styles it's easier to read. In practice file1 and file2 will have names like header.less or catalog.less or checkout.less and will live in the same folder (css/source/) as the custom.less file.
answered 4 hours ago
S AdamsonS Adamson
116
add a comment |
Okay, so I finally have a detailed answer to this question over a month later. Their theme does not have the built-in include to _extend.less that Luna does. In fact the theme that I purchased uses sass not less. However the same layout overrides still work and less is still built into Magento.
I did NOT need to edit their code I just needed to extend their layout.
Here's what I did:
app/design/frontend/MyVendor/MyTheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/custom.css" /><!-- My theme -->
</head>
</page>
app/design/frontend/MyVendor/MyTheme/web/css/source/custom.less
@import "./file1.less";
@import "./file2.less";
[ ... etc ...]
- Yes I called it as custom.css but the file is custom.less and is a less file. Magento does that automagically.
- You don't have to logically separate your less files-- you can include all your custom styling in custom.less-- but when you have a lot of styles it's easier to read. In practice file1 and file2 will have names like header.less or catalog.less or checkout.less and will live in the same folder (css/source/) as the custom.less file.
answered 4 hours ago
S AdamsonS Adamson
116
add a comment |
Okay, so I finally have a detailed answer to this question over a month later. Their theme does not have the built-in include to _extend.less that Luna does. In fact the theme that I purchased uses sass not less. However the same layout overrides still work and less is still built into Magento.
I did NOT need to edit their code I just needed to extend their layout.
Here's what I did:
app/design/frontend/MyVendor/MyTheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/custom.css" /><!-- My theme -->
</head>
</page>
app/design/frontend/MyVendor/MyTheme/web/css/source/custom.less
@import "./file1.less";
@import "./file2.less";
[ ... etc ...]
- Yes I called it as custom.css but the file is custom.less and is a less file. Magento does that automagically.
- You don't have to logically separate your less files-- you can include all your custom styling in custom.less-- but when you have a lot of styles it's easier to read. In practice file1 and file2 will have names like header.less or catalog.less or checkout.less and will live in the same folder (css/source/) as the custom.less file.
answered 4 hours ago
S AdamsonS Adamson
116
Okay, so I finally have a detailed answer to this question over a month later. Their theme does not have the built-in include to _extend.less that Luna does. In fact the theme that I purchased uses sass not less. However the same layout overrides still work and less is still built into Magento.
I did NOT need to edit their code I just needed to extend their layout.
Here's what I did:
app/design/frontend/MyVendor/MyTheme/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/custom.css" /><!-- My theme -->
</head>
</page>
app/design/frontend/MyVendor/MyTheme/web/css/source/custom.less
@import "./file1.less";
@import "./file2.less";
[ ... etc ...]
- Yes I called it as custom.css but the file is custom.less and is a less file. Magento does that automagically.
- You don't have to logically separate your less files-- you can include all your custom styling in custom.less-- but when you have a lot of styles it's easier to read. In practice file1 and file2 will have names like header.less or catalog.less or checkout.less and will live in the same folder (css/source/) as the custom.less file.
answered 4 hours ago
S AdamsonS Adamson
116
answered 4 hours ago
S AdamsonS Adamson
116
answered 4 hours ago
S AdamsonS Adamson
116
answered 4 hours ago
S AdamsonS Adamson
116
116
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f255118%2fhow-do-i-extend-css-with-theme-that-doesnt-call-extend%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
var $window = $(window),
onScroll = function(e) {
var $elem = $('.new-login-left'),
docViewTop = $window.scrollTop(),
docViewBottom = docViewTop + $window.height(),
elemTop = $elem.offset().top,
elemBottom = elemTop + $elem.height();
if ((docViewTop elemBottom)) {
StackExchange.using('gps', function() { StackExchange.gps.track('embedded_signup_form.view', { location: 'question_page' }); });
$window.unbind('scroll', onScroll);
}
};
$window.on('scroll', onScroll);
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
What did you end up doing? If you changed themes which one?
– J. M. Becker
Jan 8 at 18:51
I don't have a happy answer for this unfortunately. I asked the theme provider and they told me to include my css in the default_head_blocks.xml (in other words, modify their code to include my css inline). I knew I could do that but I was hoping I wouldn't have to. I've done it because I wasn't getting any other answers and I have to get work done. I'd still like to know if this is normal.
– S Adamson
Jan 9 at 0:46
It isn't normal for any other platform, but magento 2, has so many crippling design flaws that it's essentially the only way to do things. You end up working around the platform for almost any changes, that's what I've seen also. No it isn't normal though, the project needs a fork, the leadership is still as crooked and incompetent as it was before. It needs to be developed by its user base, the priorities are completely backwards.
– J. M. Becker
Jan 17 at 15:27