Tweet
Customizations
Having a separate master mobile style allows an easier and more efficient handling of mobile style customizations:
- Templates - The mobile style has its own set of templates, that can now be customized starting from the master mobile style template version. This also means that reverting a mobile style template will revert it to master mobile style version, rather than to the standard master style version which would have been problematic as the standard style templates are different from the mobile style ones. Also, mobile style template customizations won't be lost when upgrading as you don't need to re-import and overwrite your mobile style at each upgrade anymore.
- Template Merge - When running an upgrade, changes to your customized mobile style templates will be merged automatically (if possible), just like it happens with the standard styles. If the merge of any mobile style template encounters conflicts, they will be listed in the Find Updated Template page.
- Stylevars - The mobile style has its own set of stylevars, however it is very limited and basically allows customization only of image paths. Other than these, the mobile style is not really customizable via stylevars. This is a pre-existing limitation we will address in a different release.
- Replacement Variables - The mobile style replacement variables are now independent from the standard style ones. A replacement variable can only be applied to a standard style or to a mobile style, it is not possible to have "shared" replacement variables (if you need the same for both standard and mobile styles, just add it to both).
- Custom Products - Custom products support the inclusion of both standard and mobile style templates/stylevars. If you're creating a product, and want it to have an effect also on mobile styles, you can (and will need to) add separate stylevars and templates for the mobile styles. In the same way, you can have a product which has an impact only on mobile styles by including only mobile style stylevars/templates in it.
Installing/Upgrading the Mobile Style
First, a premise. Up to 4.1.10, a style was considered a mobile style if and only if it was set as either Default Style for Old Mobile Browsers or Default Style for Modern Mobile Browsers in Admin CP -> Settings -> Options -> Style & Language Settings. If you had both these options set to 'None', you didn't have a mobile style.
Mobile Style Install
If you're doing a new install, or are upgrading an existing install that didn't have a mobile style, a "Default Mobile Style" will be created in the mobile style list, and it will be automatically set as both 'Default Style for Old Mobile Browsers' and 'Default Style for Modern Mobile Browsers' (in Admin CP -> Settings -> Options -> Style & Language Settings).
Mobile Style Upgrade
If you're upgrading an existing install, that had a mobile style, from 4.1.10 (or lower) to 4.1.11 (or higher), a "Default Mobile Style" will be created in the mobile style list, and any style that was set as either Default Style for Old Mobile Browsers or Default Style for Modern Mobile Browsers (in Admin CP -> Settings -> Options -> Style & Language Settings) will be moved to the mobile style list, effectively becoming a mobile style.
Note that if you were previously using the normal Mobile Style provided by vBulletin, you need to revert all its templates after it is moved to the mobile style list, or they will all show as customized and never be updated automatically during upgrades.
Rather than the above, you may also just delete the Mobile Style you had since before the upgrade, and use instead the "Default Mobile Style" added by the upgrade (also setting it as 'Default Style for Old Mobile Browsers' and 'Default Style for Modern Mobile Browsers'), but it is not recommended to do so as it may cause some oddities to your mobile users until they clear their cookies.
Any upgrade from 4.1.11 to an higher version will not require any intervention on your part for the mobile style upgrade.
Disabling the Mobile Style
If you do not wish to use the mobile style, you can disable it following these steps:
- Admin CP -> Settings -> Options -> Style & Language Settings -> Default Style for Old Mobile Browsers. Set 'None'.
- Admin CP -> Settings -> Options -> Style & Language Settings -> Default Style for Modern Mobile Browsers. Set 'None'.
- Admin CP -> Styles & Templates -> Style Manager. Edit any style in the mobile style list and set "Allow User Selection" to No.
Admins will always be able to use the mobile style, as they can always use any existing style and because it is not possible to delete the last mobile style.
Stylevar is limited; This code (postbit) need to be modified so that avatars (custom) can display:
<p> <vb:if condition="$show['avatar'] AND $post['avatarurl']"> <img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /> <vb:else /> <img src="{vb:stylevar imgdir_misc}/unknown.gif" /> </vb:if> </p>You then need to to look into the /clientscript/jquery/jquery.mobile-1.0.min.css file (this is a compressed file, but you can easily find online tools to see an uncompressed version of its content) for the specific definitions you want to change. Copy the definition in your mobile CSS templates along with the value you want to change.
For example, if you want to make the background color of ".ui-bar-a" red (which is #111 in the jquery.mobile-1.0.min.css file by default), copy this in your CSS template:
.ui-bar-a { background:#FF0000; }