0

My company picked up a project where we have to edit a clients existing Magento site. I am a WordPress developer and have NEVER used Magento.

I looked at the docs for the CSS Preprocessing on Magento but they just aren't clear. All I really want to do is just ass a LESS file of my own and just start cleaning up some of the styles.

They are using the Ultimo theme and I went into the css folder there and made a custom.less file but I don't know how to link it to the head and have it process to a CSS file. Also read something about being in developer mode? I am making these changes to the live site (I know horrible practice, just need to get these changes done fast). Any help or direction is much appreciated.

Improve this question
3
  • First things first, is it a Magento 1.x or Magento 2.x installation? This is a huge difference on the subject of using LESS. I'm also a WP developer but also have experience with Mag1 ánd Mag2 ánd .sass and .less files.
    – Asitis
    Commented Aug 2, 2016 at 15:33
  • Maybe you find love in this heartless place: devdocs.magento.com/guides/v2.1/frontend-dev-guide/…
    – Max
    Commented Aug 2, 2016 at 15:46
  • Basically, what you need is to create an _extend.less file in /app/design/frontend/YourThemeVendor/YourThemeName/web/css/source
    – Max
    Commented Aug 2, 2016 at 15:47

1 Answer 1

Reset to default
0

I see that you use a 1.9.2 installation, so the links to the v2.x devdocs and answers there won't be of use to you, since Magento 1.x doesn't support .less out of the box yet.

The short answer is this; regardless of how you compile the .less file (local, serverside or clientside), it outputs a .css file -somewhere-. To load that css file in your custom theme you can either add it via local.xml (in app/design/frontend/[THEME]/default/layout/local.xml) like this:

<default>    
      <reference name="head">   
         <action method="addCss"><stylesheet>css/mycustomcss.css</stylesheet></action>
      </reference>
</default>

But working with these XML layouts ad a WordPress developer can be tricky, I know. Another (not very best practice) way to add a css is to open the [THEME]/default/template/page/html/head.phtml file and just add it there in the <head> like you would in a WordPress theme.

So if you managed to add a custom css file to the theme, the next step is to compile it with .less. Personally I do this via a plugin for my code editor that compiles local .less files to a certain .css file and publishes that to the server. You could also take a look at this for a quick solution to render the less files on the server, but as they say themselves it's not a very good idea.

TL;DR: The first thing you need to do is to include a regular custom .css file in your theme. Once that's done it's up to you to find the best workflow to compile .less to that .css file.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.