opdavies/oliverdavies.uk-old-sculpin
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
This repository has been archived on 2025-01-19. You can view files and clone it, but cannot push or open issues or pull requests.
oliverdavies.uk-old-sculpin/docs/blog/2012/04/16/create-omega-subtheme-less-css-preprocessor-using-omega-tools-and-drush/index.html

252 lines
13 KiB
HTML
Raw Normal View History

Build site
2017-07-10 21:28:39 +00:00
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<title>Create an Omega Subtheme with LESS CSS Preprocessor using Omega Tools and Drush | Oliver Davies</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
GitHub Pages test
2017-07-10 21:44:15 +00:00
<meta property="og:url" content="https://opdavies.github.io/oliverdavies.uk/blog/2012/04/16/create-omega-subtheme-less-css-preprocessor-using-omega-tools-and-drush">
Build site
2017-07-10 21:28:39 +00:00
<meta property="og:title" content="Create an Omega Subtheme with LESS CSS Preprocessor using Omega Tools and Drush"/>
GitHub Pages test
2017-07-10 21:44:15 +00:00
<meta property="og:image" content="https://opdavies.github.io/oliverdavies.uk/assets/images/me-precedent.jpg"/>
Build site
2017-07-10 21:28:39 +00:00
<meta property="og:image:height" content="327"/>
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="327"/>
GitHub Pages test
2017-07-10 21:44:15 +00:00
<link rel="stylesheet" href="https://opdavies.github.io/oliverdavies.uk/assets/css/main.css">
<link rel="stylesheet" href="https://opdavies.github.io/oliverdavies.uk/assets/css/blog-post.css">
Build site
2017-07-10 21:28:39 +00:00
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=57" sizes="57x57">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=114" sizes="114x114">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=72" sizes="72x72">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=144" sizes="144x144">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=60" sizes="60x60">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=120" sizes="120x120">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=76" sizes="76x76">
<link rel="apple-touch-icon" href="/assets/images/me-precedent.jpg?s=152" sizes="152x152">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=160" sizes="160x160">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=96" sizes="96x96">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=32" sizes="32x32">
<link rel="icon" href="/assets/images/me-precedent.jpg?s=16" sizes="16x16">
</head>
<body class="">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
GitHub Pages test
2017-07-10 21:44:15 +00:00
<a class="navbar-brand" href="https://opdavies.github.io/oliverdavies.uk/">Oliver Davies</a>
Build site
2017-07-10 21:28:39 +00:00
</div>
<div id="navbar" class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="">
<a href="/">About</a>
</li>
<li class="">
<a href="/experience">Experience</a>
</li>
<li class="">
<a href="/testimonials">Testimonials</a>
</li>
<li class="">
<a href="/talks">Talks</a>
</li>
<li class="active">
<a href="/blog">Blog</a>
</li>
<li class="">
<a href="/contact">Contact</a>
</li>
</ul>
</div> </div>
</nav>
<div class="container">
<div class="row">
<main class="col-md-9">
<h1>Create an Omega Subtheme with LESS CSS Preprocessor using Omega Tools and Drush</h1>
<p class="posted">16th April 2012</p>
<p>In this tutorial I'll be showing how to create an <a href="http://drupal.org/project/omega">Omega</a> subtheme using the <a href="http://drupal.org/project/omega_tools">Omega Tools</a> module, and have it working with the <a href="http://lesscss.org">LESS CSS preprocessor</a>.</p>
<p>The first thing that I need to do is download the Omega theme and the Omega Tools and <a href="http://drupal.org/project/less" title="LESS module on drupal.org">LESS</a> modules, and then to enable both modules. I'm doing this using Drush, but you can of course do this via the admin interface at admin/modules.</p>
<pre><code class="language-bash">$ drush dl less omega omega_tools;
$ drush en -y less omega_tools
</code></pre>
<p>With the Omega Tools module enabled I get the drush omega-subtheme command that creates my Omega subtheme programatically. Using this command, I'm creating a new subtheme, enabling it and setting it as the default theme on my site.</p>
<pre><code class="language-bash">$ drush omega-subtheme "Oliver Davies" --machine_name="oliverdavies" --enable --set-default
</code></pre>
<p>By default, four stylesheets are created within the subtheme's css directory. The first thing that I'm going to do is rename <code>global.css</code> to <code>global.less</code>.</p>
<pre><code class="language-bash">$ mv css/global.css css/global.less
</code></pre>
<p>Now I need to find all references to global.css within my oliverdavies.info file. I did this using <code>$ nano oliverdavies.info</code>, pressing <code>Ctrl+W</code> to search, then <code>Ctrl+R</code> to replace, entering <code>global.css</code> as the search phrase, and then <code>global.less</code> as the replacement text. After making any changes to oliverdavies.info, I need to clear Drupal's caches for the changes to be applied.</p>
<pre><code class="language-bash">$ drush cc all
</code></pre>
<p>I tested my changes by making some quick additions to my global.less file and reloading the page.</p>
<p>If your changes aren't applied, then confirm that your global.less file is enabled within your theme's configuration. I did this by going to admin/appearance/settings/oliverdavies, clicking on the Toggle styles tab within <em>Layout configuration</em> and finding global.less at the bottom of <em>Enable optional stylesheets</em>.</p>
<p class="tags">
Tags:
GitHub Pages test
2017-07-10 21:44:15 +00:00
<a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/drupal-7">drupal-7</a>, <a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/omega">omega</a>, <a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/theming">theming</a>, <a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/less">less</a>, <a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/drupal-planet">drupal-planet</a>, <a href="https://opdavies.github.io/oliverdavies.uk/blog/tags/drupal">drupal</a> </p>
Build site
2017-07-10 21:28:39 +00:00
<div class="post-pager is-flex">
<div class="is-half">
<a href="/blog/2012/02/01/use-authorized-keys-create-passwordless-ssh-connection">
&laquo; How to use Authorized Keys to Create a Passwordless SSH Connection
</a>
</div>
<div class="is-half text-right">
<a href="/blog/2012/04/17/installing-nagios-centos">
Installing Nagios on CentOS &raquo;
</a>
</div>
</div>
<div class="about-author">
<h2>About the Author</h2>
GitHub Pages test
2017-07-10 21:44:15 +00:00
<img src="https://opdavies.github.io/oliverdavies.uk/assets/images/me-precedent.jpg" alt="Picture of Oliver" class="img-circle">
Build site
2017-07-10 21:28:39 +00:00
<p>Oliver Davies is a Web Developer, System Administrator and Drupal specialist based in the UK. He is a Senior Developer at <a href="https://microserve.io">Microserve</a> and also provides freelance consultancy services for Drupal websites, PHP applications and Linux servers.</p>
</div>
</main>
<div class="col-md-3">
<div class="panel badges text-center">
<a class="badge--da-member" href="https://assoc.drupal.org/membership" title="I’m a Drupal Association member.">
<img
GitHub Pages test
2017-07-10 21:44:15 +00:00
src="https://opdavies.github.io/oliverdavies.uk/assets/images/da-individual-member.png"
Build site
2017-07-10 21:28:39 +00:00
alt="Drupal Association Individual Member"
width="152"
>
</a>
<a href="http://drupalcores.com/#opdavies">
<img
alt="I built Drupal 8 with hand holding a wrench on blue background"
GitHub Pages test
2017-07-10 21:44:15 +00:00
src="https://opdavies.github.io/oliverdavies.uk/assets/images/drupal-8.jpg"
Build site
2017-07-10 21:28:39 +00:00
/>
</a>
<img
GitHub Pages test
2017-07-10 21:44:15 +00:00
src="https://opdavies.github.io/oliverdavies.uk/assets/images/badges/acquia-certified-developer-drupal-8.png"
Build site
2017-07-10 21:28:39 +00:00
alt="Acquia Certified Developer - Drupal 8 Exam Badge"
height="147" width="147"
/>
<a href="http://conference.phpnw.org.uk/phpnw17">
GitHub Pages test
2017-07-10 21:44:15 +00:00
<img src="https://opdavies.github.io/oliverdavies.uk/assets/images/badges/phpnw17.png" alt="">
Build site
2017-07-10 21:28:39 +00:00
</a>
</div>
<div class="availability panel panel-default">
<div class="panel-heading">Availability</div>
<div class="panel-body">
<p>
<i class="fa fa-thumbs-o-up text-warning"></i>
Currently have limited part-time capacity
</p>
<p>
<i class="fa fa-thumbs-o-down text-danger"></i>
Currently no spare full-time capacity.
</p>
</div>
</div>
<div class="latest-posts panel panel-default">
<div class="latest-posts__heading panel-heading">Latest blog posts</div>
<ul class="list-group">
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/06/09/introducing-the-drupal-meetups-twitterbot">
Introducing the Drupal Meetups Twitterbot
</a>
</span> -
<span class="post__date">9th June, 2017</span>
</li>
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/05/20/turning-drupal-module-into-feature">
Turning Your Custom Drupal Module into a Feature
</a>
</span> -
<span class="post__date">20th May, 2017</span>
</li>
<li class="post list-group-item">
<span class="post__title">
<a href="/blog/2017/05/15/drupalcamp-bristol-early-bird-tickets-sessions-sponsors">
DrupalCamp Bristol 2017 - Early Bird Tickets, Call for Sessions, Sponsors
</a>
</span> -
<span class="post__date">15th May, 2017</span>
</li>
</ul>
</div>
</div>
</div> </div>
<footer class="container">
<p class="copyright">
&copy; 2010-2017 Oliver Davies. Built with <a href="https://sculpin.io">Sculpin</a>.
</p>
<div class="meetups">
<h2>Things that I organise</h2>
<ul>
<li class="meetups--drupal-bristol">
<a href="http://www.drupalbristol.org.uk" title="Drupal Bristol">
GitHub Pages test
2017-07-10 21:44:15 +00:00
<img src="https://opdavies.github.io/oliverdavies.uk/assets/images/meetups/drupal-bristol.jpeg" alt="Drupal Bristol">
Build site
2017-07-10 21:28:39 +00:00
</a>
</li>
<li class="meetups--drupalcamp-bristol">
<a href="http://www.drupalcampbristol.co.uk" title="DrupalCamp Bristol">
GitHub Pages test
2017-07-10 21:44:15 +00:00
<img src="https://opdavies.github.io/oliverdavies.uk/assets/images/meetups/drupalcamp-bristol.png" alt="DrupalCamp Bristol">
Build site
2017-07-10 21:28:39 +00:00
</a>
</li>
<li class="meetups--phpsw">
<a href="http://phpsw.uk" title="PHPSW">
GitHub Pages test
2017-07-10 21:44:15 +00:00
<img src="https://opdavies.github.io/oliverdavies.uk/assets/images/meetups/phpsw.jpeg" alt="PHPSW">
Build site
2017-07-10 21:28:39 +00:00
</a>
</li>
</ul>
</div>
</footer>
GitHub Pages test
2017-07-10 21:44:15 +00:00
<script src="https://opdavies.github.io/oliverdavies.uk/assets/js/site.js"></script>
Build site
2017-07-10 21:28:39 +00:00
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-11967257-1', 'auto'); ga('send', 'pageview');</script>
</body>
</html>
Reference in a new issue Copy permalink