Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Basic Calendar Responsiveness (re-posted)
#1
Information 
[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="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



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">
                    {$day_birthdays}
                    {$day_events}
                    </div>
                </td>

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:
Code:
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->calendar}</title>
{$headerinclude}
</head>
<body>
{$header}
<div class="container">    
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder calendar">
        <thead>
            <tr>
             <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>
            </tr>
            <tr>
                <td class="tcat">&nbsp;</td>
            {$weekday_headers}
            </tr>
        </thead>
        <tbody>
        {$calendar_rows}
        </tbody>
    </table>
<br>
<form action="calendar.php" method="post">
    <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
        <tr>
            <td class="trow1">
                <table width="100%" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <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>
                        <select name="year">
                            <option value="{$year}">{$year}</option>
                            <option value="{$year}">----------</option>
                            {$yearsel}
                        </select>
                        {$gobutton}
                        <br>
                        {$calendar_jump}
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        </table>
    </form>
</div>    
{$footer}
</body>
</html>
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)