How to include a custom CSS file in TYPO3

Question

I need to build an Extension in typo3 7.6.I include a css file in setup.txt using

page.IncludeCSS = Ext.Path_to_css_file.css

But the styles in my css file is override by some other custom styles.How can I prevent this.Any Idea? I am new to typo3.Please help me.Thank you in advance.

Answer 1

You have to give each css file you want to include a unique key (eg myCssFile1 ). Also use a colon after the EXT: . So the correct way of including a CSS file with TypoScript would be

page.includeCSS.myCssFile1 = EXT:my_ext/Path/to/css_file.css

Answer 2

"page. I ncludeCSS" is wrong, should be "page.includeCSS" followed by your custom unique array name like:

page.includeCSS {
    styles=Resources/Public/Stylesheets/style.css
    form=fileadmin/css/form.css
    jqueryui=Resources/Public/Javascript/ui/jquery-ui.min.css  
}

regards Pete

Answer 3

Another way to do that, dirty but without editing an extension template:

lib.additionalStyles = HMENU
lib.additionalStyles {
  special = rootline
  special.range = 0|-1
  includeNotInMenu = 1
  1 = TMENU
  1.NO {
    doNotShowLink = 1
    before.cObject = FILES
    before.cObject {
      references {
        table = pages
        uid.data = field:uid
        fieldName = media
      }
      renderObj = TEXT
      renderObj {
        if.value = css
        if.equals.data = file:current:extension
        dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
      }
    }
  }
}

Using HMENU here because FILES object can't provide same inheritance as including through template method. But if you don't need inheritance you can do this:

lib.additionalStyles = FILES
lib.additionalStyles {
  references {
    # To use media from current page only
    table = pages
    uid.data = field:uid
    fieldName = media
    # To add some inheritance if media for current page wasn't set
    data = levelmedia: level[, slide]
    # depending on level value you can take media from root page,
    # from current page, from any level upper in tree, or first
    # existing media item starting from current page to root.
    # So you can't collect media from all parent pages, only
    # from current or one of the parents.
  }
  renderObj = TEXT
  renderObj {
    if.value = css
    if.equals.data = file:current:extension
    dataWrap = <link rel="stylesheet" type="text/css" href="/{file:current:publicUrl}" media="all">
  }
}

Then import object to headerData:

page.headerData.10 < lib.additionalStyles

or (if you are including JS)

page.footerData.10 < lib.additionalJS

Now you can just create a relations to needed files on Resources tab in page settings. Not sure if all versions of Typo3 allows css and js for relations, but 6.2-8.7 does)