Responsive Design for XenForo 1.1 [Paid] [Deleted]

Hey Arty, I'm working on updating a style for one of your customers(I know this could sound sketchy like I'm trying to get free support but I promise! Lol)

The sidebar button doesn't appear to be showing when the screen is reduced, any starting points at all?

I might figure this out on my own I'm going through updating some templates but wanted to get some pointers just in case.

Scratch that, client had older version of the Responsive style.
 
I think I have found a solution for that, but it requires editing tinymce files.

  1. Rename js/tinymce/tiny_mce.js to something else, like tiny_mce_original.js
  2. Copy js/tinymce/tiny_mce_src.js to js/tinymce/tiny_mce.js
  3. Open js/tinymce/tiny_mce.js, find
    Code:
        // Initialize the API
        tinymce._init();
  4. Replace it with
    Code:
        // Initialize the API
        if (jQuery(window).width() < 700) return;
        tinymce._init();
If you want, it's possible to resize TinyMCE after it has been loaded, but for this the TinyMCE "oninit" function must be used (see that post here). Unfortunately XenForo doesn't have it. I used it with the MarkItUp editor. What I can do is modify the way I used it to make it compatible with other addons.

Right now, I'm using now this code with TMS:
PHP:
    public static function editorjs(&$templateText, &$applyCount, $styleId)
    {
        /*
            TinyMCE onInit: only clean way to execute a function AFTER TinyMCE is loaded in the DOM
            If another addon needs it, this part  might need to merged with its
        */
        
            //Fix editor with on overlay with IE8 step 1 
            $search[] = "#([ \t]*?)theme:\s*?'xenforo',#i";
            $replace[] = "$0\n$1oninit : mceIsReady,";

            //Fix editor with on overlay with IE8 step 2
            $search[] = "#([ \t]*?)tinyMCE.init\(#i";
            $replace[] = "$1function mceIsReady() { 
                        if ($.browser.msie && parseInt($.browser.version, 10) == 8 ){
                            $('.xenOverlay').find('.mceLayout').removeClass('mceLayout').addClass('mceLayoutSafe');
                        }
            } \n$0";        


        $templateText = preg_replace($search, $replace, $templateText, -1, $count);
        $applyCount = $count;    
    }

The problem is that TMS can't detect if a replacement has already been done. So we can't use TMS here. I could create a new hook with the TinyFix, but it will force everybody to install the TinyFix. So the option would be to use this code inside the template hook listener
PHP:
            case 'editor_js_setup':
                //Check if the TinyMCE function oninit has been already activated with the function name "mceIsReady"
                if(!preg_match('#mceIsReady#i', $contents))
                {
                     //Activate the TinyMCE hook "onInit" and link it to the function "mceIsReady"
                          $search[] = "#([ \t]*?)theme:\s*?'xenforo',#i";
                          $replace[] = "$0\n$1oninit : mceIsReady,";
    
                          //Create the mceIsReady function
                          $search[] = "#([ \t]*?)tinyMCE.init\(#i";
                          $replace[] = "
                          function mceIsReady() {
                              //Write your Js Code here
                          } \n$0";
                          
                          $contents = preg_replace($search, $replace, $contents);
                          break;
                }
                
                      //The function mceIsReady() already exists, it then just need to be modified
                      $search[] = "#function mceIsReady() {\s*#i";
                      $replace[] = "$0
                              //Write your Js Code here                    

                      $contents = preg_replace($search, $replace, $contents);
                     
            break;
If developers share this short code waiting XenForo adds a real hook, it will work and avoid to force users to install an extra addon to create a framework.

If you're interested, tell me, I will modify my MarkItUp addon so we can use this common code.
 
Does this have the option for users to switch to the full desktop view? Also can it be used with forumrunner or tapatalk?
 
Does this have the option for users to switch to the full desktop view? Also can it be used with forumrunner or tapatalk?

There's no button if that's what you're asking. The style automatically scales to the size of the browser or device.

There's no impact with Forumrunner or Tapatalk, that I have seen so far.
 
Arty, is this offered in a developer's level license? Also, does it absolutely require using the TMS addon or could it be adapted to use other frameworks?
 
Issue with the account details page when viewing on the ipad2

You could try this in extra.css

Code:
/*Mobile CSS*/
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
.accountContent .xenForm {
    margin-top: 0;
    width: auto !important;
}
}
 
/*Mobile CSS*/
@media only screen and (max-width: 700px), only screen and (max-device-width: 700px)
{
.xenForm {
width: auto !important;
}
}
 
Arty, is this offered in a developer's level license? Also, does it absolutely require using the TMS addon or could it be adapted to use other frameworks?
No, and it does absolutely require TMS.

Add-on appends code to existing templates that don't have template hooks. The only way to add it is to extend template compiler, which is one of XF classes that cannot be extended. TMS replaces compiler with different one that has all functionality I need. Without TMS I'd have to write code that is very similar to TMS, so why do all the extra work when most users have TMS installed anyway.
 
Here is a very general question. I am starting a new forum...zero visitors! I do not intend to make a lot of style changes - just maybe icons and small things.

I don't have any real plan for fancy colors or spending a lot of hours/money on style - more interested in community and content. The subject is in the realm of hobby/technology.

Would I be better (compatibility, simplicity, etc.) using the stock XF style with this add-on....OR....buying and installing the full responsive style by the same author?

Again, nothing really big custom going on - just the want/need for mobile and as easy as possible.

Thanks for any advice!
 
[PURCHASED].

I only have two styles (and I removed default style): Mobile style, and the main style is fixed width:

www.sck-mobile.com/community

After install of Responsive Design my main style looks like this:



Might consider using a fluid style to replace my mobile design with this add-on, but was wondering if we could just tweak the addon so that I won't have to?
 

Attachments

  • IMG_0523[1].webp
    IMG_0523[1].webp
    65.7 KB · Views: 14
Sure, its possible to fix by changing some properties and/or adding extra rules to responsive_extra.css template.

For some reason I'm seeing your mobile style when visiting your forum instead of main style and no ability to switch to normal style. Please switch to normal style, so I could take a look at layout issues.
 
Sure, its possible to fix by changing some properties and/or adding extra rules to responsive_extra.css template.

For some reason I'm seeing your mobile style when visiting your forum instead of main style and no ability to switch to normal style. Please switch to normal style, so I could take a look at layout issues.
Ok, I have disabled the Auto-Style Switcher. So these are the settings I have now:
 

Attachments

  • designproperties1.webp
    designproperties1.webp
    33.7 KB · Views: 14
That will require a lot of tweaking. Add this to responsive_extra.css
Code:
.fblbCenterOuter, div.xenCODE_ForceRegister, #wibiyaToolbar, #ticker-wrapper { display: none !important; }
.backDay { background-image: none !important; }
Change back minimum width to a reasonable number instead of 992px

It might require more tweaks after that
 
Where would I change text color for Forum Navigation box? It's displaying white on white on one of my dark styles.
Also, forum is centered on iPad but shifted to the left on iPhone (5% space on left) No ads in the way on this style either.

Thanks

image.webp
 
Top Bottom