How do i add a custom CSS stylesheet in Magento?

Question

I've been trying to link a custom CSS style-sheet in my Magento theme, but it's not applying the CSS and I'm getting an error in the Chrome Console with a Syntax error: Unexpected * ..? I guess it's misinterpreting the CSS for a JS file but I don't know why.

Here is my code:

 <script type="text/javascript" src="<?php echo 
 $this->getSkinUrl('css/custom.css') ?>"</script>

Duplicate [Add css to head from template file in Magento][1] [1]: stackoverflow.com/questions/8739793/… — Nishant Mendiratta
– Nishant Mendiratta, Commented Apr 16, 2015 at 9:47

Thijs Kempers · Accepted Answer · 2015-04-16 09:45:24Z

3

If you want to use it for one time in a .PHP file simply use:

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('customstyle.css') ?>" />

And BTW: Don't use a script tag for a stylesheet.

If you want to use the stylesheet a lot more. Then you have to make a block in your layout.xml

answered Apr 16, 2015 at 9:45

Thijs Kempers

4696 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Menno van der Krift Over a year ago

A derp my bad, didn't even see it. It was sepose to be a <link> tag ofcourse.

Thijs Kempers Over a year ago

If this helped you please mark my answer as best :D

PixieMedia · Accepted Answer · 2015-04-16 09:43:42Z

0

You need to add it in your themes 'page.xml', which should be here;

MAGE ROOT /app/design/frontend/XXX/YYY/layout/page.xml

Where XXX/YYY are the path to your theme.

Within this file, find this block;

<block type="page/html_head" name="head" as="head">

And add your css like this;

<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>

Refresh your cache afterwards - including the css/js cache if you have merge enabled.

answered Apr 16, 2015 at 9:43

PixieMedia

1,5481 gold badge10 silver badges15 bronze badges

2 Comments

Menno van der Krift Over a year ago

I'm kind of a Magento newbie but it seems to work fine in the head.phtml. Why should i add the custom CSS in the page.xml? I'm not trying to start a fight or something, i want to get to know Magento better and learn from this.

PixieMedia Over a year ago

hi no problem , this is just the standard way to add css/js to your magento themes. This way you can also exclude them from certain pages if you need to.

Kevin Andrid · Accepted Answer · 2015-04-16 09:50:08Z

0

remove (script) tag from the code.

<link rel="stylesheet" type="text/css" href="<?php echo $this->getSkinUrl('custom.css') ?>" />

answered Apr 16, 2015 at 9:50

Kevin Andrid

1,9811 gold badge16 silver badges28 bronze badges

1 Comment

Kevin Andrid Over a year ago

@Thijs Kempers-from where i copied ?

Collectives™ on Stack Overflow

How do i add a custom CSS stylesheet in Magento?

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related