Drupal: CSS compression breaks layout if we use @import url

21 03 2010

Recently we faced a unique issue in one of the drupal project. The layout used to break completly in IE. But it used to work well in firefox. Later we figured out that IE is unable to load more than 31 css files. If the css files exceed 31 files it does not load after 31 files.

If we compress the css this number of css files problem does not occur. So we enabled css compression for the performance settings page. Then the layout was completly breaking.

When we compress css, layout breaking means there are some css syntax errors which are causing css to render properly. We started fixing all the W3c css validation errors. One of the error which we are seeing is for one of the selector the background property was causing the issue. The original css is like this


#header div.drigg input-sumbit {
backgroud: transparent url('../img/image1.png');
color: #333;
}

After compress the css became


#header div.drigg input-submit {backgroung: transparent url(css/color:#333)}

The above statement telling that when we compress the url was changed. When I digg further why this is happening only this selector, then I realised that this css was written in a another css file and this was imported in style.css using @import url.

Then removed this @import statements and added these file paths in my theme .info file. Then when I compress css, layout did not break. Now it was working well in IE and other browsers.

Finally I realised that we should not use @import url, instead we can load all css files by placing them in the theme .info file.

Advertisements




Linux like development environment in Windows

6 11 2009

I am a fan of Linux based OS. I love Ubuntu a lot. In fact I started my programming in Redhat. So from the beginning I am comfortable using Linux than Windows. The only reason I use windows is to check IE browser compatability.

Recently I attended Drupal Sprint India 2009. I want to attend the sprint, so I need one Laptop to go there and work. My company provided me Laptop with Windows. So I need to work on drupal core issues in windows. Hmm it looks very hard for me to work in Windows. I want to have following things in my Windows machine.

  1. Cygwin to get the linux like terminal, so that I can see paths with forward slash.
  2. Xampp Lite to get Apache, Mysql, PHP.
  3. cvs, I am going to work on drupal core so I need it
  4. I should able to create patches, apply patches.
  5. I want to use Drupal Drush module, which provides some command line utilities
  6. Emacs. I am more comfortable with this editor. It is very hard to work with other editors once we are comfortable with Emacs

First I installed the things I know like Cygwin, Xampp Lite.

Installing Emacs

I Installed Emacs by following instructions at http://www.claremontmckenna.edu/math/ALee/emacs/emacs.html .

Installing UnxUtils

To be able create patches and apply patches I installed unxutils from http://sourceforge.net/projects/unxutils/ . With this unxutils I got most of the Linux commands. The commands like ls, mkdir, wget, diff, patch, tar, zip etc… are working. I am very happy after installing unixutils.
Installing UnxUtils is nothing but setting the path variable in Windows. I extracted the unixutils directory in C folder and Add C:\unixutils\usr\local\wbin path to the Path variable. In Windows XP we can set the Path variable by going to control panel > System > Advanced > Environment Variables. Select the Path and click Edit and add your path to the existing path.

Installing Drush

There is a documentation about installing Drush in Windows http://drupal.org/node/594744 . This document explain Drush installation by using GnuWin32. But I already installed UnxUtils so I don’t require GnuWin32. So first 3 steps in the http://drupal.org/node/594744 can be ignored. I extracted drush in C folder. As specified in the step 4 of http://drupal.org/node/594744 I edited drush.bat with the path of php.exe and path of drush.php. I added following statement in drush.bat file
@E:\xampplite\php\php.exe C:\drush\drush.php %1 %2 %3 %4 %5 %6 %7 %8 %9

Because I used xampplite to install php, php is there at path E:\xampplite\php\php.exe.Now I executed drush command from the windows terminal by specifying -r and -l attributes.
After that I got an idea why can’t I keep this php, drush paths also in path so that I can directly drush.bat file as it is. Yes I added php, drush, mysql paths in Windows Path variable. The everything works file.

Installing cvs

I downloaded TortoiseCVS from http://www.tortoisecvs.org/download.shtml. This is a exe file, I can simple double click and execute.

That’s it, Now I installed all the things necessary to work on drupal with a linux like environment. Now I am happy to work on windows.





Drupal – Advertisement module

21 07 2009

Today I got a chance to work on advertisements feature in one of our project. I found Advertisement module. This module is having lot of features, I just need a way to add advertisement with the banner and need to show the ads in a block. I did following steps to get what I need.

1. Download and place Advertisement module in modules directory. I use drush

drush dl ad

2. Enable the ad, ad_image module through admin build modules page. I used drush

drush enable ad

drush enable ad_image

3. Go to admin/content/ad/configure/image page and set the maximum image size for the default group and checked Allow remote hosted images. Here I used default group. If we want we can create groups and assign ads to different groups. When we create a group, the specific group block will be created automatically.

4. Enable the default ad group: default block. Enable respective group block if create groups

5. Create advertisement by going to node/add/ad page. Specify the title and group details

6. Select the Add type in the Select Ad type section and click select then one new section will add at the bottom of Select Ad type section.

7. Specify the destination url and specify Romote Image path if the image is from remote path. We can also upload the image at the bottom of the page in file attachment section.

8. We can set the ad activation, expiration settings at scheduling section.

9. Set the status of the ad and save. Choose the active status if you want to display ad in the block. Save the advertisement.

10. Repeat the steps from 5-9 to add more ads.

11. Now the block will display the ad image that we created now.

12. By default block display 1 ad. we can configure the number of ads to be displayed in the block in block configuration page.

That’s it. I can able to create ads with image and displaying them in a block. Hope this might be helpful for others(I used drupal 6)





Drupal – Restrict access to menu item per role

20 07 2009

When I am working on one project, I created some content types. The view permissions for some of the content types should be restricted only for some roles. There is no view access peromission specific to content type. There are  add, edit, delete permissions for the specific content type.

Any how I am using only one node of that content type. So I used menu_per_role module. Through this module we can restrict the access of a particular menu item. I did following steps to restrict access to one menu item for some roles.

1. install menu_per_role module

2. enable the module

3. Go to menu item edit page, you can see Restrict access permission section. Select the roles which you want to give permission for this menu and save.

That’s it. It worked for me for now, but I need to find out how to restrict view access of particular node type. If some one know please send me comment.





Drupal – Custom filter type for content type

20 07 2009

In one of the project that I am working, there is a requirement to enable full html filter type for one content type. The rest of the content types should have the default filter type configurations set in the admin/settings/filters/list.

I did with the Filter by node type module. Which solved my problem. I followed bellow steps to enable full html filter type for one content type.

1. Install the module

2. Enable module

3. Go to content type edit page.  Path will be admin/content/node-type/<node type>

4. Expand Submission form settings section. Check the allowed input filters for this content type and save.

5. Select the proper roles who can use this filter format. We can set this by going to the corresponding filter configuration page. If we do not set this role even if we set the default filter type it does not effect.

That’s it. I used drupal 6. Hope this might be helpful for others.
update: I found another better module to do this. It is Better Formats module . I did not try this but It looks it works better than filterbynodetype module.





Drupal module is not appearing in module list page

10 07 2009

Recently when I am working on one project I observed strange behavior. The module is there in the modules directory but I can’t see that module in the admin/build/modules/list page. I wanted to enable that module but I could not find that module in the list.

I was struggling to find out why? After some time one of my colleague said to search for this module .module file exist in some other location also. Yes it is there in another folder. If I remove that extra .module file which is there at wrong location it appear in the modules list page.

.module file should exist at only single palce. This probllem can be common when we use ftp to copy files. By mistake we can put files in some other location. So be careful while copying files using FTP.





Using GMap + Location + Views Drupal Modules

5 07 2009

Recently I got a chance to work on GMaps using drupal. GMap and Location modules are very good to integrate GMap with drupal. Views module made my life very easy.

Installing GMap + Views

1. Install views and enable views and views UI module

2. Install GMap and locations module and enable GMap, Location, GMap Location, Node Locations, User Locations, Location Add Another modules

3. Go to admin/settings/gmap page and add the gmap api key, which we can get through http://www.google.com/apis/maps/signup.html and adjust other map settings

4. Go to admin/settings/gmap_location page and adjust the gmap macro settings if needed.

5. Go to content type edit page and adjust the location settings.

6. Add the nodes by specifying some locations.

7. Go to map/node page which will show GMap with node locations marked.

Creating GMap View

Creating of view is normal, just select the view style as GMap. The result of the query values will display as markers on GMap.

GMap Macros

A GMap macro is a text-based way of describing arbitrary GMaps. We can build this macro using GMap Macro Builder module.

1. Enable GMap Macro Builder Module

2. Go to map/macro or click on the Build GMap Macro link in the Navigation to build macro.

3. Audgest the GMap settings, at the down in the Macro text box the text representation of map will be updated.Copy this text and use when ever is needed.

Using GMap Macro

We can use this GMap macro on any node. To display GMap on any node (ex: page) just copy the above GMap macro text and place it in the body text and choose the Input format GMap. To get input format GMap just add one input format like this.

1. Go to admin/settings/filters/add page

2. Type the name of the filter as GMap

3. Choose the GMap macro Expander and save.

I hope this will be helpful for others.

Note: I used Drupal 6.12 version.