Question about creating custom.css
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.
Best Answer
-
hgtonight MVP
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.
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
6 - Copy the
Answers
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.
/themes/default
folder and rename it to your theme name so it sits in the root theme folder like this:/themes/your_theme_name
./themes/your_theme_name/about.php
file and edit the information to reflect your theme's information.custom.css
file in the design folder of your custom theme.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.
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
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.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
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.
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
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
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.
Search first
Check out the Documentation! We are always looking for new content and pull requests.
Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.
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
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
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
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.
awesome. the README.txt you should have been updated on every core release. .
alas!
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
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?
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.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
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.
@sudden156 there are several tutorials covering the issue .
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.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
when in question. try it. you can always undo it.
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.