Archive for June, 2013

 

Vertical and horizontal center img in div

This example shows how an image (img) can be vertically and horizontally centered inside a div. At the same time it illustrates how to resize the image to fit inside the div.

A live view of this code can be seen here. 

<html>
  <head>
    <title>Vertically aligned img in div</title>
    <style type="text/css">
      #container {
        position: absolute;
        width: 600px;
        height: 600px;
        background-color: lightyellow;
        vertical align: middle;
      }  

      #container img {
        max-width: 80%;
        max-height: 80%;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
      }


      p {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <img src="sl-buss-6050.jpg" alt="SL-buss 6050" title="SL-buss 6050">
      <p>The yellow box is here to show the div</p>
    </div>
  </body>
</html>

Share

Posted by on June 29th, 2013 No Comments

Create custom blog category layout in Joomla 1.5

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.

 

Share

Posted by on June 18th, 2013 No Comments