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.

Pushed

Check your TS template include section.Please try to include your extension at the very last. – Unreel

@AnuBhuvanendranNair my extension template is included very last.But it is not working – Pushed

Answer 1

You have to give each css file you want to include a unique key (e.g. 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

Syck

the includeCSS have to be with a lower case i. I updated the answer – Syck

Make sure your extension is installed, the path is correct and your identifier is unique. Then this works 100%. – Syck

Please give us the order of your static template includes and also the generated head html with the css includes. Third, tell us what css selector is overriding what other selector. – Horseleech

which file in the extension do you add this ? – Lives

Answer 2

"page.IncludeCSS" 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

Urion

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)

Bingham