XF 1.1 New Style or...?

[lazer]

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.

 

[Paul B]

Are you aware that 1.2 now comes with built in template merging and template modifications?

http://xenforo.com/community/threads/template-merging-and-history.48846/
http://xenforo.com/community/threads/template-modifications-and-comparison.48412/

That should make things easier going forwards.

 

[lazer]

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

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

 

[Paul B]

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.

 

[Andy.N]

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.

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.

 

[Paul B]

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:

<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:

@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:

<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.

 

[Russ]

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 .

 

[Andy.N]

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.

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.

 

[Paul B]

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 ).

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

 

[Shelley]

When in doubt, EXTRA.CSS it.

 

[lazer]

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 .

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

Thanks guys...