Stefan Helander

Create custom blog category layout in Joomla 1.5

/0 Comments/in /by

If you need to customize the blog category layout in Joomla 1.5 you do like this: 

  1. Create the following subfolders to your template directory: 
    mkdir -p templates/yourtemplate/html/com_content/category
  2. Copy blog.php and blog_item.php from Joomla core:
    cp -p components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category
    cp -p components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category
  3. Customize blog.php and blog_item.php in the components/com_content/view/category/tmpl/blog.php templates/yourtemplate/html/com_content/category folder to your needs. These modified files will override the ones in the Joomla core if they exists.

 

Stefan Helander

Div with width 100% and margins or padding gets wider than 100% [solved]

/0 Comments/in /by

If a div is set to width (or height) 100% and margins or padding are added, it will be wider than 100% causing the scrollbars to appear in the browser. 

For example like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: 100%;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
      <h1>Div taking more than 100% space</h1>
      <p>It demonstrates a div that is taking up more than 100%. Notice the horizontal scroll bar below.</p>
    </div>
  </div>
</body>
</html>

The solution is to set the inner container width to auto instead of 100%, like this (click here to view live sample):

<html>
<head>
  <style type="text/css">
    body, html {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
    }
    #wrapper {
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
    }
    #container {
      width: auto;
      margin: 10px;
      padding: 0;
      border: 0;
      background-color: lightblue;
    }
</style>
</head>
<body>
  <div id="wrapper">
    <div id="container">
       <h1>Div NOT taking more than 100% space</h1>
       <p>It demonstrates a div that is NOT taking up more than 100%. Notice the absence of the horizontal scroll bar below.</p>
       <p>The difference/solution is to set the inner div with width: auto.</p>
    </div>
  </div>
</body>
</html>

Stefan Helander

PrestaShop subcategories not visible in blockcategories

/1 Comment/in /by

PrestaShop subcategoriesAfter upgrading to PrestaShop 1.5.3 (and 1.5.4) the subcategories where not showing up anymore in the categories block. The solution was quite simple: 

Just deinstall the categories block in the modules section and then install it again. After reinstalling, it will probably be necessary to adjust the block position. 

Stefan Helander

Timelapse from space

/0 Comments/in /by

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

Joomla 2.5 – suddenly internal links contain Smart%20Search [solution]

/2 Comments/in /by

In a Joomla 2.5 installation, SEF URLs enabled and URL rewrite using .htaccess enabled I suddenly got internal menu links with URL:s containing Smart%20Search, like:

http://www.example.com/some-menu-item/Smart%20Search/some-article

The link itself does not work, ending up on an error page. I have no explanation why this occurs.

The solution is to go to Menu -> Menus, then select all menus and then click the Rebuild button

 

Stefan Helander

Demolition of gas tower in Valby, Copenhagen

/0 Comments/in /by

The other day I went to watch the demolition of the gas tower in Valby, Copenhagen. The demolition was done by detonating a series of explosive charges in the bottom of the tower. By placing and sequencing the explosions the tower was tipped over to the side with high precision, just like taking down  a tree. I had never seen a demolition using explosives in reality before (only on video) so I was quite excited. Everything went exactly as planned. This is my video.

Slide the bar to 1:04 where the explosion begins. The event was rather big in Denmark. It was broadcasted live in television. See the news clip from TV2 News here.