Language Specific CSS Selectors

The site that I am working on is bilingual, specifically in english and in spanish. This presents complications for any site of course, so this is a good trick to have in your arsenal. This is especially good for Drupal but will work on any site.

media=”screen”

:lang(es) #menu-4184-1

{
position:relative;
width: 122px;
}
This will allow the particular selector to be used only when the language is set to spanish. Please note that many other languages can be used by this by replacing the two letter language code with the one that you need. EI – de for german.

Create an embedded video library hosted by Youtube

Youtube help videos are the only way to go these days. Text based help files? Please. no one will read them. Don’t get me wrong; you still need them, if for no other reason than to aid you in understanding the application you are developing. But you have to have video instructions. And with Youtube, the hosting is free. And with the Embed Video Field module, this is really easy.

You can see the end result here, on my anonymous, non-restricted help page. This page was built using Views and Panels to display the custom content type called Help Videos I created for this very purpose. These are the high level steps I took to create this library

  1. Create your Video Content. I used open source Cam Studio for my videos. Great product and easy to use
  2. Upload the videos to Youtube
  3. Install the Embed module and configure it to use a content type.
  4. Create a new piece of content of the content type you want to use for videos
  5. Add the “short url” for the video to the new node
  6. If you don’t see what i have below, then there is an issue with the content type you are using and the embed module configuration
  7. ImageUse Views to display the new nodes (you’ll need to play with the settings unless you have done this a lot)
  8. Use Panels to build the page 

 

Drupal Core Upgrade – 7.24

There is a new core upgrade out and it appears that there are some pretty hefty security fixes in this one so there is no time to lose.

I followed the same procedure for this one as all the rest and have had no issues at all.

https://startlearningdrupal.wordpress.com/2013/04/04/core-upgrade

Advanced CSS Selectors and Drupal

Drupal can be difficult to override at times in terms of styling unless you place your intercepts in a submodule’s PHP so creative CSS knowledge and implementation is a must to keep your site from looking “too Drupaly”.

One CSS technique that I have been using a bit lately that you don’t usually run into in systems where the HTML is more easily customizable is the title attribute selector. Warning – this is really a hack. But I think that it deserves a place in any Drupal Developer’s toolkit.

The title attribute looks like this:

a[title~=Request]{

/*css stuff goes here*/

}

This selector targets hyperlinks (a) that have a title that contains the word Request (case sensitive too). This selector will add whatever you add in the following curly brackets. There are other options too. See the w3s link at the bottom.

Image

The SS is really two SSs: one with the selector disabled so you see the element and one with it turned on. The element that needs to disappear is a link to the /user/password page. For whatever reason (this is Drupal and sometimes it takes so long to figure out the mystery that it becomes a Pyrrhic victory as the deadline is missed) this link will take you to a place where the UX sucks. The workaround is pretty easy though. Use the Password reset form and hide the link using CSS. But since the link has nothing special in its selectors that gets tough. So, use the title attribute selector. The green box in the SS is the form for passwords, BTW.

http://www.w3schools.com/css/css_attribute_selectors.asp

Webform Module – Quick and Easy Drupal Forms

Quick and Easy are not two terms that typically are synonymous with Drupal. You generally have to go through the ringer to get Drupal to do most things. That’s the nature of a tool as powerful as Drupal. But the Webform module will really surprise you in a very nice way.

I needed a quick and dirty way to let my users send me feedback. The comment system won’t do because the feedback is general and not specific to a node. And I really want it to go into an email.

Image

With an install base of about 350k sites, I really don’t know how I missed webform. But with just a few steps, I was able to create a one field form (see the SS) that emails the result to an email address that I specify.

The module will create a content type called webform. From there, you simply create a new node. Once the intitial node has been created, you can add all of the nice elements that will go into the result. I have a one field form here but you can have much more that that. Definitely worth the time for your Drupal install!