History

Debugging CSS Issues in TYPOlight

This tutorial details a simple method to track down exactly which code in a cascading style sheet (css) is creating display issues in the front-end of a TYPOlight website. While these instructions may seem very obvious to some, my hope is that some users will find this technique helpful. The majority of the steps are not specific to TYPOlight, although a few critical steps in regard to the handling of css data and how it is stored are specific to TYPOlight.

While this tutorial does not actually help in what changes to make in TYPOlight css files, it does help one find the problem quicker and apply the changes properly within the system.

1. Identify the Offending CSS File

This step involves the discovery of which css file contains the code that is causing display issues.

  1. Log into the TYPOlight admin area at for the installation.
  2. Go to _ Layout > Page layout _ and select the layout for the page that has display issues.
  3. Unselect the applied Style sheets one at a time, saving the layout each time and previewing the website to see if the issue has ceased to occur.
  4. Now that the offending css file has been identified, return the layout to its original configuration and save it.

2. Identify the Offending CSS ID or Class

This step involves the discovery of which id or class contains the code that is causing the display issues.

  1. Open the css file that was identified in step 3-3 above in a suitable text editor. This could be from a "web hosting control panel" or an FTP application. I typically download the css file to my local computer and open the file in Notepad or Dreamweaver.
  2. Select a large segment of the file, delete it, save the file and upload it to the hosting environment.
  3. Preview the website to see if the display isses have been resolved.
  4. Continue the process of removing large segments from the css file, saving, uploading and checking until you pinpoint the id or class that is causing problems.*
  5. After determining the exact code that is causing problems, return the css file to its original state and upload it to the hosting environment.

(* While guess and check may not be the most professional method for determining problem code, it is certainly the most stress-free method in this situation.)

3. Apply the Adjustments Properly

This step involves making changes to the css class or id in the proper manner through the TYPOlight Style sheet editor. Steps 1 and 2 of this tutorial are non-specific to TYPOlight, although this step is. As a brief explanation, TYPOlight stores all css data in the database. Whenever changes are made to a style sheet, the system writes the changes to the database and overwrites the existing css file in the root of the installation. Therefore, step 3 is necessary to ensure that both the database and css files are properly updated.

  1. Go to Layout > Style sheet, select the correct css file and edit the selector that needs to be updated.
  2. Make the necessary modification and save the changes.

--- Tutorial created by Ben

Also available in: HTML TXT