CSS

Say No to IE6 the Drupal Way

Submitted by mgifford on

There's just so much great stuff going on with modern browsers, mobile devices and HTML5, so how does the Drupal community our our best to help innovation by encouraging IE6 users to upgrade to a modern browsing experience.  Now Drupal 7 (core) is still will be providing support for IE6, but we really don't want to have to support it for Drupal 8 (which could well be released before IE6 is finally laid to rest by Microsoft).   I've written a short note that we're using for our visitors to give them the tools that they need to finally make the move.  However, I thought I should document a nice way to do this in Drupal 7.  Much of this will be the same for Drupal 6.

Now there are ways to do browser detection with jQuery or other tools, but for Drupal 7 the easiest way seems to be to add a conditional CSS file to the header through the template.php file. The conditional statements work fine for IE 6 & 7, so they do the trick nicely:

Ubercart as a donation system + Moneris as a Payment Gateway

Submitted by jesse on

Hopefully this blog entry will help a few people overcome some of the hurdles in setting up a donations system. We are a drupal shop so all the following is for drupal 6.

In this case the client simply wanted to have a way to collect donations from supporters of their political campaign. The only real constraint was that it needed to integrate with the Moneris payment gateway system. I was looking at creating a custom donation system and integration to Moneris, but in the end opted to use Ubercart. Ubercart is an awesome beast of a Shopping cart system that has many great features and useful contribs, 90% of which I did not need to take advantage of. However, Ubercart, in an extremely stripped down form, looked like it could offer everything I needed in terms of accepting and tracking donations. There was also an existing UC Moneris contrib module that looked pretty simple.

What you will find in this blog

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.

Subscribe to CSS