HOW TO: Different CMPS on different Skins - for mobile site etc

[richy96]

Hi guys

I've been working on this for quite some time

What I needed was to have a mobile version of my site with a completely different layout to the desktop (classic) site

My site uses vb 3.7.0 and vbAdvanced

First a little moan (then I'll get on with it lol) but I have been pretty dismayed by the lack of response to questions regarding how to create a mobile version of my site on vb and vba forums - I can't be the only one interested in this and I am not a professional programmer or developer so surely the help and expertise is out there?

Anyway here goes - How I did it

After several aborted attempts, including having two installs of vBulletin on one database (which proved too cumbersome to implement) I went for plan C lol

Note this required a bit of php editing so I couldn't release this as a product - but maybe someone else really clever could?


1. Set up two styles
-------------------------
I created a new style as a child of my main site style and called it 'mobile' but I have also played with adding a completely separate style and that works too. The reason I went for a child style is because I already have so many modifications in my main 'classic' style and I wanted to inherit them in my mobile version.

I initially set both stlyes so that they are not user selectable in the Style Manager, but in Vbulletin Options->Style and Language Settings I set 'Allow Users to Change Styles to 'Yes'

This allowed admins/mods to access the new 'mobile' style but not members, so I could play around with the new style on my live site.

2. Duplicate the CMPS tabes in the database
--------------------------------------------------------
Without going into depth (I didn't even look into it that deep) the important thing to know here is this:

There are four tables in the database that control the CMPS page and module layout. These are:

adv_pages
adv_module
adv_setting
adv_settinggroup

To have two different CMPS layouts I created a another set of these tables. As I am creating a mobile style, I called these new tables adm_pages, adm_modules etc....

To do this I used phpmyadmin to run the following sql on my database

CREATE TABLE adm_pages LIKE adv_pages

INSERT adm_pages SELECT * FROM adv_pages

Run the first SQL line to create the new table and then the second one to copy data from the existing table

Repeat this procedure for the other tables (adv_modules, adv_setting, adv_settinggroup)

Now we have two sets of tables with the same layout in each


3. Set each style to use the correct CMPS tables
-------------------------------------------------------------

I want to have different CMPS layouts on the two styles.

The file php file which controls the selection and display of pages and modules is called

includes/vba_cmps_include_top.php

There is one SQL statement in this file which creates an array that is used to build the pages using the layout stored in the adv_pages file in the database

We want to select different layouts depending on which style is selected

Look at this section of code in vba_cmps_include_top.php around line 608

// ##### Now grab the page
if ($getpage == 'home')
{
	$pages =& $vbulletin->adv_portal_home;
}
else
{
	$pages = $db->query_first("
		SELECT * FROM " . TABLE_PREFIX . "adv_pages
		WHERE name = '" . $db->escape_string($getpage) . "'
			" . iif(!($permissions['adminpermissions'] & $vbulletin->bf_ugp_adminpermissions['cancontrolpanel']), 'AND active = 1')
	);

The first part of this

if ($getpage == 'home')
{
$pages =& $vbulletin->adv_portal_home;
}

Had me puzzled for a while. What I did not realize was thet when the layout settings are saved in the Admin CP they get stored into a 'datastore' table. This is read to create an 'adv_portal_home ' array

In the above code, if we are on the CMPS homepage the layout is read from this array, ELSE it is read from adv_pages

In my case I changed this code to

A: force the layout to be read from the database on the homepage
B: select adv_pages or adm_pages layouts depending on the style. My main site uses styleid=8

So we now have this code

//Select Modules Layout
if ($styleid == "8")
 {
     $cmstype = "adv";     // classic stle
 }
 else
 {
     $cmstype = "adm";     // mobile style
 }

 // ##### Now grab the page

 
    $pages = $db->query_first("
        SELECT * FROM " . TABLE_PREFIX . $cmstype . "_pages
        WHERE name = '" . $db->escape_string($getpage) . "'
            " . iif(!($permissions['adminpermissions'] & $vbulletin->bf_ugp_adminpermissions['cancontrolpanel']), 'AND active = 1')
    );

	$pages['userperms'] = explode(',', $pages['userperms']);
	$pages['modules'] = unserialize($pages['modules']);
	$pages['advanced'] = unserialize($pages['advanced']);
	$pages['meta'] = unserialize($pages['meta']);

Someone better than me could work out how to store both layouts for the home page in the datastore table instead, but it was beyond me (without a lot of hard work) to be honest and the above fix seems to work fine (probably looses a little bit of efficiency).

--------------- Added [DATE]1392649228[/DATE] at [TIME]1392649228[/TIME] ---------------

4. Managing the CMPS layouts
--------------------------------------

OK so we now have two styles each with their own layout. But this is pretty useless unless we can manage those layouts independantly, yes?

Obviously I want to be able to use the AdminCP to manage both layouts, so what I did was create a second admincp folder!

I called this 'smadmincp' for' 'swapscene mobile admin cp' but you can call it whatever you like

I then copied all the files/folders from admincp to smadmincp

OK so now I have two control panels and can use either of them by going to either forums/admincp or forums /smadmincp

However at the moment both control panels do the same thing as each other. I want admincp to manage teh layout on my main site and smadmincp to handle the layout on my mobile site.

Folder smadmincp

The files that handle the CMPS management are the following

forums/admincp/vba_cmps_admin.php
forums/includes/vba_cmps_adminfunctions.php

OK lets look at the first of these files.

So what I did was edit smadmincp/vba_cmps_admin.php so that all SQL statements that refer to
adv_pages
adv_modules
adv_setting
adv_settinggroup

now refer to
adm_pages
adm_modules
adm_setting
adm_settinggroup


You have to be a bit careful here as there is also an array and variables caled adv_blahblah... and you must leave them alone. It's only the SQL statements you need to edit.

It's pretty easy to spot what is an SQL statements and what isn't (if you don't know the difference this mod is probably not for you anyway) but I included in the attached zip file a list of line numbers I had to edit - the numbers may be different in your file/version

The includes/adminfunctions.php file


This is the other file sthat handles the CMPS layout management. This is called as an 'incude' in vba_cmps_admin.php

I created a copy of the forums/includes/vba_cmps_adminfunctions file and called it forums/includes/vba_cmps_smadminfunctions.php

I then edited the vba_cmps_admin.php file in smadmincp around line 303
to include this new file 'smadminfunctions' like so:

require_once('./global.php');
require_once(DIR . '/includes/vba_cmps_smadminfunctions.php');

Now we need to edit all the SQL in includes/vba_cmps_smadminfunctions.php to refer to the adm_ tables instead of the adv_ tables

Again it is pretty easy to spot the SQL statements but again I have listed my edits in the attached zip

OK so now we can control the layout of the mobile site from smadmincp folder and the main site from admincp. ALl other functions of the two admin panels are the same as each other, so you could use either panel for things like managing users, forums, styles, phrases etc

[richy96]

5. Creating the mobile site layout
------------------------------------------

OK we now have the basic tools in place. We have two styles, and as we select each style we automatically select the CMPS layout defined in either admincp or smadmincp

Here are a few things I learned while designing a mobile layout....

Change all the absolute pixel widths to percentages

Add a meta tag like this to your mobile style headinclude

<meta name="viewport" content="width=device-width; initial-scale=1.0">

This will force the pages to fit the width of the mobile device in both portrait and landscape orientations

Use the CMPS in smadmincp to create a single column mobile layout. You can have modules that are present on only one version of your site, or on both but in different locations

In your mobile style options get rid of most of the 'padding' as youy only have a llimited width on the screen that you can use

Instead of dsiplaying avatars in postibts use the thumbnails instead - they look better on mobile devices

Create a simple navigation system with buttons taking your forwards and backwards through site pages, rather than having a navigation bar. Keep the navigation consistent on all pages. For example I have buttons that have actions specific to a page in bold and buttons for general navigation in normal type.

Use CSS as much as you can to create buttons etc - it keeps the bandwidth down

Strip out unneccesary stuff to reduce bandwidth and 'clutter'

6. Templates
----------------

Now it is just a matter of going through all the templates in your mobile style and editing them to suit your single 'narrow' column layout. This is time consuming but not dificult as it is generally a matter of removing parts of the template you don't need for your mobile version. Try to keep things simple on your mobile site, for instance have only one post editor rather than quick reply and advanced

You can edit the templates in your mobile style to your hearts content without affecting your main site. Remember that phrases are global to both styles - so create new phrases as required for your mobile site and name them mobile_foo etc so you know which style they relate to

So thats about it really - not a full tutorial but a good starting point at least

I'll post up a few screen grabs so you can see my site in both classic and mobile style

enjoy.
Rich

[richy96]

OK - these two screenshots show my sites homepage

First one is in classic layout style

Second one is the same page in mobile style.

These both use the same CMPS modules for the navigation buttons, welcome block and notifications, but notice welcomeblock is on the top of the left column in 'classic' style and on beneath the banner on mobile style

Also on mobile style the nav buttons are above the banner to make tis look more like an android app

So two style - same modules..... just different templates, colours scheme (css) and CMPS layout

[richy96]

This is the Forums Home page in both layouts

I uploaded a couple of grabs from the mobile version to show page with some modules expanded and collapsed

I hope these examples give you some idea of what can be achieved

Rich