Adding Custom CSS for an Extension

This How To will show you how to access an extension's CSS file, modify it, upload it, and point the extension to the new file.

Although modifying the CSS of an extension is not terribly difficult, this How-To presumes that you have a grasp on CSS and can modify the code.

For this How To, we will modify the default CSS of the WEC Assessment extension. However, the instructions apply to most extensions.

  1. First, we need to have access to the original CSS file.

    Scroll down to the Ext Manager Module and select the extension you want to modify from the Loaded Extensions form.
  2. Select Edit from the drop down menu and then scroll through the files to find the file */css/setup.txt.
  3. Click on the file's link and save it to your local computer.
  4. Once you've saved it, open it with a text editor such as WordPad or Notepad and edit it as needed.

    Note, you will need to delete the TypoScript heading before you save the file in order for the new CSS file to work.
  5. When you've finished modifying the file, save your work and return to TYPO3.
  6. Next, upload the newly modified CSS file onto your server.

    Using the Filelist Module, upload the file into the ext-templates directory.
  7. Once the file is uploaded, it's time to tell the extension how to find the file. To do this, use the Template module. Navigate to either the root page of the web site, or to the Template Record on the page where the extension's plugin is installed.
  8. Make sure the Info/Modify form is selected from the drop down menu, then click on the Setup edit icon and scroll to the bottom of the field.
  9. Next, add the TypoScript commands needed to point to your file. There are three lines of code necessary.
  10. plugin.tx_wecassessment_pi1._CSS_DEFAULT_STYLE >

    This tells the extension to ignore the default CSS. Notice the key-indentifier (tx_wecassessment_pi1) in the code. This will change based on the extension you are referring to.
  11. page.headerData.20 = TEXT

    This line tells the extension that the data contained in headerData20 should be treated as a text file.
  12. page.headerData.20.value = <link rel="stylesheet" type="text/css"href="fileadmin/ext-templates/assessment.css" />

    And this long SINGLE line of code tells extension where to find your new CSS file. You will need to change the name in the text to match the name of your CSS file.
  13. Once you've entered the text, click the Update button. The new CSS file will go into effect immediately and the results will be seen in the Frontend.
  14. If you need to modify your CSS file again, you may do so in the Filelist Module, or you can update the file on your local computer and reload it into the ext-template directory (be sure to click the "Overwrite" check box if you do this).

Tutorial

 Movie Tutorial Click to see tutorial for: Adding Custom CSS for an Extension