Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Multiquote (on) Multiquote (off)
Add Reply
Responsive themes; Make your new and existing themes responsive
Topic Started: Oct 10 2017, 06:38 PM (2,652 Views)
DaPizzaMan
Member Avatar
#TeamSupport

Our boards are now viewed on not just desktops or laptops, but tablets and phones as well. Themes should adjust accordingly, such as in cases like these which these codes will help with. Some themes have already been made responsive. Any theme in the theme galleries on this board marked with "[R]" in the title is responsive! See this list for a few.[1]


Theme Layout
Put this at the very top (first line):
Code: Top of Theme Layout
 
<script type="text/javascript">
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />');
</script>
Put this at the very bottom (last line):
Code: Bottom of Theme Layout
 
<script type="text/javascript">
$.ajax({
url: 'http://b1.ifrm.com/0/1/0/p600387/ResponsiveZB.js',
dataType: 'script',
cache: true
});
</script>


Theme Appearance
Put this at the very top (first line):
Code: Top of Theme Appearance
 
@import url('http://b1.ifrm.com/0/1/0/p600386/ResponsiveZB.css');


Keep in mind that these codes may not be perfect. Make sure to test at a few resolutions (resize your browser window) and on as many pages as you can: portal, calendar, blog, inbox, posts page (this page), profile, etc.

Please report any issues you find in this topic so I can update the above codes.
[1] These codes will not automatically make your theme responsive. There are likely to be some adjustments you'll need to make in addition, but they should be minor issues. You can ask for help by posting in the Theme & Code Support forum. Make sure to link to your (test) board and specify which theme you're working on.
Offline Profile Quote Post Goto Top
 
Joe
Member Avatar


Just took this for a spin, excellent work Aidan. ^_^
Offline Profile Quote Post Goto Top
 
Helena
Member Avatar
M is for Mod

I love the simplicity of this installation. Having used it multiple times now, its pretty amazing how little customizing it needs to be adapted to each theme design. Mostly its about adjusting for large banner or background images.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Joe
Oct 11 2017, 06:27 PM
Just took this for a spin, excellent work Aidan. ^_^
Thank you Joe!

Helena
Oct 11 2017, 06:47 PM
I love the simplicity of this installation. Having used it multiple times now, its pretty amazing how little customizing it needs to be adapted to each theme design. Mostly its about adjusting for large banner or background images.
That was the idea. I'm glad you like it, Helena. :)
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

One of my personal favorite things about this is the new "features" that are added to ZB. Here's a few:

1. New Marker: There's a class I added to the row where the forum marker and forum name/description are, has_new_post. When the screen width gets really small (on mobile devices), the space gets a little too tight to fit a forum marker (indicating whether a forum has new posts, no new posts, and so on), so I removed it. Instead, you could implement it like so. You can add it to your theme with code similar to this:
Code:
 
@media (max-width:425px) {
tr.has_new_post td.c_forum {
-webkit-box-shadow: inset 4px 0 0 0 #2ac7ca;
-moz-box-shadow: inset 4px 0 0 0 #2ac7ca;
box-shadow: inset 4px 0 0 0 #2ac7ca;
}
}


2. Profile Avatar: Just like the forum marker, space was a little tight for the profile avatar to stay on the right side of the profile table. So I moved it above the table like so. No extra coding is required.

3. Horizontal Profile: Similar to the other two, space was getting tight on small-screen devices, so I moved the mini profile next to posts above the post instead. Again, no extra coding is required, but if you're looking to implement this feature without the responsive codes above, look into this topic.

4. Scrollable Submenu: If you want to avoid the submenu links taking up several lines (before and after), you need this:
Code:
 
#submenu {
white-space:nowrap;
overflow-x:auto;
}
Attached to this post:
Attachments: Profile_Avatar.png (43.16 KB)
Attachments: Unread_Marker.png (65.5 KB)
Attachments: Submenu_After.gif (445.99 KB)
Attachments: Submenu_Before.png (16.75 KB)
Edited by DaPizzaMan, Oct 12 2017, 04:12 PM.
Offline Profile Quote Post Goto Top
 
l1r72
Member Avatar
Member
[ *  *  * ]
DPM. Just wanted to let you know ads now use:

Note: 0 for the first ad on the page, 1 for the second
Code:
 
<ins id="aswift_0_expand">
<ins id="aswift_0_anchor">
<iframe></iframe>
</ins>
</ins>

I came across this last night while working on a theme.
Offline Profile Quote Post Goto Top
 
mawarm
Member
[ *  * ]
When viewing a board which is responsive and has a "Special Data Feed" shoutbox (not regular shoutbox) on a mobile device, the text input box of the shoutbox is not visible - no posts can be made in the shoutbox from a mobile device. I have tried with both the Ledger theme and the Zeta Original theme made responsive, using the code from the OP here. The issue can be seen on my test board by viewing it both on a PC and mobile device for comparison. However if you want to see it there you need to register as I've not been able to enable posting in the shoutbox for guests (don't know why it doesn't work).

Is there any way to fix this problem?
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

l1r72
Dec 4 2017, 01:50 PM
DPM. Just wanted to let you know ads now use:

Note: 0 for the first ad on the page, 1 for the second
Code:
 
<ins id="aswift_0_expand">
<ins id="aswift_0_anchor">
<iframe></iframe>
</ins>
</ins>

I came across this last night while working on a theme.
Hmm, the question is, is this consistent? Ads can get messy and inconsistent. Brandon offered to add a class to the advertisement table a few months ago(?), but he never delivered. I might bug him about that and a few other issues such as the one below...

mawarm
Dec 4 2017, 02:22 PM
When viewing a board which is responsive and has a "Special Data Feed" shoutbox (not regular shoutbox) on a mobile device, the text input box of the shoutbox is not visible - no posts can be made in the shoutbox from a mobile device. I have tried with both the Ledger theme and the Zeta Original theme made responsive, using the code from the OP here. The issue can be seen on my test board by viewing it both on a PC and mobile device for comparison. However if you want to see it there you need to register as I've not been able to enable posting in the shoutbox for guests (don't know why it doesn't work).

Is there any way to fix this problem?
So, sort of. I did the best I could without using JS. It should be visible now.
Offline Profile Quote Post Goto Top
 
mawarm
Member
[ *  * ]
Did anything change or am I missing something? It's still the same for me.

Nevermind, I just had to clear the cache of Chrome on my phone. It's working now, thanks! ^_^
Edited by mawarm, Dec 6 2017, 09:12 AM.
Offline Profile Quote Post Goto Top
 
KyngzIndeyen
Outplayer of Mr. 49361
[ *  *  * ]
I'm having a problem with this code: on any theme where I install it, the ads cut off after 300 pixels.

For an example of this in effect, see the following test board, where 'Obsidian Metal' (which I've set to be the default theme) has the code in use:
http://w11.zetaboards.com/Coffee_House_New/index/

Posted Image
(Click to enlarge)

Might want to fix this before advertisers notice!

EDIT 16/12/2017: It's actually worse than I thought. After doing a bit more testing on my mobile, I discovered that the adverts are displaying at full width....but, only on mobile devices!
Edited by KyngzIndeyen, Dec 16 2017, 10:05 AM.
Offline Profile Quote Post Goto Top
 
mawarm
Member
[ *  * ]
KyngzIndeyen
Dec 10 2017, 05:10 PM
I'm having a problem with this code: on any theme where I install it, the ads cut off after 300 pixels.

For an example of this in effect, see the following test board, where 'Obsidian Metal' (which I've set to be the default theme) has the code in use:
http://w11.zetaboards.com/Coffee_House_New/index/

Posted Image
(Click to enlarge)

Might want to fix this before advertisers notice!

EDIT 16/12/2017: It's actually worse than I thought. After doing a bit more testing on my mobile, I discovered that the adverts are displaying at full width....but, only on mobile devices!
I have this issue on my board as well and I have encountered yet another. When you write a long paragraph without any line breaks in code tags, the code window doesn't stop or become scrollable like it usually does. Instead, the code window will go on and display the entire line, extending the width of the topic beyond the width of your screen.
Again, I have tried with both the Ledger theme and the Zeta Original theme made responsive and this issue appears on both mobile and non-mobile devices.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

KyngzIndeyen
Dec 10 2017, 05:10 PM
I'm having a problem with this code: on any theme where I install it, the ads cut off after 300 pixels.

For an example of this in effect, see the following test board, where 'Obsidian Metal' (which I've set to be the default theme) has the code in use:
http://w11.zetaboards.com/Coffee_House_New/index/

Posted Image
(Click to enlarge)

Might want to fix this before advertisers notice!

EDIT 16/12/2017: It's actually worse than I thought. After doing a bit more testing on my mobile, I discovered that the adverts are displaying at full width....but, only on mobile devices!
I'm waiting on Brandon for a fix to this. Hopefully coming sooner than later.

mawarm
Feb 3 2018, 11:49 AM
KyngzIndeyen
Dec 10 2017, 05:10 PM
I'm having a problem with this code: on any theme where I install it, the ads cut off after 300 pixels.

For an example of this in effect, see the following test board, where 'Obsidian Metal' (which I've set to be the default theme) has the code in use:
http://w11.zetaboards.com/Coffee_House_New/index/

Posted Image
(Click to enlarge)

Might want to fix this before advertisers notice!

EDIT 16/12/2017: It's actually worse than I thought. After doing a bit more testing on my mobile, I discovered that the adverts are displaying at full width....but, only on mobile devices!
I have this issue on my board as well and I have encountered yet another. When you write a long paragraph without any line breaks in code tags, the code window doesn't stop or become scrollable like it usually does. Instead, the code window will go on and display the entire line, extending the width of the topic beyond the width of your screen.
Again, I have tried with both the Ledger theme and the Zeta Original theme made responsive and this issue appears on both mobile and non-mobile devices.
Can you provide me link where this problem happens?
Offline Profile Quote Post Goto Top
 
mawarm
Member
[ *  * ]
You can see the problem here. The difference should be pretty clear if you switch between the Zeta Mobile Responsive and Zeta Original themes.
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

mawarm
Feb 4 2018, 05:48 AM
You can see the problem here. The difference should be pretty clear if you switch between the Zeta Mobile Responsive and Zeta Original themes.
It should be fixed now upon clearing your cache.
Offline Profile Quote Post Goto Top
 
mawarm
Member
[ *  * ]
Yes, it's working now, thanks!
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Theme Tricks · Next Topic »
Add Reply