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 1 of 2
What is the best way to add custom css
 
Dale Grim
Jr. Member
 
Avatar
Total Posts:  14
Joined:  2008-05-14
 

I wanted to change the css for the default theme.  I thought the right thing to do would be to add/override styles in custom.css.  Looking at page.xml, I found that by default, custom.css isn’t ever loaded.  So, I added a load of custom.css to a copy of page.xml stored in my theme’s directory.

BUT…

1) Do I really have to copy all of page.xml just to add one addCss command?  I was hoping there would be a way to reference the default page.xml with just my little add

2) Is this really the best way to make css changes?  I’m trying to create my theme as the absolute smallest set of changes to the default theme in order to keep my site as upgradable as possible.

 
Magento Community Magento Community
Magento Community
Magento Community
 
dimi_ned
Jr. Member
 
Total Posts:  22
Joined:  2008-08-01
 
Dale Grim - 14 May 2008 01:24 PM

I wanted to change the css for the default theme.  I thought the right thing to do would be to add/override styles in custom.css.  Looking at page.xml, I found that by default, custom.css isn’t ever loaded.  So, I added a load of custom.css to a copy of page.xml stored in my theme’s directory.

BUT…

1) Do I really have to copy all of page.xml just to add one addCss command?  I was hoping there would be a way to reference the default page.xml with just my little add

2) Is this really the best way to make css changes?  I’m trying to create my theme as the absolute smallest set of changes to the default theme in order to keep my site as upgradable as possible.

Hello there,
I just saw your message and I must say I suffered since I modified heavily the “boxes.css” of the default theme (without adding any new identifiers, but still) in version 1.1.3. By looking at the forums I realized that if you upgrade to 1.1.6 the default theme has a new version of the “boxes.css” which will make things messy if I go ahead and upgrade.
I think the right thing to do is to use indeed the custom.css. The design guide for magento suggests that actually:

c. Adding custom stylesheets and js libraries (part I)
Any external stylesheet files (css) or javasript/ajax libraries (js) that we want to include in our new project must be also
copied to proper folders.
Stylesheets
Copy the files to /skin/frontend/new_template/default/css folder
Don’t forget to include new file in styles.css file. We can do this by adding a

@import url(’your_new.css’);

after

@import url(’custom.css’);

Did you perform this action? I think that looking at page.xml is the wrong place to search for this import. Styles.css is the right place to add any imports.

Let me know how it went.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mrphp
Jr. Member
 
Total Posts:  18
Joined:  2008-06-01
 

try to use the blank theme and you’ll amaze how easy to customize the css

regards,
Mark
Collecta - your collectables store
http://collecta-mania.com.au

 
Magento Community Magento Community
Magento Community
Magento Community
 
number25
Member
 
Total Posts:  64
Joined:  2008-07-12
 

why should adding a style sheet be this difficult lol. I mean its not difficult, but yet it is for a stylesheet

 
Magento Community Magento Community
Magento Community
Magento Community
 
gabbs
Jr. Member
 
Total Posts:  13
Joined:  2008-12-22
 

This should help:

http://www.magentocommerce.com/wiki/how-to/designing/designing-for-magento

 
Magento Community Magento Community
Magento Community
Magento Community
 
jballotti
Guru
 
Avatar
Total Posts:  339
Joined:  2008-04-20
Chicago area
 
number25 - 06 November 2008 06:35 PM

why should adding a style sheet be this difficult lol. I mean its not difficult, but yet it is for a stylesheet

It’s not difficult at all. Go to my website and click on the book cover to go to the product page. You will find a link there under “Excerpts” for adding custom CSS files to your pages.

cool smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
BarneyHall
Jr. Member
 
Total Posts:  26
Joined:  2009-03-09
 

I found I could add my own CSS by copying and amending a line already linking CSS documents within the “page.xml” document.

Basically the new line reads:

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

This now turns up when the “head.phtml” document is loaded.

Hope that’s helpful…

 
Magento Community Magento Community
Magento Community
Magento Community
 
beefish
Jr. Member
 
Total Posts:  15
Joined:  2009-05-26
 

I followed the step mentioned above, but could not make it work. Here is what I did:

create my new_style.css and place it under (since I am using modern template)
\frontend\default\modern\css

inside
\app\design\frontend\default\modern\layout\page.xml

I appended
<action method="addCss"><stylesheet>css/new_style.css</stylesheet></action>
after
<action method="addCss"><stylesheet>css/clears.css</stylesheet></action>

Did I miss anything, thank you very much!

Cheers,

 
Magento Community Magento Community
Magento Community
Magento Community
 
BarneyHall
Jr. Member
 
Total Posts:  26
Joined:  2009-03-09
 

Yes that’s pretty much exactly how I’ve done it.

The only thing I can think of is that you need to disable the system cache?

Login to admin > System > Cache Management > Under “Cache Control” choose “Disable” from the “All Cache” drop-down options > then save.

 
Magento Community Magento Community
Magento Community
Magento Community
 
beefish
Jr. Member
 
Total Posts:  15
Joined:  2009-05-26
 
BarneyHall - 27 May 2009 09:36 PM

Yes that’s pretty much exactly how I’ve done it.

The only thing I can think of is that you need to disable the system cache?

Login to admin > System > Cache Management > Under “Cache Control” choose “Disable” from the “All Cache” drop-down options > then save.

Thank you so much, it worked for me.

Also, I found the other way which works too, that is adding “@import url(new_style.css);” in the beginning of boxes.css file

 
Magento Community Magento Community
Magento Community
Magento Community
 
BarneyHall
Jr. Member
 
Total Posts:  26
Joined:  2009-03-09
 

That’s a nice approach, although I guess you need to watch the path to your CSS there..??

Nice work man. Many ways to skin this cat!

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

Thanks guys… I know a good bit of xhtml and css, but Magento is a new animal. I was previously using this method which seemed to work great…

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

But then I banged my head against the wall for a few hours trying to get relative image paths to work for css background images. After reading this post I went and read very carefully the provided links… And found relative paths work just fine if you insert this:

@import url(’custom.css’); 
@
import url(’your_new.css’);

into the top of the (styles.css for blank theme) or (boxes.css for default theme) file. No other linking to the new custom css file was necessary. Great work leading me to that solution. The only other gum in the works was I had a “my_css” folder inside the css folder and had to remove it to get the relative links to work.

Thanks to everyone who is adding to the community! Solution tested in 1.3.2.2.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Nickeluli
Jr. Member
 
Total Posts:  2
Joined:  2009-07-28
 

I don’t have a styles.css file? Where do I put the @import url… information?

Please help me I’m new to Magento.

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

(styles.css for blank theme) or (boxes.css for default theme) is in the folder located at: skin>frontend>default>your_theme>css. You put that code in the top of the file after the comments as shown in the snippit. Hope this helps.

* @copyright  Copyright (c2008 Irubin Consulting IncDBA Varien (http://www.varien.com)
 
* @licensehttp://opensource.org/licenses/osl-3.0.php  Open Software License (OSL 3.0)
 
*/
 
 @
import url('custom.css');
 @
import url('main_btns.css');
 @
import url('vert_menu.css');
 
/* Layout ================================================================================= */
.wrapper {}
.page {
    width
:1050px;
    
margin:0 auto;
 
Magento Community Magento Community
Magento Community
Magento Community
 
jeissler
Jr. Member
 
Total Posts:  23
Joined:  2009-07-18
 

Nickeluli-

Also, put your custom(.css) files in the css folder where (styles.css for blank theme) or (boxes.css for default theme) is located.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Nickeluli
Jr. Member
 
Total Posts:  2
Joined:  2009-07-28
 

I don’t have the file styles.css in skin/frontend/default/default/css

I have these files
boxes.css
clears.css
ie7minus.css
iestyles.css
menu.css
print.css
reset.css

Can I put this is in any of these files instead?

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