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.
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.
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.