The Arcive of Official vBulletin Modifications Site.It is not a VB3 engine, just a parsed copy! |
|
|
|||||||
|
vBulletin Mobile Style - CSS Tips & Tricks
 TheLastSuperman
Join Date: Sep 2008
Posts: 5,844
Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids North Carolina
03-08-2011, 10:00 PM
With the release of vBulletin 4.1.2, we have available a Mobile Style! You can read more about that here: http://www.vbulletin.com/forum/conte...t-Mobile-Style 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: https://vborg.vbsupport.ru/showthread.php?t=258994 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? 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: https://vborg.vbsupport.ru/showthread.php?p=2171633 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 .https://vborg.vbsupport.ru/attachmen...1&d=1299713796 
|
|
#2
03-10-2011, 01:16 AM
|
|||
|
|||
Thanks TheLastSuperman for the tips I Use On My Style Mobile for my forum
Blessing for you Life man♥ Greetings from Venezuela
|
|
#3
03-10-2011, 06:18 PM
|
||||
|
||||
|
Quote:
|
|
#4
02-10-2012, 04:29 PM
|
||||
|
||||
|
Alright... You da man... DaSuperman.
Thanks a lot!
|
|
#5
03-07-2012, 08:56 PM
|
|||
|
|||
|
I found a easy and painless way to fix the css mess, hopefully it will help anyone wating to customize it.
I downloaded a fresh new properly formatted http://code.jquery.com/mobile/1.0.1/...bile-1.0.1.css and placed it in the clientscript/jquery folder and then edited the file as needed, (all i wanted was to change the colors in the header bar ui-bar-b) it worked perfectly and is easy to read and edit at will now.
|
|
#6
02-20-2013, 07:59 PM
|
|||
|
|||
|
Quote:
|
|
#7
02-25-2013, 06:18 PM
|
||||
|
||||
|
I'm going to install vBulletin Mobile Style now
And certainly I will face some problems And I will come back to you again to inquire for help Thank you TheLastSuperman 
|
|
#8
04-21-2013, 03:01 PM
|
|||
|
|||
|
On VB 4.2 the link in the mobile template seems to be like this
Code:
<link rel="stylesheet" href="clientscript/jquery/jquery.mobile-1.0.min.css?v={vb:raw vboptions.simpleversion}" />
--------------- Added [DATE]1366562513[/DATE] at [TIME]1366562513[/TIME] --------------- What template does this mod actually create? It doesn't seem to create anything in VB4.2.1 , I couldn't find a template after installing it and searching for "mobiletemplate" anyway. This mod should be updated or consigned to the graveyard.
|
|
#9
04-19-2014, 12:21 AM
|
|||
|
|||
|
So pleased to be stuck with this mobile template (for which I paid good money and was promised updates) and having to heavily customise the old JQuery code whilst JQuery releases new and better code. Anyway... Does anyone have any idea how I can add thread sorting options to Forumhome in this thing?
|
|
#10
04-19-2014, 05:03 AM
|
||||
|
||||
|
Quote:
|
 |
«
Previous Thread
|
Next Thread
»
|
|
All times are GMT. The time now is 10:40 PM.