Tweet
Updating custom style templates and variables is an important thing to do after upgrading your forum. When you create a new style, templates get loaded from something called a MASTER style. The MASTER style is the parent of all your styles, and its represent the default vBulletin style which is actually imported from the time you install/upgrade your forum. By editing your templates, adding codes, changing the HTML, or replacing different parts on templates you’re doing the customizing.
Once you upgrade, you need to update your customized templates. Simply because if you do not do that, some sections of your vBulletin may not function. Every upgrade comes with bunch of templates edits, including modified variables & HTML codes, new hooks, and other syntax. In this article I will try to illustrate how to do that in detailed steps.
Notes:
- vBulletin do not offer support in the ticket system for custom coding issues, including template customizations. Most problems have issues with styles can be resolved with updating or reverting custom templates. If you asked for support in the ticket system, you will only get answers that asking you to reverting a specific template or group of templates which you don’t want to do in the first place. That because if you did it, the templates in your custom style will become equivalent to the templates of its parent style, that will solve the compatibility problem but you will lose any customization you did to your style.
- It is recommended to do the updates on a local host or a test site before upgrading the forum in your production site. So, you will just then upload your updated style without any problems.
- In order to edit templates you should have knowledge of HTML and CSS. Otherwise, if you bought your style from a third party or if someone designs the style for you, ask that particular identity to update your style to be compatible with your vBulletin version. Find the documentation on how to edit a template here.
- This article illustrates how to update custom templates in vBulletin 4 and assumes that the user has a heavily customized style.
Before proceed, please make sure you read notes carefully.
First Step: Find Updated Templates
The first step is to find which templates actually need update. You not need to update each customized template, you only have to update the ones need update. So, there are two different ways to find updated templates:
- There is a great built-in tool that does the required comparison between the default templates and your custom style templates and its run during the upgrade. Look at this blog for more details. You may notice that after an upgrade, alert message shown in your admin control panel and if you go to: [Styles & Templates] -> [Find Updated Templates]; you will find the list of templates that required your attention.
Please note you only can use this if your style is already uploaded in your forum during the upgrade. Otherwise, you can’t use this method due to this minor bug.
. - The second way is a little complicated. To find which templates need update, you have to go over all vBulletin releases announcements in Announcements forum. To clarify, if your custom style version is 4.1.7 and you upgrade to version 4.2.0, then you have to look at all announcements for versions 4.1.8, 4.1.9, 4.1.10, 4.1.11, 4.1.12, and 4.2.0. You need the part where “removed and modified templates” listed. Take the list and go to your custom style, find all related templates and prepare yourself for the second step.
Second Step: Comparing Templates
Depend on which way you find the updated templates you may precede in this step. You have to go with your custom templates one by one. The purpose of comparing is to find out how to update your templates. Also you may need to compare between 3 templates: your custom template, old default template, and current default template depend on your customization level.
- If the comparison has been done for you, go to “Find Updated Templates” page and you will see something like this:
merge_find.png
Figure 1 | Admin CP - Find Updated Templates Page
Obviously, [revert] option is available for you and it is very easy to perform. Just click and confirm, then your style will be compatible but we are not going to do that so focus please. You have to click on [View Highlighted Changes] and it will give you the Comparing versions of your template.
compare_version.png
Figure 2 | Admin CP - View Highlighted Changes Page
This way of comparison is not perfect for heavily customized templates, because sometimes - due to big differences - it will not give you what exactly has been added to the template. And the best way to know that is by comparing old version default template with the current version default template – can be achieved with the other comparing ways.
. - Another way to compare is by using 3 way merge software. There is a lot out there, commercial and open source, just search the internet to find what suit you. Here are some samples: Beyond Compare, Meld Diff Viewer, P4merge, Source Gear Diff Merge, and you can find more here.
First you will need to compare your custom style with the default one. You can get the default style by going to the template editor, and pressing on [Show Default] link. In the example below I upgraded from version 4.1.12 to 4.2.0 and now comparing the 'navbar' template. Here I will show you how it’s will look like in Araxis Merge:
araxis_default_custom.png
Figure 3 | Merge Software - Compare Custom With Current Default
As you see this is not working very well for you to know what is happening, so we are going to compare the old default with the current default. You can get the old default by pressing on [Show Default] from template editor before the upgrade. Or better you can get it from your old vBulletin version. Open the package and go the Upload/install/ directory you will find all templates listed on vbulletin-style.xml file. See the comparison:
araxis_default_default.png
Figure 4 | Merge Software - Compare Old Default With Current Default
By doing this step, easily you can find what exactly removed and what added to the template. And then, all what you have is to decide how you will update your custom template and what changes actually happened that necessarily need your attention. Also this consider if you already have customization in the removed part.
. - The last way to compare is to do it manually. Unless you are hybrid coding expert designer or have some sort of skills that helps, you can’t do it this way. I know someone who can compare just by looking and he is doing this fast!
Third step: Updating Templates
This is the most exciting part of work. Now you are ready to update your template. You can do this using any HTML editor, the template editor, or your merge software editor. Here I am going to show you how you can deal with some sort of changes such as adding a navigation manager to the system and how that affects your work of updating templates.
Let’s continue with the example I started before with the ‘navbar’ template. Please note, you mustn’t follow this example because I’m working on a different custom template than yours. As shown in the figure 4, it’s obviously a lot is missing from the ‘navbar’ and just one line added:
HTML Code:
{vb:raw navigation}
Next is re-customizing the navigation tabs. Our reference in this is the removed part of ‘navbar’ template we saved before. By going to ‘navbar_tabs’ template, we can apply our customization again for the tabs.
_________________
-------------
Last to say, we learned that the custom style needs to be retrieved or updated after an upgrade. Also, we learned how to update our custom styles by finding the updated templates, then know how to compare between different versions, and finally updating our styles.
I thank you for reading this, and want to say that in compliance with the Chinese proverbs “Give me a fish and I eat for a day. Teach me to fish and I eat for a lifetime” that I’m not going to give anyone fishes; I will not update your style templates for any reason. Otherwise, if you have any question regards what I wrote above I will be happy to answer it.
.
Comment