Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Basic Calendar Responsiveness (re-posted)
[Tutorial] Basic Calendar Responsiveness ** ( re-posted due to numerous user requests and complaints after I deleted my old tutorials. )

Add to global.css

@media (max-width:768px) {

.weekday_day_name strong {
    display: none;

.calendar .tcat[width*="1"] {
    padding: 1px;

[title="Sunday"]:after {
    content: 'Sun';

[title="Monday"]:after {
    content: 'Mon';

[title="Tuesday"]:after {
    content: 'Tue';

[title="Wednesday"]:after {
    content: 'Wed';

[title="Thursday"]:after {
    content: 'Thu';

[title="Friday"]:after {
    content: 'Fri';

[title="Saturday"]:after {
    content: 'Sat';

.weekday_day_height {
    height: 0px;

@media (min-width:768px) {
.weekday_day_height {
    height: 100px;  

@media (max-width:800px)  {
.weekday_day_height {
    height: 60px;  

@media (max-width:600px)  {
.weekday_day_height {
    height: 50px;  

@media (max-width:480px) {
.weekday_day_height {
    height: 40px;  

@media (max-width:320px) {
.weekday_day_height {
    height: 30px;  

Comment out:

#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; */

.wrapper {
    width: 85%;
/*    min-width: 970px; */
    max-width: 1500px;
    margin: auto auto;

Add to headerinclude:

<link rel="stylesheet" href="">

Edit Template: calendar_weekrow_day

Replace with

<td class="{$day_class} weekday_day_height" style="vertical-align: top;">
                    <div class="float_right smalltext"><a href="{$day_link}">{$day}</a></div>
                    <div class="clear">

Edit Template: calendar_weekdayheader

Replace with:

<td class="tcat weekday_day_name" align="center" width="14%" title="{$weekday_name}"><strong>{$weekday_name}</strong></td>

Edit template: calendar

Replace with:
<title>{$mybb->settings['bbname']} - {$lang->calendar}</title>
<div class="container">    
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder calendar">
             <td class="thead" colspan="8" style="text-align: center;"><a href="{$prev_link}" style="float: left;"><i class="fa fa-arrow-left"></i> </a><strong>{$monthnames[$month]} {$year}</strong><a href="{$next_link}" style="float: right;"><i class="fa fa-arrow-right"></i></a></td>
                <td class="tcat">&nbsp;</td>
<form action="calendar.php" method="post">
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
            <td class="trow1">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                        <td valign="top">{$addevent}</td>
                        <td align="right">
                        <span class="smalltext"><strong>{$lang->jump_month}</strong></span>
                        <select name="month">
                            <option value="{$month}">{$monthnames[$month]}</option>
                            <option value="{$month}">----------</option>
                            <option value="1">{$lang->alt_month_1}</option>
                            <option value="2">{$lang->alt_month_2}</option>
                            <option value="3">{$lang->alt_month_3}</option>
                            <option value="4">{$lang->alt_month_4}</option>
                            <option value="5">{$lang->alt_month_5}</option>
                            <option value="6">{$lang->alt_month_6}</option>
                            <option value="7">{$lang->alt_month_7}</option>
                            <option value="8">{$lang->alt_month_8}</option>
                            <option value="9">{$lang->alt_month_9}</option>
                            <option value="10">{$lang->alt_month_10}</option>
                            <option value="11">{$lang->alt_month_11}</option>
                            <option value="12">{$lang->alt_month_12}</option>
                        <select name="year">
                            <option value="{$year}">{$year}</option>
                            <option value="{$year}">----------</option>
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!

Forum Jump:

Users browsing this thread: 1 Guest(s)