Results 1 to 2 of 2

Thread: Fix for vBa CMPS modules to work on Mobile (CMPS version 4.3.0)

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    Default Fix for vBa CMPS modules to work on Mobile (CMPS version 4.3.0)

    FIX FOR VBA CMPS MODULES TO WORK ON MOBILE

    This fix will work for ANY template that is responsive, not just mobile templates.

    For this fix to fully work, any images in the posts used in the vBa modules must have responsive CSS code added inline manually (shown below) to the img tag or any large images will cause the module to expand to fit the image off the screen (which we don't want). I'm not sure how to do this globally for only images within posts without creating a special class for those images which is far above my head right now. I'm sure someone could create a mod that could do all these changes automatically. And for anyone critiquing this fix, if you can do it better, it's no skin off my nose. I was just tired that there has been no fix for using CMPS with mobile, and it appears that it was far simpler than we thought and could have been done a long time ago by anyone who knows CSS better than me. This fix is now in place at one of the boards I manage using the Debutant theme and vBA CMPS ver. 4.3.0, vBulletin ver. 4.2.3. Musclechemistry.com. (Though we are still testing to see which modules will work the best, and I may be creating mobile CSS for any module we want to use but doesn't work with this fix.)

    You will also need to change your layout to use only ONE column for whatever your widgets are, plus the information the module contains must be responsive. Some modules work better than others. Modules that contain posts work like the News and the Welcome modules work well for example. Didn't say this fix was perfect, but it works.

    For anyone who knows CSS really well, it appears like it's only a matter of having a full set of CSS rules for mobile for each module. Again, the vBa people could have done this a long time ago.


    Image code within posts that appear in modules will need CSS code similar to below added inline:

    Code:
    style="width: 100%;"
    Or some kind of @media query on it:

    Code:
    style="@media screen and (max-width: 480px) {img {width: 100%;}}"
    In the vBa CMPS template below, I added width: 100%; into the style tags in both div tags in this template.

    adv_portal_module_wrapper

    Code:
    {vb:raw mods.formcode}
    
    <div class="collapse" style="padding-bottom: {vb:raw vba_style.portal_vspace}px; width: 100%;">
    	<h2 class="blockhead">
    		<strong>{vb:raw vba_style.portal_blockbullet} <vb:if condition="$mods['link']"><a href="{vb:raw mods.link}">{vb:raw mods.title}</a><vb:else />{vb:raw mods.title}</vb:if></strong>
    		<vb:if condition="$vba_style['portal_collapsemods']">
    			<a class="collapse" id="collapse_module{vb:raw mods.collapse}" href="{vb:raw relpath}#top" style="top: 6px"><img src="{vb:stylevar imgdir_button}/collapse_40b{vb:raw mods.collapseimg}.png" alt="" /></a>
    		</vb:if>
    	</h2>
    	
    	<div class="vba_module blockbody" id="module{vb:raw mods.collapse}"<vb:if condition="($mods['useshell'] & $vba_shellint['collapse'])"> style="display: none; width: 100%;"</vb:if>>
    		<vb:if condition="$show['table']">
    			<table align="center" border="0" cellpadding="0" cellspacing="0" class="blockbody" width="100%">
    				{vb:raw modulehtml}
    			</table>
    		<vb:elseif condition="$mods['inctype'] == 'bb_code'" />
    			<blockquote class="postcontent blockrow restore">
    				<div class="bbcode_container" style="margin: 0;">
    					{vb:raw modulehtml}
    				</div>
    			</blockquote>
    		<vb:elseif condition="$show['divrow']" />
    			<div class="blockrow">
    				{vb:raw modulehtml}
    			</div>
    		<vb:else />
    			{vb:raw modulehtml}
    		</vb:if>
    	</div>
    </div>
    <vb:if condition="$show['endform']"></form></vb:if>
    In the vBa CMPS CSS template below, I added two lines (shown by the comments).

    adv_portal.css

    Code:
    .vba_module {
    	border: {vb:stylevar threadbit_border};
            width: 100%;  /* Added this line */
    }
    
    .vba_spacer {
    	border-bottom: {vb:stylevar threadbit_border};
    }
    
    .vba_news {
    	margin-top: 4px;
            width: 100%;  /* Added this line */
    }
    
    .vba_rating1 {
    	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_1.png);
    	background-repeat: no-repeat;
    	background-position: top {vb:stylevar right};
    	padding-{vb:stylevar right}:{vb:math 75 / 5 * 1}px;
    }
    .vba_rating2 {
    	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_2.png);
    	background-repeat: no-repeat;
    	background-position: top {vb:stylevar right};
    	padding-{vb:stylevar right}:{vb:math 75 / 5 * 2}px;
    }
    .vba_rating3 {
    	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_3.png);
    	background-repeat: no-repeat;
    	background-position: top {vb:stylevar right};
    	padding-{vb:stylevar right}:{vb:math 75 / 5 * 3}px;
    }
    .vba_rating4 {
    	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_4.png);
    	background-repeat: no-repeat;
    	background-position: top {vb:stylevar right};
    	padding-{vb:stylevar right}:{vb:math 75 / 5 * 4}px;
    }
    .vba_rating5 {
    	background-image:url({vb:stylevar imgdir_rating}/rating-trans-15_5.png);
    	background-repeat: no-repeat;
    	background-position: top {vb:stylevar right};
    	padding-{vb:stylevar right}:{vb:math 75 / 5 * 5}px;
    }
    
    #forumrules .rules_link {
    	padding-{vb:stylevar left}: 40px;
    }
    
    .threadbit .threadstats li {
    	margin-{vb:stylevar right}: 5px;
    }

  2. #2
    Join Date
    Jul 2018
    Posts
    1

    Default

    This doesn't work on my mobile template. I'm not sure why. Does this not work on older versions?

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Similar Threads

  1. How do I make vB and CMPS Mobile-Friendly?
    By Don Z. in forum "How Do I..." Questions
    Replies: 3
    Last Post: 05-10-2015, 10:12 AM
  2. vBadvanced CMPS and vBulletin Mobile Version?
    By RobAC in forum Troubleshooting & Problems
    Replies: 2
    Last Post: 11-16-2013, 04:51 PM
  3. How to kep CMPS off mobile style?
    By creativepart in forum Troubleshooting & Problems
    Replies: 3
    Last Post: 07-12-2010, 06:42 PM
  4. CMPS Modules work in Blogicles?
    By tfw2005 in forum Module & Modification Discussion & Requests
    Replies: 4
    Last Post: 03-22-2007, 02:38 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •