Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 690
↧

Set the default template adapts to the Mobile screen

August 31, 2023, 10:23 am
$
0
0
The method is relatively simple, just add a class, and there are many places to modify.

1. add a class to global.css

https://yourdomain.com/admin/index.php?m...e=advanced

@media(max-width:768px){.mobile-fix{display:none}}

Comment or remove min-width

#container {
 color: #333;
text-align: left;
line-height: 1.4;
margin: 0;
font-family: Tahoma, Verdana, Arial, Sans-Serif;
font-size: 13px;
#min-width: 990px; //////////// here
}
.wrapper {
width: 85%;
#min-width: 970px;  //////////// here 
max-width: 1500px;
margin: auto auto;
}


2. edit <head>

https://yourdomain.com/admin/index.php?m...&expand=-1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

add it to first line.

3. edit other templates

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead{$expthead}" colspan="5">
<div class="expcolimage"><img src="{$theme['imgdir']}/{$expcolimage}" id="cat_{$forum['fid']}_img" class="expander" alt="{$expaltext}" title="{$expaltext}" /></div>
<div><strong><a href="{$forum_url}">{$forum['name']}</a></strong><br /><div class="smalltext">{$forum['description']}</div></div>
</td>
</tr>
</thead>
<tbody style="{$expdisplay}" id="cat_{$forum['fid']}_e">
<tr>
<td class="tcat" colspan="2"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat mobile-fix" width="85" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat mobile-fix" width="200" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$sub_forums}
</tbody>
</table>
<br />

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor} mobile-fix" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor} mobile-fix" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<tr>
<td class="{$bgcolor}" align="center" width="1"><span class="forum_status forum_{$lightbulb['folder']} ajax_mark_read" title="{$lightbulb['altonoff']}" id="mark_read_{$forum['fid']}"></span></td>
<td class="{$bgcolor}">
<strong><a href="{$forum_url}">{$forum['name']}</a></strong>{$forum_viewers_text}<div class="smalltext">{$forum['description']}{$modlist}{$subforums}</div>
</td>
<td class="{$bgcolor}" align="center" style="white-space: nowrap">{$threads}{$unapproved['unapproved_threads']}</td>
<td class="{$bgcolor} mobile-fix" align="center" style="white-space: nowrap">{$posts}{$unapproved['unapproved_posts']}</td>
<td class="{$bgcolor} mobile-fix" align="right" style="white-space: nowrap">{$lastpost}</td>
</tr>

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<tr class="inline_row">
<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%"><span class="thread_status {$folder}" title="{$folder_label}">&nbsp;</span></td>
<td align="center" class="{$bgcolor}{$thread_type_class}" width="2%">{$icon}</td>
<td class="{$bgcolor}{$thread_type_class}">
{$attachment_count}
<div>
          <span>{$prefix} {$gotounread}{$thread['threadprefix']}<span class="{$inline_edit_class} {$new_class}" id="tid_{$inline_edit_tid}"><a href="{$thread['threadlink']}">{$thread['subject']}</a></span>{$thread['multipage']}</span>
<div><span class="author smalltext">{$thread['profilelink']}{$lang->comma}</span><span class="thread_start_datetime smalltext">{$thread['start_datetime']}</span></div>
</div>
</td>
<td align="center" class="{$bgcolor}{$thread_type_class} mobile-fix"><a href="{$mybb->settings['bburl']}/misc.php?action=whoposted&tid={$thread['tid']}" onclick="MyBB.whoPosted({$thread['tid']}); return false;">{$thread['replies']}</a>{$unapproved_posts}</td>
<td align="center" class="{$bgcolor}{$thread_type_class} mobile-fix">{$thread['views']}</td>
{$rating}
<td class="{$bgcolor}{$thread_type_class} mobile-fix" style="white-space: nowrap; text-align: right;">
<span class="lastpost smalltext">{$lastpostdate}<br />
<a href="{$thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
</td>
{$modbit}
</tr>

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<td align="center" class="{$bgcolor}{$thread_type_class} mobile-fix" id="rating_table_{$thread['tid']}">
<ul class="star_rating{$not_rated}" id="rating_thread_{$thread['tid']}">
<li style="width: {$thread['width']}%" class="current_rating" id="current_rating_{$thread['tid']}">{$ratingvotesav}</li>
</ul>
<script type="text/javascript">
<!--
Rating.build_forumdisplay({$thread['tid']}, { width: '{$thread['width']}', extra_class: '{$not_rated}', current_average: '{$ratingvotesav}' });
// -->
</script>
</td>

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<td class="tcat mobile-fix" align="center" width="80">
<span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=rating&amp;order=desc">{$lang->rating}</a> {$orderarrow['rating']}</strong></span>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/rating.js?ver=1821"></script>
<script type="text/javascript">
<!--
lang.stars = new Array();
lang.stars[1] = "{$lang->one_star}";
lang.stars[2] = "{$lang->two_stars}";
lang.stars[3] = "{$lang->three_stars}";
lang.stars[4] = "{$lang->four_stars}";
lang.stars[5] = "{$lang->five_stars}";
lang.ratings_update_error = "{$lang->ratings_update_error}";
// -->
</script>
</td>

https://yourdomain.com/admin/index.php?m...|3|28|8|31

<div class="float_left">
{$multipage}
</div>
<div class="float_right">
{$newthread}
</div>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder clear">
<tr>
<td class="thead" colspan="{$colspan}">
<div class="float_right">
<span class="smalltext"><strong><a href="misc.php?action=markread&amp;fid={$fid}{$post_code_string}">{$lang->markforum_read}</a>{$addremovesubscription}{$clearstoredpass}</strong></span>
</div>
<div>
<strong>{$foruminfo['name']}</strong>
</div>
</td>
</tr>
<tr>
<td class="tcat" colspan="3" width="66%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=subject&amp;order=asc">{$lang->thread}</a> {$orderarrow['subject']} / <a href="{$sorturl}&amp;sortby=starter&amp;order=asc">{$lang->author}</a> {$orderarrow['starter']}</strong></span></td>
<td class="tcat mobile-fix" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=replies&amp;order=desc">{$lang->replies}</a> {$orderarrow['replies']}</strong></span></td>
<td class="tcat mobile-fix" align="center" width="7%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=views&amp;order=desc">{$lang->views}</a> {$orderarrow['views']}</strong></span></td>
{$ratingcol}
<td class="tcat mobile-fix" align="right" width="20%"><span class="smalltext"><strong><a href="{$sorturl}&amp;sortby=lastpost&amp;order=desc">{$lang->lastpost}</a> {$orderarrow['lastpost']}</strong></span></td>
{$inlinemodcol}
</tr>
{$selectall}
{$announcementlist}
{$threads}
{$forumsort}
</table>
<div class="float_left">
{$multipage}
</div>
<div class="float_right" style="margin-top: 4px;">
{$newthread}
</div>
<br class="clear" />
<br />
<div class="float_left">
<div class="float_left">
<dl class="thread_legend smalltext">
<dd><span class="thread_status newfolder" title="{$lang->new_thread}">&nbsp;</span> {$lang->new_thread}</dd>
<dd><span class="thread_status newhotfolder" title="{$lang->new_hot_thread}">&nbsp;</span> {$lang->new_hot_thread}</dd>
<dd><span class="thread_status hotfolder" title="{$lang->hot_thread}">&nbsp;</span> {$lang->hot_thread}</dd>
</dl>
</div>
<div class="float_left">
<dl class="thread_legend smalltext">
<dd><span class="thread_status folder" title="{$lang->no_new_thread}">&nbsp;</span> {$lang->no_new_thread}</dd>
<dd><span class="thread_status dot_folder" title="{$lang->posts_by_you}">&nbsp;</span> {$lang->posts_by_you}</dd>
<dd><span class="thread_status closefolder" title="{$lang->closed_thread}">&nbsp;</span> {$lang->closed_thread}</dd>
</dl>
</div>
<br class="clear" />
</div>
<div class="float_right" style="text-align: right;">
{$inlinemod}
{$searchforum}
{$forumjump}
</div>
<br class="clear" />
{$inline_edit_js}

https://yourdomain.com/admin/index.php?m...expand=5|3
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" colspan="5" align="center"><strong>{$lang->sub_forums_in}</strong></td>
</tr>
<tr>
<td class="tcat" width="2%">&nbsp;</td>
<td class="tcat" width="59%"><span class="smalltext"><strong>{$lang->forumbit_forum}</strong></span></td>
<td class="tcat" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_threads}</strong></span></td>
<td class="tcat mobile-fix" width="7%" align="center" style="white-space: nowrap"><span class="smalltext"><strong>{$lang->forumbit_posts}</strong></span></td>
<td class="tcat mobile-fix" width="15%" align="center"><span class="smalltext"><strong>{$lang->forumbit_lastpost}</strong></span></td>
</tr>
{$forums}
</table>
<br />

https://yourdomain.com/panyh/index.php?m...&expand=14

<br />
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="thead" align="center" colspan="6"><strong>{$lang->similar_threads}</strong></td>
</tr>
<tr>
<td class="tcat" align="center" colspan="2"><span class="smalltext"><strong>{$lang->thread}</strong></span></td>
<td class="tcat mobile-fix" align="center"><span class="smalltext"><strong>{$lang->author}</strong></span></td>
<td class="tcat mobile-fix" align="center"><span class="smalltext"><strong>{$lang->replies}</strong></span></td>
<td class="tcat mobile-fix" align="center"><span class="smalltext"><strong>{$lang->views}</strong></span></td>
<td class="tcat mobile-fix" align="center"><span class="smalltext"><strong>{$lang->lastpost}</strong></span></td>
</tr>
{$similarthreadbits}
</table>

https://yourdomain.com/panyh/index.php?m...&expand=14

<tr>
 <td align="center" class="{$trow}" width="2%">{$icon}</td>
<td class="{$trow}">{$similar_thread['threadprefix']}<a href="{$similar_thread['threadlink']}">{$similar_thread['subject']}</a></td>
<td align="center" class="{$trow} mobile-fix">{$similar_thread['profilelink']}</td>
<td align="center" class="{$trow} mobile-fix"><a href="{$mybb->settings['bburl']}/misc.php?action=whoposted&tid={$similar_thread['tid']}" onclick="MyBB.whoPosted({$similar_thread['tid']}); return false;">{$similar_thread['replies']}</a></td>
<td align="center" class="{$trow} mobile-fix">{$similar_thread['views']}</td>
<td class="{$trow} mobile-fix" style="white-space: nowrap">
<span class="smalltext">{$lastpostdate}<br />
<a href="{$similar_thread['lastpostlink']}">{$lang->lastpost}</a>: {$lastposterlink}</span>
</td>
</tr>


Simply put, it is to put mobile-fix in the right place. Compare your own files to find out where they are.

I am not a professional coder, I hope you can understand this description.

example: https://www.sinovoter.com/

.xml   Default-theme.xml (Size: 62.73 KB / Downloads: 1)
↧
Search
Viewing all articles
Browse latest Browse all 690

Trending Articles

RAMAYAMPET Mandal Sarpanch | Upa-Sarpanch | Ward member Mobile Numbers Medak...

May 24, 2017, 2:00 am

लड़कियां सेक्स के दौरान क्यों करती है उह! आह!लड़कियां सेक्स के दौरान क्यों करती...

May 19, 2016, 1:54 am

Neem Baba Extra Questions Answer Class 6 English Poorvi

February 1, 2025, 5:19 am

Throw Back: 4×4 — Sikilitele (Ft Castro) Prod by JQ

March 5, 2015, 8:24 am

Rajasthan Board 10th Result 2016 Roll No wise & Name Wise

August 20, 2016, 5:13 pm

Lowe faces four theft charges

November 14, 2017, 6:52 pm

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Mafia, Murder & Mayhem In The Motor City: Detroit Mob Hit Timeline (1937-2007)

December 7, 2016, 3:57 pm

The 10 Tennessee Cities With The Largest Black Population For 2021

December 21, 2020, 10:12 am

Materials Around Us Class 6 Worksheet Science Chapter 6

October 3, 2024, 5:20 am

デスクトップ ヒープの枯渇

January 18, 2018, 8:31 pm

Best Suvichar in Hindi |बेस्ट सुविचार |शुभ विचार हिंदी में

March 7, 2020, 11:19 pm

Kanulanu Thaake Lyrics and translation | Manam (2014)

May 9, 2014, 5:45 am

Korean Sex Porn Videos: XXX Videos & Free Porn Movies

May 30, 2025, 9:29 pm

Teen Shot In Miami Drive-By Dies From Injuries

August 8, 2011, 1:16 pm

Download: IQ Muzatasha feat Shy D & Pmj – Ulesi NiFertilizer Yamavuto

March 22, 2018, 7:23 pm

Mahakal Attitude Status

February 29, 2020, 9:52 am

Property developer set up cannabis factory to help pay off debts...

August 3, 2015, 2:29 am

♡

July 11, 2015, 6:15 am

KB: How to troubleshoot issues when adding a Hyper-V host in System Center...

August 14, 2012, 10:05 am
Search