Advanced Theming

kriskorn

Hello Vanilla Community!

First of all, I am not a native English speaker, so please apologies any mistakes I make. I have some questions regarding custom Vanilla theming.

I know that the default.master.php controls the entire layout or that's what I read. But how can I control individual items easily ? In WordPress it has been made pretty easy and custom theming isn't very hard. You can create your own HTML and just insert small bits and pieces of PHP code to everything work correctly. In Vanilla default.master.php I saw that there is very little code, but you can't really easily do such stuff. It could be my stupidity, I would be very glad, if you could enlighten me.

For example - {asset name="Content"}, I know this brings the main forum layout, but where can I delete or add things to HTML ? I think I should be using different views templates, but right now it is very hard to navigate through that folder maze. What should I be modifying, the applications folder has 4 different folders and they have almost identical folders inside them ?

And for the last part, I do not want to do any core modifications, I would like to add different files to my design, so you can also update the forum, without breaking the design. Like creating new php files and including them when necessary.

I didn't mean to sound rude, but I am a little bit stuck right now. Have read the documentation and some of the guides, but they haven't been very helpful. I hope you can guide me to the right direction!

Thank you, Kris

Todd

It is possible to modify internal pages, but it's not recommend. We strongly recommend you just modify your default.master and your custom.css. There is a lot you can do with just those two files. We wrap our content in a lot of divs specifically for themers. Vanilla is a lot more complex that Wordpress and thus has more complex theming concerns.

That being said, if you want to override a pages view you want to look at the url of the page you're on to find the view to override. Here is what you need to know.

1. All views are in /applications/{application name}/views/{controller}/{method}.php.

2. In general, everything to do with the forum is in the vanilla application, everything to do with private messages is in the conversations application, and everything else is in the dashboard application.

3. Looking at the url of this page discussion/21384/advanced-theming has a view in /applications/vanilla/views/discussion/index.php. Notice the beginning of the url matching the folder structure.

4. When you see a view you need to copy it to your theme. In the above example you'd copy the view to /themes/{your theme}/views/discussion/index.php. Then you can modify away.

kasperisager

Add in class.themehooks.php as well as custom.js and you'll be able to do almost anything without altering the core views.

kriskorn

Todd, would your answer also suit for registration form ? I'd copy the folder structure to my theme and modify it to my needs, e.g. add more fields and so on ?

kasperisager

@kriskorn said: Todd, would your answer also suit for registration form ? I'd copy the folder structure to my theme and modify it to my needs, e.g. add more fields and so on ?

If you want to add more fields, use the Extended profile plugin instead - it's much, much easier.

Pamela

@kasperisager said: Add in class.themehooks.php as well as custom.js and you'll be able to do almost anything without altering the core views.

thank you, not see it somewhere else :) but please, could you tell us where to put these files, not in my theme root ?

kasperisager

class.themehooks.php needs to go in the root directory of your theme. Using this file you can hook into Garden just like plugins do and you'll therefore be able to do a lot of advanced stuff. You can see an example here: https://github.com/kasperisager/VanillaBootstrap/blob/development/class.themehooks.php

custom.js needs to go into your themes js directory - if you haven't created this directory, feel free to do so. Here you can easily do some JS magic as custom.js automatically gets loaded just like custom.css.

Pamela

great :) I will see your example, many thanks to @kasperisager

kriskorn

Kasper, would it be okay if I'd take your Bootstrap theme as a starting point, if I am creating a theme ? By that I mean, can I use some of the code, if I am not certain how to do it myself.

Thank you, Kris

kasperisager

@kriskorn said: Kasper, would it be okay if I'd take your Bootstrap theme as a starting point, if I am creating a theme ? By that I mean, can I use some of the code, if I am not certain how to do it myself.

Thank you, Kris

Sure, take whatever you'd like! I'd be honored :-)