1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Responsive Design for XenForo 1.1 [Paid] [Deleted]

Discussion in 'Add-on Releases' started by Arty, Oct 30, 2012.

  1. Arty

    Arty Well-Known Member

    Arty submitted a new resource:

    Responsive Design (version 1.0) - responsive design, mobile style

    Read more about this resource...
     
  2. Andy.N

    Andy.N Well-Known Member

    Purchased.
     
  3. FabioCesar

    FabioCesar Member

    Purchased.
     
  4. Andy.N

    Andy.N Well-Known Member

    Ok, first question. I have flexile style which I set it at fixed width under Style properties->General->Pagewidth Controller
    width: 992px; margin: auto;

    and under Under Style properties->General->HTML-Settings
    min-width: 1000px;

    After I install this addon, the style becomes fluid width. Where do I have to change in Responsive properties so it respects the settings.
     
  5. Arty

    Arty Well-Known Member

    Its a bug. I didn't consider that style could have fixed width. Thanks for finding it.

    Open master style's template "responsive_public.css", find this (starts at second line):
    Code:
    .pageWidth
    {
        width: auto;
        min-width: 0;
        <xen:if is="@pageWidth.width > 0">
            max-width: @pageWidth.width; 
            margin: 0 auto;
            _width: @pageWidth.width;
        </xen:if>
    }
    
    @media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
    {
        .pageWidth
        {
    
    and replace with this
    Code:
    <xen:if is="!@pageWidth.width">
    .pageWidth
    {
        width: auto;
        min-width: 0;
        margin: 0 auto;
    }
    </xen:if>
    
    @media only screen and (max-width: @responsiveWidth), only screen and (max-device-width: @responsiveWidth)
    {
    
        .pageWidth
        {
            <xen:if is="@pageWidth.width > 0">
                min-width: 0;
                width: auto;
            </xen:if>
    
     
    Mahran Elneel likes this.
  6. Arty

    Arty Well-Known Member

    I've found few more conflicts with Flexile style and fixed them.

    Please download add-on again and use option to upgrade (or reinstall it). Only xml file was changed, no need to re-upload other files.
     
    Andy.N likes this.
  7. Andy.N

    Andy.N Well-Known Member

    Uploaded the new xml and the style still becomes fluid.
     
  8. Arty

    Arty Well-Known Member

    That's strange. Can you please post link to your forum (or send it via conversation), so I could check it?
     
  9. Shyuan

    Shyuan Well-Known Member

    This add-on is cool, I am buying it very soon! :) and it will be my first paid add-on :p
     
  10. craigiri

    craigiri Well-Known Member

    Do I understand that this would convert my existing layouts - without affecting the look and feel of the style - to a responsive layout? What would happen, for instance, with fixed graphic ad banners?

    All the other little tweaks I have made to the stock XF style will still be there?
     
  11. Andy.N

    Andy.N Well-Known Member

    I installed the first release and it works much better than I expected. I suspect that Arty will make some fixes and the future versions will be a whole lot better.
    Fixed size graphic will stretch the width out so you would need to choose which element to show for phones. Use responsive_extra.css to customize it.

    The xenporta works surprisingly well.

    I already removed Russ mobile style ;)
     
  12. Andy.N

    Andy.N Well-Known Member

    The tabs on the Widget Framework sidebar for the Most read/Most commented is not displayed correctly yet.
     
    FredC likes this.
  13. Russ

    Russ Well-Known Member

    Hey :( - ;)

    Actually great job Arty... however question... how exactly would it handle an actual heavily customized site such as mine? In sig
     
  14. craigiri

    craigiri Well-Known Member

    The same, I guess, goes for full size imagines either placed in (XF) or linked to? That is, will these graphics all make the layout stretch the width of everything?
     
  15. Arty

    Arty Well-Known Member

    It will require tweaks. Style has responsive_extra.css, which is similar to extra.css but rules added there will be used only in responsive layout.

    Ads must be changed by forum owner because ad location and format is specific to each forum. xenPorta module isn't ready yet. Your navigation menu should work fine.

    By the way, you have a bug on your forum. "What's new" menu item is wrapped in ul > div. It is missing li
     
    Andy.N likes this.
  16. Russ

    Russ Well-Known Member


    Hmmm o_O thanks, not sure how that got there :)
     
  17. Arty

    Arty Well-Known Member

    That depends on location. Images in posts and logo should automatically scale down. If something doesn't scale correctly, its a bug and I'll fix it.
     
  18. Anthony Parsons

    Anthony Parsons Well-Known Member

    Andy, you must remove the fixed width value and insert: max-width: 992px; into the extra field value. That fixes the width, yet won't impede responsiveness.

    You cannot have a fixed width with responsive design, because you would need to use CSS table values to do it, which has there own issues. You must use max-width to fix your site, with margins 0 auto so it centers.

    Arty... shouldn't that be dropping the side margins for the mobile media queries? Making full space of a mobile screen?
     
    Andy.N likes this.
  19. Anthony Parsons

    Anthony Parsons Well-Known Member

    For those not understanding true responsive design, you may need to add values to make your style correctly work.

    For example, ems are the correct font value for responsive design, which should also be used in the padding. That way, the font and padding values correctly shift based on device being viewed. I say that, because whilst desktop browsers set the default font at 16px, and Xenforo reset has it at 13px, most mobile devices will actually show a much larger screen resolution than the actual resolution you view, and many devices use non-standard font sizes as the default, however; on that devices screen it will view correctly providing your style is using flexible values, not fixed. Kindle comes to mind... from memory about 24 or 25px is its browsers default value. There are lots of devices not using 16px which will screw with responsive design that isn't using such flexible values elsewhere.

    People who buy this, IMHO, will still need to know quite a lot of CSS and basic HTML in order to apply this to your style.
     
  20. Anthony Parsons

    Anthony Parsons Well-Known Member

    I can imagine you're going to be very busy with this one Arty... nice work.
     

Share This Page