Responsive Design for XenForo 1.1 [Paid] [Deleted]

[Arty]

1. Its intended, but I didn't realize that it isn't possible to sort conversations. I'll change it to hide that column in conversations.

2. You can remove that custom css and use style properties in newer version. In "responsive design: header" section change this:
In property @responsiveBlockLogoWrapperInner add text-align:center;
In property @responsiveLogoBlock add display: inline-block; float: none;

 

[Arty]

Added lots of screenshots to add-on description.

Small screenshots are from old iPod, large screenshots are from Galaxy S3.

 

[Andy.N]

2. You can remove that custom css and use style properties in newer version. In "responsive design: header" section change this:
In property @responsiveBlockLogoWrapperInner add text-align:center;
In property @responsiveLogoBlock add display: inline-block; float: none;

I add this as instructed and remove these two lines from the custom css

#logoBlock .pageContent > div,
#logoBlock .pageContent > div#logo { display: block !important; float: none; text-align: center; }

which will result in the leaderboard banner showing up.

 

[Arty]

Remove just this part:

float: none; text-align: center;

 

[agison]

Sure. That style uses structure very close to default style, so most likely it will require only minor tweaks.

Its a bug. Ignore it for now, it doesn't break anything. I'll upload fixed xml file within next few hours.

Did you upload fixed xml version?

 

[Arty]

Did you upload fixed xml version?

Yes, I did. Sorry forgot to post about it.

 

[Arty]

Add-on updated.

Changes:

• Many more bug fixes.
• Support for xenAtendo, User Albums and xenKingDir add-ons.
• You can now enable/disable modules for add-ons per style. So, for example, you can disable responsive design add-on for some style, but enable only user albums module.

What are the sites that are using this add-on? I'd like to see how XF looks on mobile with this add-on.

One website you can see it on is http://www.appliqueforum.com/

 

[Forsaken]

Add-on updated.

Changes:

• Many more bug fixes.
• Support for xenAtendo, User Albums and xenKingDir add-ons.
• You can now enable/disable modules for add-ons per style. So, for example, you can disable responsive design add-on for some style, but enable only user albums module.

One website you can see it on is http://www.appliqueforum.com/

How are you dealing with tables (For pages)?

A main reason why I haven't bothered making XenForo responsive is advertisements (Which is a bit iffy even with repsonsiveAds), tables (Zurb has a great example of responsive tables, however it requires the removal of colspan and rowspan which is impossible for game guides my site has) and the performance impact by resizing images.

 

[Arty]

How are you dealing with tables (For pages)?

A main reason why I haven't bothered making XenForo responsive is advertisements (Which is a bit iffy even with repsonsiveAds), tables (Zurb has a great example of responsive tables, however it requires the removal of colspan and rowspan which is impossible for game guides my site has) and the performance impact by resizing images.

I don't. Pages are custom for each website, there is no universal code that can make it work.

Only tables I've dealt with so far are from xenAtendo add-on. They do look very nice
edit: oh, and from poll results. I've made those tables work correctly on mobile devices too.

 

[Forsaken]

I don't. Pages are custom for each website, there is no universal code that can make it work.

Only tables I've dealt with so far are from xenAtendo add-on. They do look very nice
edit: oh, and from poll results. I've made those tables work correctly on mobile devices too.

Was hoping you had some magical technique for tables with rowspan/colspan ;|.

 

[Arty]

It can be done.

In both cases I dealt with I've made tables think they are divs by forcing display:block on all table elements. To adjust individual table cells I've targeted them via :nth-child pseudo selector. You can combine that with [colspan] or [rowspan] to target your table cells.

Something like this:

table.whatever tr:nth-child(2) > td[colspan] { width: auto; float: none; }

 

[Forsaken]

It can be done.

In both cases I dealt with I've made tables think they are divs by forcing display:block on all table elements. To adjust individual table cells I've targeted them via :nth-child pseudo selector. You can combine that with [colspan] or [rowspan] to target your table cells.

Something like this:

table.whatever tr:nth-child(2) > td[colspan] { width: auto; float: none; }

Probably won't help all that much with our guides due to the sheer size of the tables at time: http://adeptgamer.com/forum/pages/the-sushi-spinnery-guide/

Will probably have to see about heavily modifying the Zurb method.

 

[Arty]

Those tables are huge. Even if you could split each row into several rows, it will look horrible and won't make much sense. Best solution is to redo those tables, splitting them into smaller tables with few columns per table.

 

[Forsaken]

Those tables are huge. Even if you could split each row into several rows, it will look horrible and won't make much sense. Best solution is to redo those tables, splitting them into smaller tables with few columns per table.

It might work with some tables, but some of them really can't be split, which is our problem.

We're probably going to have to move to an add-on for the guides as well, because the load time for a page is pretty ridiculous (The guides alone are ~8000 lines of code without anything else but data).

 

[scottglax]

Arty, fantastic job with this script! Will be purchasing tonight or tomorrow. Can't wait to take it for a test drive.

 

[Andy.N]

Arty, fantastic job with this script! Will be purchasing tonight or tomorrow. Can't wait to take it for a test drive.

I'm probably the first person to purchased and use this addon (been waiting a long time) and I can tell you that I now safely cross out the "mobile feature" from my must-have features that I expect to arrive with XF 1.2
Arty has done a terrific job. I watched with great interest when he released the mobile style and I can see a lot of potential with his products.

You won't regret it one bit. If you have a custom style, you may need to modify the CSS a bit but I believe I got about 95% of my site responsive. Table is the biggest remaining issue.

 

[scottglax]

I'm probably the first person to purchased and use this addon (been waiting a long time) and I can tell you that I now safely cross out the "mobile feature" from my must-have features that I expect to arrive with XF 1.2
Arty has done a terrific job. I watched with great interest when he released the mobile style and I can see a lot of potential with his products.

You won't regret it one bit. If you have a custom style, you may need to modify the CSS a bit but I believe I got about 95% of my site responsive. Table is the biggest remaining issue.

Yeah, I've been checking back frequently for this add-on. Looking through the support forums I see he's been awesome about bug fixes and updating the script accordingly.

 

[Anthony Parsons]

Andy, are you using an actual table, or have you done a CSS table. If CSS table, as Arty eluded, that can be easily made completely compatible. An actual table... a lot harder. A CSS table you simply change the table CSS into an @media action, then define differently at lower resolutions.

What you can do with an actual old table, you can do now with CSS table properties.

 

[Jeff Fuqua]

Question: I run ads on my site and wonder if this would somehow substitute ad sizes based on the current width of the window.

 

[Arty]

Question: I run ads on my site and wonder if this would somehow substitute ad sizes based on the current width of the window.

If width is controlled in javascript, such as adsense, then it can be easily done. For example:

if ($(window).width() > 800)
{
 google_ad_width = 728; 
 google_ad_height = 90;
 google_ad_format = "728x90_as";
}
else
{
 google_ad_width = 234; 
 google_ad_height = 60;
 google_ad_format = "234x60_as";
}