Tweet
vBulletin Mobile Style - CSS Tips & Tricks
With the release of vBulletin 4.1.2, we have available a Mobile Style! You can read more about that here:
Currently it's only compatible with the forum, meaning that no matter if you own the vBulletin Suite or vBulletin Forum Classic you can only use this for the forum at the moment however CMS and Blog versions are in development.
Now I've seen some posts already asking how to customize?
Example:
Now what have I figured out?
What else Michael? - Well simple, I've found out there's no additional.css included by default which disappointed me slightly although do you truly need it? I say if you plan on customizing then yes if not then no worries! Now we can go about making a few changes to sort all this out but there's several ways ready to see them?
Edit Mobile file accordingly or simply add in additional.css so it's parsed. You can add it in very quickly by editing the template headinclude
Find:
Add under:
Save the template, now add in your custom CSS to additional.css, make the necessary changes to your other templates within the mobile style saving those templates as well now refresh to see your changes! Your additional.css now works in the mobile style and upon your next upgrade it will not be overwritten so if you carefully add in custom css or css to overwrite the default css in additional.css you'll never lose those changes!
Overwrite the mobile css via a plugin! Check this modification thread:
Download and install - now instead of editing the mobile css file you simply edit your CSS Templates, scroll down and find mobilestyle.css and double-click to edit, make changes to that css as it's called last and after the file is called! This template should not overwrite with an upgrade either so no worries there.
Optional:
Your calling a css template... let's not make it overwrite the file being called instead let's remove it properly. Open template headinclude
Find:
Replace with:
Save the template, if you installed the modification then your css for the mobile style is now in mobilestyle.css and your no longer overwriting the other file which is the correct way of doing things.
Customize your heart out and enjoy!
Personally, I hate it when CSS is typed out as it is in the file, it's all crammed together and hard to read and edit imo! So I've taken the liberty and cleaned it up quite a bit, check it out below and remember it's an exact copy only in a more traditional style.
Example:
*If you notice any issues with the CSS attached please report promptly 
.
**I also added in a outline near the end so the logo would not do the dotted border when clicked upon etc.
*** Uploaded as attachment due to code being too long to post, rename and remove .php leaving only .css to view.
mobilestyle.css.php
Currently it's only compatible with the forum, meaning that no matter if you own the vBulletin Suite or vBulletin Forum Classic you can only use this for the forum at the moment however CMS and Blog versions are in development.
Now I've seen some posts already asking how to customize?
Example:
Now what have I figured out?
- The mobile style uses it's own css file, jquery.mobile-1.0a2.min.css
- The .css file is located in: clientscript/jquery
- Example path to file: clientscript/jquery/jquery.mobile-1.0a2.min.css
- The CSS file reads left to right and it's all crammed together, making it hard to edit for novices.
What else Michael? - Well simple, I've found out there's no additional.css included by default which disappointed me slightly although do you truly need it? I say if you plan on customizing then yes if not then no worries! Now we can go about making a few changes to sort all this out but there's several ways ready to see them?
Method 1
Edit Mobile file accordingly or simply add in additional.css so it's parsed. You can add it in very quickly by editing the template headinclude
Find:
Code:
<vb:if condition="$vboptions['storecssasfile']">
{vb:cssfile main-rollup.css}
{vb:raw template_hook.custom_css_links}
<vb:else />
{vb:cssfile bbcode.css,editor.css,popupmenu.css,reset-fonts.css,vbulletin.css,vbulletin-chrome.css,vbulletin-formcontrols.css{vb:raw template_hook.custom_css_list}}
</vb:if>
Add under:
Code:
{vb:cssfile additional.css}
Method 2
Overwrite the mobile css via a plugin! Check this modification thread:
Download and install - now instead of editing the mobile css file you simply edit your CSS Templates, scroll down and find mobilestyle.css and double-click to edit, make changes to that css as it's called last and after the file is called! This template should not overwrite with an upgrade either so no worries there.
Optional:
Your calling a css template... let's not make it overwrite the file being called instead let's remove it properly. Open template headinclude
Find:
Code:
<link rel="stylesheet" href="clientscript/jquery/jquery.mobile-1.0a2.min.css?v={vb:raw vboptions.simpleversion}" />
Code:
<vb:comment><link rel="stylesheet" href="clientscript/jquery/jquery.mobile-1.0a2.min.css?v={vb:raw vboptions.simpleversion}" /></vb:comment>
Customize your heart out and enjoy!
Preferred CSS Layout?
Personally, I hate it when CSS is typed out as it is in the file, it's all crammed together and hard to read and edit imo! So I've taken the liberty and cleaned it up quite a bit, check it out below and remember it's an exact copy only in a more traditional style.
Example:
Code:
.ui-bar-a {
border:1px solid #2A2A2A;
background:#111;
color:#fff;
font-weight:bold;
text-shadow:0 -1px 1px #000;
background-image:-moz-linear-gradient(top,#3c3c3c,#111);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111));
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c',EndColorStr='#111111')";
}
.**I also added in a outline near the end so the logo would not do the dotted border when clicked upon etc.
*** Uploaded as attachment due to code being too long to post, rename and remove .php leaving only .css to view
.mobilestyle.css.php
Comment