2016-09-05, 10:02 AM
I am currently working on a responsive theme using @media queries. It seemed to go smoothly at first.
For instance, not sure if THIS is the best way to do it...
...but anyway it lets me have different content on the postbit, depending on the device I use. Of course, "mobilestuff" and "desktopstuff" are classes I described in the .css, that are hidden (display: none) on wide and small screens respectively.
I thought I could just do something similar with all the relevant templates, but then I started meeting issues.
In the Header, I had to wrap the <div class="mobileetc"> around smaller pieces of the code, otherwise the mobile header image appeared on desktop as well. I don't know why. But well, I fixed it one way or the other.
Then I went to the UCP template, and that's where I am stuck. No matter what I tag, it seems I cannot have a different outcome for desktop and mobile. Either nothing changes, or it changes from any device (so, adjusted but not responsive, and ugly on desktop).
This is the code I am working with (it's the usercp template). Reverted to original, but still good to know what we're talking about:
How is that different from other templates I used?
What I am trying to do is have an alternate appearance for the UCP, so it's either much smaller on mobile, or the User CP Nav is moved above the other boxes (so the whole UCP is visible on mobile, instead of being pushed out of the right border). It's not hard to achieve by tweaking the <table> tags, but again, if I do it the appearance changes on all device, even though I told it had to be hidden on desktop.
Any idea? Is there a limit to the tags you can use, or bits that cannot be responsive no matter what? I'm a bit at loss, but I hope someone here understands it.
Again, my board: http://silenceandwhispers.icyboards.net/index.php
Nevermind, fixed it!
For instance, not sure if THIS is the best way to do it...
<div class="mobilestuff">{$post['profilefield']}</div>
[size=xx-large][/size]
<div class="desktopstuff"><!-- THIS IS THE MINI-AVATAR -->
<img src="{$post['fid6']}" width="199">
<!-- END OF MINI-AVATAR -->
[size=xx-large][/size]
<center><span class="usertitle">
[size=xx-large][/size]
<!-- USERTITLE- THIS IS THE TEXT THAT
APPEARS DIRECTLY BENEATH
THE MINI-AVATAR -->
{$post['usertitle']}
<!-- END USERTITLE -->
[size=xx-large][/size]
</span></center>
[size=xx-large][/size]
<!-- THIS IS THE LINE BREAK -->
<h1></h1>
<!-- END OF LINE BREAK -->
[size=xx-large][/size]
<div style="padding-left: 1px;">
[size=xx-large][/size]
<!-- PROFILE FIELDS - USE pb_full
FOR A FIELD THAT SPANS THE
WIDTH OF THE ENTIRE PROFILE,
USE pb_half FOR A FIELD THAT
SPANS ONLY HALF -->
<div class="pb_full">{$post['fid3']}</div>
<div class="pb_full">{$post['profilefield']}</div>
<!-- END OF PROFILE FIELDS -->
[size=xx-large][/size]
</div>
[size=xx-large][/size]
[size=xx-large][/size]
<!-- THIS IS THE LINE BREAK -->
<h1></h1>
<!-- END OF LINE BREAK -->
[size=xx-large][/size]
<div style="padding-left: 10px;">
[size=xx-large][/size]
<!-- PROFILE LINKS -->
[size=xx-large][/size]
<!-- END PROFILE LINKS -->
[size=xx-large][/size]
</div>
[size=xx-large][/size]
<!-- THIS IS THE LINE BREAK -->
{$post['fid2']}
<!-- END OF LINE BREAK -->
[size=xx-large][/size]
<div class="pb_player">
[size=xx-large][/size]
<!-- PLAYER NAME -->
{$post['fid1']}
<!-- END PLAYER NAME -->
[size=xx-large][/size]
</div></div>...but anyway it lets me have different content on the postbit, depending on the device I use. Of course, "mobilestuff" and "desktopstuff" are classes I described in the .css, that are hidden (display: none) on wide and small screens respectively.
I thought I could just do something similar with all the relevant templates, but then I started meeting issues.
In the Header, I had to wrap the <div class="mobileetc"> around smaller pieces of the code, otherwise the mobile header image appeared on desktop as well. I don't know why. But well, I fixed it one way or the other.
Then I went to the UCP template, and that's where I am stuck. No matter what I tag, it seems I cannot have a different outcome for desktop and mobile. Either nothing changes, or it changes from any device (so, adjusted but not responsive, and ugly on desktop).
This is the code I am working with (it's the usercp template). Reverted to original, but still good to know what we're talking about:
<html>
<head>
<title>{$lang->user_cp}</title>
{$headerinclude}
</head>
<body>
{$header}
<table width="100%" border="0" align="center">
<tr>
{$usercpnav}
<td valign="top">
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="{$colspan}"><strong>{$lang->account_summary}</strong></td>
</tr>
<tr>
{$avatar}
<td class="trow2">
<span class="largetext">{$username}</span><br />
<strong>{$lang->postnum}</strong> <a href="search.php?action=finduser&uid={$mybb->user['uid']}">{$mybb->user['posts']}</a> {$lang->posts_day}<br />
{$reputation}
<strong>{$lang->email}</strong> {$mybb->user['email']}<br />
<strong>{$lang->registration_date}</strong> {$regdate}<br />
<strong>{$lang->primary_usergroup}</strong> {$usergroup}<br />
{$referral_info}
</td>
</tr>
</table>
{$latest_subscribed}
{$latest_threads}
{$latest_warnings}
{$user_notepad}
</td>
</tr>
</table>
{$footer}
</body>
</html>How is that different from other templates I used?
What I am trying to do is have an alternate appearance for the UCP, so it's either much smaller on mobile, or the User CP Nav is moved above the other boxes (so the whole UCP is visible on mobile, instead of being pushed out of the right border). It's not hard to achieve by tweaking the <table> tags, but again, if I do it the appearance changes on all device, even though I told it had to be hidden on desktop.
Any idea? Is there a limit to the tags you can use, or bits that cannot be responsive no matter what? I'm a bit at loss, but I hope someone here understands it.
Again, my board: http://silenceandwhispers.icyboards.net/index.php
Nevermind, fixed it!