filter by location

Sass, Bang, Wallop! (compiling CSS for WordPress child-themes)

Re-post from Aptivate‘s Blog: http://aptivate.org/en/blog/2013/08/07/sass-bang-wallop/

TL;DR

The long version

Sass setup

We’re writing our stylesheets using Sass because writing CSS is more fun with Sass. And using the lovely compass to compile our stylesheets. Our compass config looks like this:

# config.rb (in wp-content/theme/our-child-theme)
css_dir = ""
sass_dir = "sass"
output_style = (environment == :production) ? :compressed : :expanded
line_comments = (environment == :production) ? :false : :true

So this means that when developing, we can run

compass watch

and our stylesheet gets compiled.

And when its time to deploy

compass compile -e production

and a minified stylesheet is produced.

WordPress setup

We were developing a wordpress site using a child-theme. I came to the project relatively late and have never built a child theme. So stuff was working when I got it and I just went about continuing development. I introduced the switch from CSS to Sass (we were doing some major styling overhaul and the stylesheet was at 2500+ lines so it seemed like a good time for an overhaul).

Symptoms

When we switched to staging, the site appeared to be fine, but there were a couple of small glitches and noticed in the back end that:

  • templates were no longer showing in the Page Attributes box (on the right when you’re editing a page)
  • the dashboard had a red error message “ERROR: The themes directory is either empty or doesn’t exist. Please check your installation.” where it normally mentions the theme.

Fixing it

Looking at the requirements for a theme in wordpress – an index.php and a style.css are needed. There was already a style.css (it was a beautifully minified, comment free stylesheet) but no index.php. So I (mea culpa) added an index.php. Horror, everything broke. Because with the index.php wordpress thinks that your theme is a theme. But our theme was a child theme and we were using things like TEMPLATEPATH which, when used in a child-theme points to the parent-theme directory.

So, that was bad.

Then found the wordpress page on child themes (https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme). And remembered a post from Chris Coyier (my personal CSS hero) on Sass and WordPress themes (http://css-tricks.com/compass-compiling-and-wordpress-themes/) and discovered that a single

!

could solve all our problems.

Our main Sass stylesheet that was doing all the imports looked like this:

/*
Theme Name: Our Child Theme
Description: The description
Version: 1.0
Author: Aptivate
Author URI: http://aptivate.org
Template: parent-theme
*/
@import "compass/reset";
@import "compass/utilities/general/clearfix";
@import "compass/css3";

@import "globals";
@import "original";
@import "pagination";
@import "header_search";
@import "solr_results";
@import "social";
@import "nav";
@import "home";
@import "footer";
@import "teaser";
@import "themes";
@import "map";
@import "video";

This assembles all of our smaller sass sheets into one stylesheet, with the comment at the top. When using the production environment variable for compilation, compass minifies the CSS including stripping out all the comments. This is usually a good thing, but we really need this one comment. By changing the comment from

/*
Theme Name: Our Child Theme

to

/*!
Theme Name: Our Child Theme

then this one comment will not be removed and now our child theme is happy once more.

Sass, Bang, WordPress :D

stunning wp theme

doesn’t happen very often, but i was blown away by this wordpress theme – gorgeous – see it in action at brandingbees.com

button solar up

What started off as “we’ll just do a landing page” had a mild explosion into me discovering how awesome jQuery is. Lovingly hand-crafted over a busy weekend, Button Solar’s website is up at www.buttonsolar.com.

People seem to really like the roll-over on the front page where if you pick different numbers of panels you can see the product in different configurations. I was most excited about using html5 history api so that my #urls would work with the browser buttons – ho hum.

Abbottabad – now that was a surprise!

When I heard that Osama bin Laden had been killed in Abbottabad in Pakistan. I was, to say the least, surprised. Mason and I spent a night in Abbottabad in July 2007 while on Vacation in and around Islamabad. Our guest house had the most awesome bed we have slept in to-date. And I got bitten by a spider in the middle of the night and had an egg-sized bump on my forehead for a day or so. My lasting impression of Abbottabad was thinking how much it was like Tuscany, red tile roofs dotted among green hillsides. It has a pretty church which was being renovated while we were there. The lonely planet entry reads “Abbottabad, Hazara’s head-quarters and biggest town, was founded as a British garrison town in the 1850s and still possesses a colonial-era flavor. The shady gardens and wide streets in the Cantonment evoke the 19th century, and it’s not unusual to hear church bells or a military band.” Of all the places I’ve visited in Pakistan, this is not one of those that I could have imagined a precision US strike on the “world’s most wanted man.” The world is full of surprises.

Join the Fish Fight – www.fishfight.net

Join the Fish Fight to support and end to wasteful discarding practices in the fishing industry – www.fishfight.net

ssh – unattended login

mostly so i don’t forget AGAIN how to do this….

my problem

Computer A wants a copy of the files on Computer B.  The users on Computer A and Computer B are different.  Computer A wants to make a regular copy of the files so that it’s up-to-date and doesn’t want to need the help of  forgetful humans e.g. me.

So…we tell Computer B that Computer A is allowed to log in by doing the following.  We create a “public key” on Computer A and we give it to Computer B.  That way, when Computer A tries to log in to Computer B, Computer B knows that it’s ok to let Computer A in.

my solution

ssh keygen -t dsa -b 1024 

this creates a “public key” and a “private key” on Computer A. During this process we’ll be asked where we want to keep the key – usually in .ssh (fine for me) and if we want a passphrase.  Using a passphrase is secure but it we want unattended login then we can’t use a passphrase otherwise someone needs to put it in all the time. So, for me, no passphrase.

There are two files in .ssh now: id_dsa (private key) and id_dsa.pub (public key). Then we give the “public key” to Computer B by copying it across and adding it to .ssh/authorized_keys (a special file on Computer B that lets Computer B know which computers it should let in).

Then we can tidy up a little, make sure permissions are restrictive, remove unecessary copies of the public key etc. and we’re good to go.

Note:  the fact there are different users on Computer A and Computer B is completely irrelevant.

other solutions welcome…

i’m an amateur – better solutions gratefully received.

IMeCA 2010

The IMECA 2010 conference has been a truly inspiring event. A great mix of sharing experiences from a wide variety of people who are trying many different things as well as a real eagerness to learn and an opportunity to bring new tools and ideas to light.  I hope this will be the start of me getting more involved in the region, but I now need to go learn Spanish!

ubuntu: rescuing my LVM2 and then encrypted data

after minor hard drive meltdown, cause still tbd…. i am hoping for a happy ending thanks to the following:

Part 1 – Mounting my LVM2

to reveal that my doomed LVM2 hard drive was infact lurking around waiting for me to access it:

sudo lvmdiskscan

from this I could see the magic words:

/dev/sdb5 [ 148.81 GB] LVM physical volume

to find out where it was lurking:

sudo lvdisplay

revealed:

--- Logical volume ---
LV Name /dev/rabbit/root
VG Name rabbit
LV UUID xxxxxxx
LV Write Access read/write
LV Status available
# open 1
LV Size 142.73 GB
Current LE 36538
Segments 1
Allocation inherit
Read ahead sectors auto
- currently set to 256
Block device 252:0

my precious rabbit drive was there….waiting for me…but where is it really:

sudo ls -al /dev/rabbit/root

revealed:

lrwxrwxrwx 1 root root 22 2010-11-15 18:25 /dev/rabbit/root -> /dev/mapper/rabbit-root

hurrah :D

make my mounting directory:

sudo mkdir /media/rabbitmount

mount my lost beloved rabbit drive:

sudo mount -rw -t ext4 /dev/mapper/rabbit-root /media/rabbitmount/

….is it there….cd /media/rabbitmount…..ls……victory :D

cd /media/rabbitmount/home/usera …… ls -a …….
Access-Your-Private-Data.desktop .ecryptfs .Private README.txt
:( noooooo………

(I should have seen this coming, but I forgot in the excitement of previous victories)

Part 2 – Mounting my encrypted home directories

Followed the helpful documentation here:

https://help.ubuntu.com/community/EncryptedPrivateDirectory

I had not recorded my mount passphrase and so had to recover it using ecryptfs-unwrap-passphrase. BUT I keep all my passwords in Revelation and usually just copy and paste across.

Paste does not work for the ecryptfs-unwrap-passphrase command….after near desperation and a few attempts I figured this out and all was well from there on out!

bad superblock – not a cool new band

Being an amateur sys admin when you should really hire a professional one is a constant source of new learnings.

Today, I learnt that hard drives can, like a manic teenager decide one day that they are now self-identifying as a bad superblock and will not be performing any of the tasks previously expected of them (like booting) and they’re keeping all your data as well.

What is a bad superblock? Wikipedia has it’s suggestions, my artists impression is above.

Can bad superblocks be made good again?….Is there hope for humanity?….

Continue Reading →

inspiring education

Two inspiring videos from ted.com that show technology can be deployed to effectively tacklede problems and, for me, the right approach to applying technology – sometimes we don’t need new gadgets just new thinking. Generally though, it’s never about the technology, but the system that goes around it. A critique here – fair to say the devil is always in the details, but I am inspired none-the-less.

The circus of life


(starting at ~0:50 if you want to skip ahead)
From the day we arrive at the office
And, unsuspecting, step into the mess
There’s more to see than should ever be seen
Way too much to ever address
There’s far too much to take in here
Stuff to find than is best left unfound
But the promises high
Made always on the sly
Keeps great and small on the endless round

It’s the Circus of Life,
And it screws us all
Through drama and hype
Through Skype at night
Till we lose our place
On the path of sanity
In the Circus,
The Circus of Life.

A contribution from a friend who will remain an anonymous genius…we’ve all had days at work that are summed up by this brilliant modification of an old classic.

a lot of data

means a lot of stuff, a lot of people, a lot of geeking, and cake!

church in barranco

none of the rest of my night shots came out particularly well, i’m blaming the pisco sour

cop on a segway

probably the #1 reason why Lima rocked my world, other candidates included the very hot outfits they give to lady cops (what a great police force), ceviche, pisco sour, guinea pig, the best diet coke i’ve ever tasted, deliciously chill miraflores and a high prevalence of drinkable yoghurt and vintage cars

thank you jembi

a fantastic conference in a fantastic location

surfing

surfing on Noordhoek beach (not me)