CSS

Adding a CSS Markup Detective to Drupal

Submitted by mgifford on

A sherlock monkeyI ran across Holmes by Red Root thanks to Sean Yo and decided to check out how well it would work within a Drupal environment. Turns out that this clever markup detective will dig through & quickly highlight improper HTML markup with quite a lot of accuracy. There's so much power in CSS 3 it's exciting to see how it can be used to enhance accessibility. You can see the full testing suite in action, but I've also deliberately added some errors within this page.

One of the challenges with accessibility is that even when you have a great theme & have evaluated the modules and plugins your site uses, you still have to grapple with user generated content. Holmes, the CSS Markup Detective, is a very simple tool which provides a great way to double check that your content is written effectively. It's also trivial to add this into your existing Drupal theme and have it only loaded when an editor is viewing the site. Use of automated testing tools like WAVE & FAE need to be included in any accessible site and the holmes.css file is a great addition to this suite of validators. None of them will ensure that your site is without barriers, but it will at least alert you to the easy stuff that is often overlooked.

The code is now GPL and all you need to do is download the CSS file. In our case we're using the Genesis theme & so have placed it in our sub-theme's css directory. Then it's simply a matter of editing your template.php and adding this to your YOUR_THEME_preprocess_html() function:

tinyMCE: Adding css styles to menu style pull-down

Submitted by jesse on

As designers, something that we all wish at one point or another is for non-technical users to be able to style their contributed content according to the styles we have defined in style sheets. Users usually want to be able to easily do this as well. If a WYSIWYG is involved it often means a user will be selecting colours and fonts that will end up inline with the element; hard coded in the HTML like <div style="{background-color='green'; font-size='2em';}" >. It can also be time consuming to have to go and style everything a user inputs if it doesn't exactly fit your design model.

For tinyMCE, there is a nice feature that allows you to add styles to a 'style' pull-down menu. Here is how you can go about setting that up:

1. Add and enable the Wysiwyg module

2. Go to Site Configuration >> Wysiwyg

3. click 'edit' beside Full HTML -- TinyMCE

4. click 'buttons and plugins' to open the buttons settings. In here you will want to check 'font style', 'remove format', 'HTML block format'

5. click 'CSS' to open the css settings. Here there are several fields:

  • Block Formats: are the tags a user can enclose their content in. It appears in the editors 'Format' pull-down. These are up to you.
  • Editor CSS: Selects where the 'Styles' pull-down inherits its options from. By default it is set to 'Use Theme CSS' which means the admin theme's CSS. Set this to 'Define CSS' so it will inherit from the CSS of your choice.
  • CSS Path: The path(s) to the CSS file(s) you want the CSS classes to be pulled from. I find the full path works best. See Style sheet instructions below for further details.
  • CSS Classes: Optionally you can use this to filter the styles that you want to appear in the pull-down list. If left blank it all styles will appear in the pull-down.

Zen issues with IE and CSS

Submitted by mgifford on

One of our development sites was having trouble rendering in IE 6. It was previously browser tested-- everything checked out! Suddenly a tester comes back with the infamous comment (you might know it well): "the site doesn't render properly in IE6".

For most of us, this means several hours pouring over code trying to root out the problem CSS. If you are on a Mac, or a PC which doesn't allow IE6, this is especially painful.

Taxonomy-Specific CSS

Submitted by mgifford on

This is a related post by Jeff Burnz that looks like it is more flexible and up-to-date.

This is my first entry as a member of OpenConcept. I hope I can contribute positively to the team, and I look forward to being able to contribute back to the Drupal community as well.

While working on the Ecosystem-Based Management Tools project, I was asked to implement a method to have 8 unique header images--one per section--for the custom EBMTools theme I setup. The client wanted to have specific images for each section of content, thus it made sense to match the themes to the taxonomy of the content.

Subscribe to CSS