Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 2 of 2
What is the best way to add custom css
 
ikuzyk
Magento Team
 
Avatar
Total Posts:  60
Joined:  2007-08-09
Ternopil, Ukraine
 

you can put it in boxes.css

 
Magento Community Magento Community
Magento Community
Magento Community
 
exerion
Jr. Member
 
Avatar
Total Posts:  8
Joined:  2009-07-01
 

I also don’t have a styles.css anywhere in my Magento install.

I would really like to find where Magento loads the CSS files so I can load a custom CSS file last.  This way it will overwrite what has previously been set.  Instead of editing all the CSS files I can just make changes to one and easily keep track of what changes I have made.

Any help is greatly appreciated smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
jeissler
Jr. Member
 
Total Posts:  23
Joined:  2009-07-18
 

@exerion

Sorry for any confusion. I updated my posts to clarify for future reference. If you are using the blank theme you would have styles.css, but when using the default theme it is boxes.css. You can use the import method in the top of boxes.css:

@import url(’your_new.css’);
or use the addCss method in the top of your page.xml file:
<action method="addCss"><stylesheet>css/new_style.css</stylesheet></action>
Either will work, but I would recommend the first. My method to simplify things for editing CSS has been to create a few custom CSS files. One for my custom navigation, one for buttons, etc. When I change things from the default stuff I cut the properties from boxes.css and paste into a custom.css file.

There are so many css properties I found it cumbersome to use just one or two files. I use half a dozen or so that are highly specific and named for their particular purpose. Hope this helps.

 
Magento Community Magento Community
Magento Community
Magento Community
 
bcarl314
Jr. Member
 
Total Posts:  5
Joined:  2008-09-29
 

Ok, I added this line to my page.xml file…

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

And it generates the following in my page:
<link rel="stylesheet" type="text/css" href="http://IP_ADDRESS/skin/frontend/INTERFACE_NAME/default/css/custom.css" media="all" />

Why doesn’t it generate
<link rel="stylesheet" type="text/css" href="http://IP_ADDRESS/skin/frontend/INTERFACE_NAME/THEME_NAME/css/custom.css" media="all" />

???

 
Magento Community Magento Community
Magento Community
Magento Community
 
David Oliver
Sr. Member
 
Avatar
Total Posts:  177
Joined:  2008-04-16
Cologne, Germany
 
bcarl314 - 28 September 2009 01:35 PM

Ok, I added this line to my page.xml file…


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

And it generates the following in my page:
<link rel="stylesheet" type="text/css" href="http://IP_ADDRESS/skin/frontend/INTERFACE_NAME/default/css/custom.css" media="all" />

Why doesn’t it generate
<link rel="stylesheet" type="text/css" href="http://IP_ADDRESS/skin/frontend/INTERFACE_NAME/THEME_NAME/css/custom.css" media="all" />

???

Have you inserted the name of your themes directory in Admin Panel > System > Configuration > Design > Skin (Images / CSS)? (Or in the Default field if you’re working from an entire copy of a theme.)

 
Magento Community Magento Community
Magento Community
Magento Community
 
g0rdian
Member
 
Total Posts:  65
Joined:  2011-12-04
 

Adding your custom CSS through XML is great, but it leaves a trail. If you want to be a bit more secretive about your styling then @import is the way to go. It will still be visible to others, but it would take a seasoned developer or a novice with some serious determination to determine where all your css is coming from.

For the life of me, I could not get my @import to work.

Then I figured out that it must be at the absolute top of the styles.css (or other applicable) file. Before the comments, before any Magento notices. It must be the absolute first line(s).

 
Magento Community Magento Community
Magento Community
Magento Community
 
shankaradodis
Member
 
Total Posts:  47
Joined:  2011-09-05
 

Hi,

Best way of editing default template is by creating a new theme and copy your styles.css there and edit it

this will prevent loss of work at the time of upgrading

 
Magento Community Magento Community
Magento Community
Magento Community
 
collinssolutions
Sr. Member
 
Total Posts:  79
Joined:  2008-07-09
USA Arkansas
 

has anyone got this to work. No matter what i put into config-design-themes i still get

<action method="addCss"><stylesheet>css/jquery.fancybox-1.3.1.css</stylesheet></action>

produces

skin/frontend/base/default/css/jquery.fancybox-1.3.1.css

 
Magento Community Magento Community
Magento Community
Magento Community
 
bxck75
Jr. Member
 
Total Posts:  9
Joined:  2012-02-29
 

you can put your stylesheet include in menu.css or boxes.css

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 2 of 2