Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
How to create a new theme? (instructions don't seem valid)
kramer65
New
Hello,
I just found Vanilla Forums yesterday, and so far it looks like love at first sight.. :-)
I now want to build a new theme, so I tried following the instructions in themes/default/README.txt. In that file it says:
- Create a "design" subfolder and copy /applications/dashboard/design/style.css
and /applications/vanilla/design/vanilla.css into it.
I can find the first file, but in the folder 'applications/vanilla' I do not see a folder named 'design'. Am I becoming blind, or is this instruction wrong/outdated?
All tips are welcome!
Tagged:
0
Comments
@kramer65
Follow the instructions here:
http://vanillaforums.org/docs/themequickstart
If you're an experienced css user ignore the next bit!
I created a theme for new users called annotated_css here:
http://vanillaforums.org/addon/annotated_css-theme
which shows the main css rules you need to change to edit your theme. As you might imagine, the rules in the custom.css file are annotated.
In addition, @422 (a professional developer) has a walkthrough here:
http://vanillaforums.org/discussion/19915/deploying-a-new-forum-and-adding-a-theme-for-everyone/p1 and a theme to help here: http://vanillaforums.org/addon/cleanskin-theme
Firebug for Firefox, or similar tools in Chrome or IE, really help you to get an idea of what elements you need to make specific changes.
Remember, the custom.css file only has to contain the rules you want to change, not the entire set of Vanilla css rules.
Have fun!
there is a basic structure to vanilla
controllers
models
settings
views
design
js
locale
etc.
It is good practice and in most cases to mimic the structure.
for themes the basic structure
design
js
views
if any of the requisite directories don't exist and you need to put a file like a js file or a css file or additional php files you need to create that directory.
take a look at directory structure in wiki and documentation
e.g. by convention in themes
put a new custom.css file
in you
yourtheme/design directory
mynewtheme/design/custom.css
I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.
@whu606
I had a look at the themequickstart, and copied style.css from '/applications/dashboard/design' to 'themes/myowntheme/design/' and applied myowntheme on the backend. I then tried to change things in 'themes/myowntheme/design/style.css', but I am pulling my hair out, because things seem to behave completely random to me.
For example, in the following code:
I changed white to blue. This did not appear to change anything. After about 10 minutes though, the background suddenly changed to blue as I hoped it had would. So I changed blue to green in the file, and hoped for the background to change to green. The background of my site remains to be blue however. So I removed the style.css file altogether and the site was back to default again (white background).
So I uploaded the style.css file again containing the 'background: green;'. And to my surprise, the website background is blue again?! I simply do not understand why it remains blue even though I already changed the background color to green ages ago.
I also tried using basic html color codes (#000000, #008000, #0000FF etc.), cleaned my browser cache, tried on 3 different computers (to avoid any cache within my pc) using Windows, Linux and Mac, and the background remains blue while the file clearly says 'green'.
I also tried the annotated_css-theme (thanks for building that) and the Cleanskin theme, but I remain to have the same trouble. Although I am not an HTML guru I am pretty comfortable building websites (my field is mainly php/mysql and also some python, but editing html/css is normally not a problem).
Would you (or anybody else) know what could be the source of my trouble here? Is there maybe some cache mechanism in Vanilla which only updates the css file to be served every x-number of minutes? Or is there anything else which I am doing horribly wrong?
If anybody wants to check my test site, it's on hkramer.nl/vanilla and the custom css file is at hkramer.nl/vanilla/themes/myowntheme/design/custom.css
ps. I just checked the site one last time before posting this, and suddenly the background is red. I truly think I am going mad :S Any help would be welcome!
Are you using minify
There was an error rendering this rich post.
@kramer65
As @422 says, minify might well cause this.
If you aren't using minify then I would suggest using IE Ctrl + D to clear the cache for your domain when you make a change.
If you can see the change then, then your server is set up to cache pages to the browser, and you'll need to clear your browser cache each time to see changes.
Just tried playing with his theme.
It is very very strange.
The issue could be declaring proper selectors.
background:#000;
background-color:#000
not sure whats going on, but very odd.
I would rename the current custom.css file to custom-old.css
Create a new custom.css file and put in it.
body {background:#ff9900;}
see what happens
There was an error rendering this rich post.
@kramer65
I copied your css file into a theme on my local test server, and changes were effected immediately, so I can only conclude it is a cache issue.
Alright, I indeed had minify enabled. So I disabled it, but this didn't solve anything. So I emptied the custom.css file and just put in the suggested 'body {background:#ff9900;}'
This works fine, so there is no trouble with the cache anymore. When I copy/paste the rest of style.css in there however, I get into trouble again. To be sure that nothing else I might have changed in my install interfered, I did a totally new installation at http://www.hkramer.nl/vanilla2 . In there I just made a new theme and copied style.css and renamed it to custom.css. I then changed
To
(See this file here for the result).
Again, no green background. When I empty the whole file and only leave this line in there:
the background indeed changes to green.
So I guess something in the rest of that file messes with this background thing. It is a completely new and clean installation on a simple hostgator shared hosting account.
Would anybody have any clue where this goes wrong? Is this a bug I found, or am I myself still doing something wrong?
@kramer65
What happens if you append !important to the rule?
body { line-height: 1; color: black; background: green !important; }If that doesn't force the change to show, a couple of other things to try.
Do you have any other plugins enabled?
If so, try turning them all off, and seeing if that clears the problem.
If it does, then you just need to turn them on again one at a time to see what is causing the clash.
If it isn't plugins, the only other suggestion I have would be to copy in parts of the css file sections at a time, to see if you can isolate where the problem is coming from.
Alright. I found the issue. I simply started taking things away from the css file until I found the problem maker. As far as I can see now, the problem is that the boby background is defined in two places in style.css.
Line 46:
and line 74:
(the code gets minimised to one line, even though it are multiple lines, but the line numbers point to the relevant code..)
I wouldn't know why you would define the body background twice since it only creates confusion (as this thread proves..
). Or could there be a valid reason why you would define the body background twice?
If not, should I mention this somewhere so that it can be removed from the main trunk?
@kramer65
Which theme is it?
@whu606
It is the basic theme file from /applications/dashboard/design/style.css
I dont actually know css or htmI so made it from default theme this mess. I dont use it anywhere just playing around in local xampp