Question about creating custom.css

sudden156

I've been editing the main style.css of the default theme. Now I've realised I should have created a custom.css. Can I just check a few basic things before continuing?

!) Does custom.css just go in the same directory as the style.css, ie applications/dashboard/design/ ? Does anything else need to be done to activate custom.css or does it override bits of the css from style.css automatically?

2) Can I just find where I have altered style.css and paste those bits into the new custom.css and then replace style.css with a new unaltered one?

Still getting my head round Vanilla so please excuse if this is very basic. Thanks.

hgtonight

Welcome to the community!

You need to create a custom theme to use a custom CSS file. If you are comfortable editing CSS files, this will be very easy.

• Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
• Open the /themes/your_theme_name/about.php file and edit the information to reflect your theme's information.
• Create a custom.css file in the design folder of your custom theme.
• Go to your Dashboard > Themes, and apply your new theme.
• Edit the custom.css file to your heart's content. The custom.css file is added after the base theme's css.

As far as coming up with your current modifications, you need to run a diff of your current style.css file against a fresh copy. If you are unfamiliar with "diffing" we can help you find a program; you just need to supply what operating system you are using.

hgtonight

Welcome to the community!

You need to create a custom theme to use a custom CSS file. If you are comfortable editing CSS files, this will be very easy.

• Copy the /themes/default folder and rename it to your theme name so it sits in the root theme folder like this: /themes/your_theme_name.
• Open the /themes/your_theme_name/about.php file and edit the information to reflect your theme's information.
• Create a custom.css file in the design folder of your custom theme.
• Go to your Dashboard > Themes, and apply your new theme.
• Edit the custom.css file to your heart's content. The custom.css file is added after the base theme's css.

As far as coming up with your current modifications, you need to run a diff of your current style.css file against a fresh copy. If you are unfamiliar with "diffing" we can help you find a program; you just need to supply what operating system you are using.

peregrine

this may help too.

http://vanillaforums.org/discussion/comment/192059/#Comment_192059

and another example

http://vanillaforums.org/discussion/comment/191672/#Comment_191672

by creating your own custom theme and leaving

applications/dashboard/design/ folder intact and unchanged

You will be ahead of the game because when you upgrade your changes won;t be overwritten and you can always go back to a pristine default theme in the event of trouble.

I would suggest restoring the files in applications/dashboard/design/ to their original shape. (you can download core and unzip on a local pc and copy the "prisitine style.css" to your server so it it original.

sudden156

Thank you both, that seems pretty clear. I was confused into thinking I didn't need to create my own theme. But now I see how to do it I realise a theme can be something as basic as just changing, say, the font.

I haven't made many changes to style.css and I think I can remember what they were, but I've never heard of diffing before. I am on Windows 7, it would be interesting to look in to that.

peregrine

there is probably some file compare. you could also download some some unix like utilities that run on windows.

https://www.google.com/search?client=ubuntu&channel=fs&q=gnu+unix+utilities+for+windows&ie=utf-8&oe=utf-8

hgtonight

Diffing is the process of finding the differencing in files via a program. The original, AFAIK, was a Unix utility called diff.

I highly recommend WinMerge (http://winmerge.org/) for diffing/merging files on windows. You can run a full folder compare of your current install against a fresh copy to see exactly what you modified an in which files.

sudden156

So in themes/my_theme_name/design there should only be my custom.css and the favicon? Is that right?

Or do I need to also copy over style.css and vanilla.css, which is the impression I get from the README.txt in themes/default

peregrine

if you read my links above, it should explain. The pamela link is copying everything. The avantmike is just copying and editing about.php. both techniques will work. The pamela way is better. You can create your own favicon and replace it.

theoretically all you need is a correct about.php.

Anything you add themehooks, custom.css, favicons, etc. will override the default theme.
No you don't need to copy style.css or vanilla.css.

ignore the README.txt in themes/default

sudden156

Great thanks. That's what I thought from reading your Pamela post and hgtonight, but that README.txt file had me confused.

Very helpful forum this.

peregrine

awesome. the README.txt you should have been updated on every core release. .

alas!

sudden156

One further thing. Instead of creating a custom.css, could I just place my altered style.css in themes/my_theme_name/design and put a new unaltered style.css in applications/dashboard/design/ ?

Would that have the same effect as a custom.css, the altered style.css in my theme overriding the original?

peregrine

Would that have the same effect as a custom.css, the altered style.css in my theme overriding the original?

try it. probably will.

But, the idea is just to have a custom.css with just the changes needed. So you KNOW exactly what you changed (which you don't currently know:) that overrides the original style.css. That way it is easier to not run into mysterious complications and to debug.

just find the differences as pointed out above, you will be happier in the long run.

sudden156

Yes, I agree and will make a custom.css, much neater. I was just curious whether it could be done the cheap and nasty way too as I've already messed around with style.css.

vrijvlinder

@sudden156 there are several tutorials covering the issue .

I was just curious whether it could be done the cheap and nasty way too as I've already messed around with style.css.

No that is as nasty as it can get because it can render any other theme you wish to try , useless. It creates more work and causes problems. Then you can also lose all your changes. You risk editing the wrong file.
Basically you make more work for yourself in the long run.

http://vanillaforums.org/discussion/24813/how-to-go-about-editing-the-default-theme

Also I recommend trying out several themes so you can learn how they are put together and emulate them.

peregrine

when in question. try it. you can always undo it.