RSS! YEY!/* Browser Specific Styles */
ie6, the bane of our existence
There's an infinite amount of posts all over about how to 'tame the beast', as it were... Despite this, here's a few ways I've dealt with browser specific quirks and general unpleasantness, to make my designs cross browser friendly and client friendly (this usually means taming the unwilling ie6)
-
Separate Stylesheets
Creating a separate stylesheet for specific versions of IE is really easy, and a good idea if there are going to be lots of separate styles or tweaks on a per browser basis.
How to Use
In the
<head>of your document, below where your stylesheets are being called, include:<!--[if lt IE 7]> <script type="text/css" src="/path/to/style.css"></script> <![endif]-->Replace the script tag with anything you want IE older than IE7 to execute, this can include but not be limited to JS or inline CSS.
-
CSS Selectors
.categories {; }
/* Adding Body Classes by Node Type in Drupal */
<?php
if($node->type == 'story') {
$nodetype_class = 'story';
}
elseif($node->type == 'blog') {
$nodetype_class = 'blog';
}
elseif($node->type == 'page') {
$nodetype_class = 'page';
}
?>
<body class="<?php print $nodetype_class; ?>">
This looks at the nodetype of the page and if it's a story node adding the class "story" or else if it's the node type blog it will print out the class "blog", etc.
I've used this on the top of page.tpl.php to create a class depending on the nodetype of the page. Helpful to create css changes to the layout.
.categories {; }
/* Adding Custom Page Templates for Node Type */
For Drupal 5
Adding the following to template.php allows files named page-nodetype.tpl.php to override the base page.tpl.php. This way, nodetypes can have their own design or blocks without relying on the general template.
function _phptemplate_variables($hook, $vars = array()) {
// Add additional template suggestions
switch ($hook) {
case 'page':
// Add page template suggestions based on node type, if we aren't editing the node.
if ($vars['node'] && arg(2) != 'edit') {
$vars['template_files'][] = 'page-'. $vars['node']->type;
}
break;
}
return $vars;
}
I've used this to limit the blocks or the menus appearing on a per nodetype basis.
.categories {; }
/* Sin'dorei */
Materials:
Painter, Tablet
Description:
A World of Warcraft Bloodelf :)
image:
/* Formatting Date and Time in Drupal */
Snippet to change the node created on date for use in story nodes:
In node-story.tpl.php or other node tpl:
<?php print format_date($node->created, 'custom', 'F jS, Y'); ?>Prints:
March 25th, 2009
Check out php.net for complete list!
/* Changing the Drupal Admin Password in SQL */
This is a handy bit to know when you get a db dump and don't know the admin password that's been setup. (And are too impatient to wait for an email response? :P )
update users set pass=md5('kittens') where uid=1
Replace kittens with desired password. This effects User ID 1 (admin).
/* Updating to Views 2: How to convert views */
Recently I needed to update a Drupal 5 site to Drupal 6 that used views. The old views from 5 weren't showing up after the update, I couldn't find much information on this strangely. If you're having problems finding out where your views went they need to be converted, and it's not in a very noticeable area.
It's hiding under the tools tab and convert.
/admin/build/views/tools/convert
Would be nice they had a pleasant little notice that told me that I had views needed to be converted and a link.
/* Overriding Breadcrumb Separator in Drupal */
Looking to override the breadcrumb separators? Add the following to template.php-
Replace 'kitten' with something like > or » or even an image.
function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode(' kitten ', $breadcrumb) .'</div>';
}
}
To replace the breadcrumb separator with an image use the following, replacing the image path/name with the appropriate location of the image. This will be looking for an image in the theme directory.
function phptemplate_breadcrumb($breadcrumb) {
if (!empty($breadcrumb)) {
return '<div class="breadcrumb">'. implode('<img src="' . base_path() . path_to_theme() . '/path/to/image.png" />', $breadcrumb) .'</div>';
}
}
.categories {; }
/* How to Create Custom Photoshop Brushes */
Creating custom brushes in Photoshop is a great way to add texture, or repeating images to work. There are lots of online resources for custom photoshop brushes, such as on Deviant Art, some are available under a creative commons license. The easiest way to get what you want done, is to do it yourself!
Creating custom brushes is pretty simple, and most of the time are just made of simple shapes or textures that in combination with brush options are used to create creative/interesting results.
Creating the Basic Shape
I created a half-moon shape using the pen tool, and then flattened it. Right-clicking on the layer selects the object.
Once the object outline is selected (or the area around it, if preferred) Go to EDIT => DEFINE BRUSH PRESET.
.categories {; }
/* Using grep in OSX Terminal */
Continuing the story of ditching TextMate, after switching over to Vim, I was still using textmate's search project function, which I found helpful searching through hundreds of module folders and theme folders for larger projects. But, heh, besides the fact that my trial was expired, it is silly to be running another program just for a basic search. Especially when terminal does the same thing.
You can use grep to search for words in files and have them spit out a line number too :) As well as a bunch of other options:
grep --h
Will give you a list of options, but I'll list what I use:
grep -r -i -n "text" /folder/*
This searches "text" in the specified folder (Folder) and all recursive folders (-r). The results aren't case sensitive (-i) and spits out the line number of the file it finds it in (-n).
.categories {; }