Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
vBulletin Mobile Style - CSS Tips & Tricks
TheLastSuperman
Join Date: Sep 2008
Posts: 5,455

Hey vb.org members and coders! Not much to say except I have a beautiful wife, three fantastic kids, and I develop Websites and Forums for a living 40+ hours a week.

North Carolina
by TheLastSuperman TheLastSuperman is offline 09 Mar 2011

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:
http://www.vbulletin.org/forum/showthread.php?t=258994

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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.


Add under:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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!

Method 2

Overwrite the mobile css via a plugin! Check this modification thread:
http://www.vbulletin.org/forum/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:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

Replace with:


Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

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!

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:

Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

*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 .

http://www.vbulletin.org/forum/attac...1&d=1299713796
Attached Files
File Type: php mobilestyle.css.php (44.5 KB, 176 views)

Last edited by TheLastSuperman; 09 Mar 2011 at 23:24..
Views: 13854
Reply With Quote
Comments
  #2  
Old 10 Mar 2011, 02:16
ErnestO999 ErnestO999 is offline
 
Join Date: May 2010
Real name: Ernesto Graterol
Lightbulb

Thanks TheLastSuperman for the tips I Use On My Style Mobile for my forum
Blessing for you Life man♥

Greetings from Venezuela

Last edited by ErnestO999; 10 Mar 2011 at 02:32.
Reply With Quote
  #3  
Old 10 Mar 2011, 19:18
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Originally Posted by ErnestO999 View Post
Thanks TheLastSuperman for the tips I Use On My Style Mobile for my forum
Blessing for you Life man♥

Greetings from Venezuela
Awesome! Glad it was helpful
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman - Custom vBulletin Modifications, Styles, and Services.
Need a Host? I recommend URLJet.

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!
Reply With Quote
  #4  
Old 10 Feb 2012, 16:29
chrisngrod's Avatar
chrisngrod chrisngrod is offline
 
Join Date: Oct 2010
Alright... You da man... DaSuperman.

Thanks a lot!
__________________
Cricket Users - Cricket Wireless Forum
Reply With Quote
  #5  
Old 07 Mar 2012, 20:56
Dragaon Dragaon is offline
 
Join Date: Feb 2010
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.
__________________
vBulletin forum = 4.2.2
Server = Apache (cgi-fcgi)
MySQL = 5.5.32-cll
Reply With Quote
  #6  
Old 20 Feb 2013, 19:59
Jeromedia603 Jeromedia603 is offline
 
Join Date: May 2008
Originally Posted by Dragaon View Post
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.
What do you name the file then? Does it stay the actual name in the link?
Reply With Quote
  #7  
Old 25 Feb 2013, 18:18
Dorgham's Avatar
Dorgham Dorgham is offline
 
Join Date: May 2012
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
__________________
AdSense revenue sharing 100% - [ Hanan ]
News, egypt : أخبار مصر - Photo, picture : صور
Reply With Quote
  #8  
Old 21 Apr 2013, 16:01
furnival furnival is offline
 
Join Date: Mar 2008
On VB 4.2 the link in the mobile template seems to be like this
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

I don't know why there's all these extra versions in the clientscript directory and I have no idea which one is best so I guess I will just edit a copy of the 1.0.min.css file. However that means that the nicely-spaced version of the code provided above is no longer useful.

--------------- Added 21 Apr 2013 at 16:41 ---------------

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.

Last edited by furnival; 21 Apr 2013 at 16:42.
Reply With Quote
  #9  
Old 19 Apr 2014, 01:21
furnival furnival is offline
 
Join Date: Mar 2008
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?
Reply With Quote
  #10  
Old 19 Apr 2014, 06:03
TheLastSuperman's Avatar
TheLastSuperman TheLastSuperman is offline
 
Join Date: Sep 2008
Real name: Michael Miller Jr
Cool

Originally Posted by furnival View Post
On VB 4.2 the link in the mobile template seems to be like this
Block Disabled:      (Update License Status)  
Suspended or Unlicensed Members Cannot View Code.

I don't know why there's all these extra versions in the clientscript directory and I have no idea which one is best so I guess I will just edit a copy of the 1.0.min.css file. However that means that the nicely-spaced version of the code provided above is no longer useful.

--------------- Added 21 Apr 2013 at 16:41 ---------------

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.
It doesn't create a template, this is an article not a mod. See Method #2 above for a link to a mod that creates a template however the css for that is outdated and would need to be updated before use and no I have no plans to do that anytime soon unless pigs decide to fly in my head one afternoon (I'm sure they weill I run off on muddy tangents all the time lol).
__________________
Daddy Does Dios and Figs!
https://www.linkedin.com/in/thelastsuperman - Custom vBulletin Modifications, Styles, and Services.
Need a Host? I recommend URLJet.

Search - Use the search feature to find similar issues/answers.
Information - Include screenshots, copy/pasted error codes, url etc.
Fixed - Please return to your thread/post and let us know how it was fixed!
Thanks - For participating! Click the "Like" on a post if someone helped you!
Reply With Quote
Reply



Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Article Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


New To Site? Need Help?

All times are GMT. The time now is 16:43.

Layout Options | Width: Wide Color: