HowTo? - Joomla - Cassiopeia - Adjust Image Padding

This article describe how to adjust the padding around images added to articles.

Issue

When using the Cassiopeia template in Joomla and you add an image to your article, the default padding is only 1 pixel which causes the wrapped text to bump right up to the image. This does not look appealing so a mechanism is required to allow you to adjust this padding.

Solution

To solve this issue, the best way is to utilize the user.css file capability to allow you to add extra padding.

Steps

• Add a user.css file to your Cassiopeia installation (if one does not exist).
  1. Click on the New File Button at the top
     
  2. Name the file user in the File Name field
     
  3. select the File Type css
  4. Click on the folder css on the left – be absolutely sure that the folder is really marked!
  5. Click on "Create"
  6. Check that the user.css file is really inside the css folder

• In the user.css file define the following:
  • .photos {
        float: left;
        margin-right: 20px;
    }
  • Or do a global change using:
    • a img, fieldset, img  {    border: none; 
      margin-left: 8px;
      margin-right: 8px;}
• Now when editing the Article in question, select the "Images and Links" tab and in the "Image Class" field call the "photos" class.