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

XF 1.1 New Style or...?

Discussion in 'XenForo Questions and Support' started by lazer, Jul 23, 2013.

  1. lazer

    lazer Well-Known Member

    Hey guys

    We had a great style designed and coded for us when we made the switch to xF from vB, back in April 2012.
    Since then we have had to have the templates (quite a lot of them) updated after every software update...and this can be a hassle, for the developer, at times.
    • We want to take advantage of the core responsive functionality
    • We want the updates and changes to be as simple as possible
    • We want to retain as unique as possible, look and feel to our site
    • We need to be able to take advantage of the great changes that are coming, without massive changes every time
    So, basically, the question is, would it be better to hang on to our uniquely designed style but suffer delays and other issues every time a point release (with template changes) is released....or do we have a style designed, that is only subtly changed, in order to ease future upgrades? Is it possible to have a fundamentally "core" style but have it look and feel like it's unique?

    This has really been highlighted for me, with the Admin's who have pretty a much core style, being able to upgrade to v1.2 already, whilst I know when we upgrade, it'll be a major project...

    Cheers.
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

  3. lazer

    lazer Well-Known Member

    Truth be told, I knew but forgot B :rolleyes: thanks mate. Blames age.

    What about applying the responsive element to a custom style? Just as easy?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    I have just finished making my whole site responsive, including my custom add-ons.
    It's not that difficult at all - the longest time was spent making AdSense responsive.
     
  5. Andy.N

    Andy.N Well-Known Member

    I sense a great tutorial coming up soon, Paul?
    For most people, making anything responsive is a huge task so your guide can be a great starting point.
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    I already did one for AdSense.

    http://xenforo.com/community/resources/responsive-adsense.2084/

    Applying responsive functionality to specific CSS classes is as simple as using something like:
    Code:
    <xen:if is="{xen:property enableResponsive}">
        .CtaDbChart {
        overflow: auto;
        }
    </xen:if>
    What that does is ensure that for the responsive style only, the overflow is applied to the .CtaDbChart class.
    For non-responsive styles it won't be applied.

    The other thing is the use of media queries.
    For example:
    Code:
    @media (max-width:855px) {
        .cta_ff1_season .mainContainer {
        float: none;
        margin-right: 0;
        width: auto;
        }
    
        .cta_ff1_season .mainContent {
        margin-right: 0;
        }
    
        .cta_ff1_season .sidebar {
            float: none;
            margin: 0 auto;
        }
    
        .cta_ff1_season .sharePage {
        display: none;
        }
    }
    
    What that does is for browser widths of 855px or less, the CSS listed will be applied.
    That will apply for responsive and non-responsive styles.

    If you only want it to apply to responsive styles you would wrap it in the responsive conditional like so:
    Code:
    <xen:if is="{xen:property enableResponsive}">
        @media (max-width:855px) {
            .cta_ff1_season .mainContainer {
            float: none;
            margin-right: 0;
            width: auto;
            }
    
            .cta_ff1_season .mainContent {
            margin-right: 0;
            }
    
            .cta_ff1_season .sidebar {
                float: none;
                margin: 0 auto;
            }
    
            .cta_ff1_season .sharePage {
            display: none;
            }
        }
    </xen:if>
    Hopefully that helps.
     
    lazer and Andy.N like this.
  7. Russ

    Russ Well-Known Member

    I would work on removing as many template edits as possible. Many stylers in the start(including myself) approached XenForo styling completely wrong where many template edits were made.

    Work on removing the template edits first if you can, stick to style properties/extra.css then work on the outdated templates :).
     
  8. Andy.N

    Andy.N Well-Known Member

    Good question and I think many people face this choice, specially around the time when a major release comes out, such as XF 1.2.
    A smart choice in my opinion would be to take the default style and make some changes to it like what digitalpoint.com did.
    I'm considering doing that myself instead of using a style from third party provider who may not be around when it's time to update.
     
  9. Brogan

    Brogan XenForo Moderator Staff Member

    To back up what Russ and Andy have posted above, I keep template edits to an absolute minimum, use SPs wherever possible and EXTRA.css when I have to.
    I also don't rely on a third party author for my style (and it shows :D).

    Having said that, 1.2 does definitely make things easier when it comes to editing templates and upgrading.
     
  10. Shelley

    Shelley Well-Known Member

    When in doubt, EXTRA.CSS it.
     
    Tracy Perry likes this.
  11. lazer

    lazer Well-Known Member

    I wouldn't mind speaking with you one to one about this Russ - if you're ok with that, let me know...

    Thanks guys...
     

Share This Page