Magento

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.

Dale Grim - 14 May 2008 02: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.

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

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

This should help:

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

number25 - 06 November 2008 07: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.

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…

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,

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.

BarneyHall - 27 May 2009 10: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

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!

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…

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:

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.

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

Please help me I’m new to Magento.

(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.

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.

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?