Stefan Helander

How to display list items inline and remove the bullet

/0 Comments/in /by

When using list items in HTML to create a horizontal list (for example in a horizontal menu) you need to display the list items not vertically which is standard, but horizontally. You will probably also want to remove the bullet. This is how you do it.

To display the list horizontally, use CSS display: inline

To remove the list item bullet, use CSS list-style: none

Example:

<ul>
  <li style="display: inline; list-style: none;">Menu item 1</li>
  <li style="display: inline; list-style: none;">Menu item 2</li>
  <li style="display: inline; list-style: none;">Menu item 3</li>
</ul>

Of course, the above is just to illustrate the technique. In a real world scenario this would be applied through a CSS class or id.

 

Stefan Helander

Make a weblink (a href) not clickable

/0 Comments/in /by

Sometimes you have a need to prohibit a visitor from clicking on a link on your site. For example if you are including content from another soruce via Atom or RSS and they contain links.

The best way is of course to remove the link tag (<a href="" >) from the content. But if this is not possible an alternate solution can be to cover it with a transparent div placed on top of the content using the z-index.

Stefan Helander

WordPress Media crop button greyed out

/0 Comments/in , /by

In WordPress Media it is possible to edit the images in some basic ways including cropping. To use the tool you must fist make a selection in the image by clicking and dragging across the image. The selection must be wider than the smallest image setting in WordPress. Otherwise the crop tool will stay greyed out. Once a large enough selection has been made the crop button becomes clickable. This is not always logical to the user who often try to click the crop button first.

Cropping images in WordPress

Stefan Helander

Create a start page without a corresponding menu item in Joomla!

/0 Comments/in , /by

In most cases when creating a site in Joomla!, the first choise on the menu is something like "Start" or "Home" that brings the user back to the landing page of the site. Normally you will also link the website logo to the start page.

But sometimes when creating a site in Joomla, it is not desirable to have a specific menu item with the sole purpose to bring up the start page. Just linking the logo to the start page may be sufficient and you don’t want to clutter up your menu with an additional item (or you are running out of menu space).

The solution to not having a menu item corresponding to the start page is to simply create a hidden menu, for example "hiddenmenu". Do not publish a module for it. Place the menu item that brings up the start page in this hidden menu. Done!

By the way, linking your logo to the start page can be done in the template html-file by something like this: 

<a href="<?php echo $this->baseurl; ?>"><div id="logo"></div></a>

 

 

Stefan Helander

/tmp problem when installing plugins in WordPress

/1 Comment/in , /by

When you try to install a plugin in WordPress and get an error message like this:

Warning: file_exists() [function.file-exists]: open_basedir restriction in effect. File(/tmp//google-integration-toolkit.tmp) is not within the allowed path(s): (/var/www/XXX/) in/var/www/XXX/web/wp-includes/functions.php on line 2140

Warning: touch() [function.touch]: SAFE MODE Restriction in effect. The script whose uid is 12345 is not allowed to access /tmp owned by uid 0 in /var/www/XXX/web/wp-admin/includes/file.php on line 184

Download failed. Could not create Temporary file.

This is happening when the server is running with SAFE MODE because WordPress will not be able to access paths outside it’s web root. Find out the full path to your web root on the server (a hint is in the error message you just saw). Create a temporary directory within your website path and add the following line.

Edit wp-config.php and add:

define(‘WP_TEMP_DIR’, ‘/var/www/XXX/tmp’);

(Replace /var/www/XXX/tmp with the full path to your temporary directory.)

Stefan Helander

CSS letter-spacing bug in IE7 and solution

/0 Comments/in /by

A very good and scalable way to set letter spacing in CSS is by using ’em’s as it works relative to the font size. If you for example specify letter-spacing = 0.2em the letter spacing will stay proportional even though you change the font-size. You can easily set the letter spacing for the entire site in all font-sizes.

The ’em’s works exactly like ‘tracking’ which many designers work with. To convert tracking to em just divide it by 1000. That is x em = tracking y / 1000. For example tracking 200 equals to 0.2em.

The definition of 1 em is the size of the character M in the current font size. So 1 em for a font-size of 10px equals to 10px. 1 em for a 24px font size is 24px.

It is very practical to use ’em’s to specify the letter-spacing as it is proportional to the font size. For small ’em’s however, Internet Explorer 7 (IE7) seems to round the values making the letter spacing appear wrong. It works alright in other browsers as well in IE8.

A workaround is to convert the letter spacing to pixels for your current font-size. The drawback is that you have to calculate it for every font-size you are using. And if you change a font-size you must recalculate the letter spacing.

The calculation is really simple. Just multiply the font size in pixels with the letter-spacing in ’em’s and you will get the letter spacing in pixels. If you have a font size of 16 pixels and want a letter spacing of 0.2em (which is equal to a tracking of 200) you do: 16px x 0.2em = 3.2px letter spacing.

Examples using 0.2em (tracking 200):

#mysize16
{
font-size: 16px;
letter-spacing: 3.2px; /* 0.2em x 16px = 3.2px */
}

#mysize24
{
font-size: 24px;
letter-spacing: 4.8px; /* 0.2em x 24px = 4.8px */
}