Tips and Tricks: CSS

How to disable a particular part in the source code of CSS?

Sometimes you want to disable a part of the CSS code without deleting it. To do so you can put "/*" and "*/" around the code you want to disable. You can use the same method to add headings and comments to your CSS files.

css code

How to make CSS modifications the proper way

If you make CSS modifications in the style.css, they will be overwritten if you install a new version of a theme. To avoid such problems it is recommended to make modifications in an alternative .css file.

Creation of local CSS file

Use the Drupal 7 module "Code per Node" to add custom CSS and Javascript

In many situation it can be quite useful to have a structured interface to add custom CSS and Javascript. The Drupal module Code per Node allows you to do so per node, per content type, per block and globally. After the installation you will get a "CSS & JavaScript" tab within nodes and blocks and a "Code per Node settings" tab within each content type. This allows you to add custom code very easily.

Drupal Code per Node module

Use "Inspect Element" to troubleshoot potential Design/CSS problems

If you work with different themes and modules you may frequently encounter problems with CSS. This might be in the process of modifying theme/module related CSS code or it might be that there are CSS conflicts between themes and modules (for Example because the same terms are used). In any case, I recommend you to use the "Inspect Element" function of your browser. Usually you can activate this function by a right click on the element/area you want to inspect.

Example of "Inspect Element" as a mean to troubleshoot CSS problems

How to solve the CSS conflict between the Marinelli theme and the Gallery Formatter module?

If you use the Gallery Formatter module based on the Imagefield within the Marinelli theme, the arrows of the gallery don't appear as they should (see step 1). This is apparently a CSS problem caused by conflict between the theme related CSS and the module related CSS. This howto shows you how to quickly solve the problem.

How to make a click-to-call link for mobile Devices only using HTML/CSS

<div class="mobiletel"><a href="tel:+xxxxxxxxx">(00xx x) xxx xx xx</a></div>
<div class="desktoptel">(00xx x) xxx xx xx</div>

@media only screen and (max-device-width: 480px) {
.desktoptel {display:none;}
}

@media (min-device-width: 481px) {
.mobiletel {display:none;}
}

Drupal themes to be compared