How to apply classes to elements with CKEditor 4, in Drupal 7

I’m just jotting down a couple things that I figured out recently with regards to making modifications to the CKEditor WYSWIG editor in a Drupal 7 installation.

On a recent project, we had a client who wanted the ability to have images in the body float left or right. What I wanted to see happen, as a front end developer, is that the images would simply have a class attached to them, and my external CSS would handle the floating.

Why a class (as opposed to inline styling?):

  • Cleaner markup in general
  • Style attributes were being stripped by our text format, and I didn’t want to let any HTML fly within this format
  • Just adding a class would make future modifications easier (rather than trying to modify individual instances of inline styles)

After an afternoon of experimentation, I found out you need two files added to your theme, and a weird trick to make sure it works.

Read More10 Comments

SASS, Livereload and Chrome Dev Tool crashes

I’ve been experiencing a bizarre behavior when using:

  • Livereload (either via the app or a command line utility like Grunt)
  • Google Chrome
  • Having Google Chrome Dev Tools open

Where, every time I make a change to an .scss file, and Chrome Dev Tools are open in the relevant window – it will crash when Livereload attempts to update the page.

Aw Snap! Error when using Livereload and Chrome Dev Tools

Read More2 Comments

Changing the <body> element classes in Drupal 7

Drupal has many odd things hard-wired into it. The one I want to get into today is how, in Drupal 7, the <body> element has classes attached to it that sometimes just don’t make sense.

Let’s say you enable a theme, and your <body> element looks like this:

<body class="html front logged-in no-sidebars page-node" >

This happens for me when I have created a new Aurora based sub-theme. The only most of the classes are fine, but the no-sidebars class is the odd duck.

Read MoreLeave a comment