Announcement

Directory

File	Folder Link
M - Announcement.php	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\app\models
V - all files	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\app\views\announcement
C - AnnouncementController.php & SettingController.php	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\app\controllers
backend.php	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\app\layouts
ckeditor -> index.php	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\plugins\ckeditor
style.css	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\admin\themes\black_and_white
backend.js & announcement.js & bulk_action.js	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\wolf\admin\javascript
default.css	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\public\themes\rckuc\css
rckuc.js & (All plugin files)	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement\rckuc\public\themes\rckuc\js
wolf_announce.sql	\\SYNAS\Allan\DOCUMENTATION\Module\Announcement

Step 1

Update: backend.php

Insert scripts file in <head> section
Add new tab for "Announcement"

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/backend.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/announcement.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/bulk_action.js"></script>
</head>

<!-- Add 'Announcement' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('announcement'); ?>"<?php if ($ctrl=='announcement') echo ' class="current"'; ?>><?php echo __('Announcement'); ?></a></li>
    </ul>
</body>

<head>
    <link href="<?php echo URI_PUBLIC; ?>wolf/admin/themes/<?php echo Setting::get('theme'); ?>/switch_button.css" id="css_theme" media="screen" rel="Stylesheet" type="text/css" />
    ...
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/backend.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/announcement.js"></script>
    <script type="text/javascript" src="<?php echo URI_PUBLIC; ?>wolf/admin/javascripts/bulk_action.js"></script>
</head>

<!-- Add 'Announcement' Tab -->
<body id="body_<?php echo $ctrl.'_'.Dispatcher::getAction(); ?>">
    <ul>
        <li id="page-plugin" class="plugin"><a href="<?php echo get_url('announcement'); ?>"<?php if ($ctrl=='announcement') echo ' class="current"'; ?>><?php echo __('Announcement'); ?></a></li>
    </ul>
</body>

Step 2

Update: wolf\plugins\ckeditor -> index.php
To enable Ckeditor

Update: function ckeditor_filter_setup()

in $controllers add one more field for "|announcement"

function ckeditor_filter_setup() {
    $config_path = (USE_MOD_REWRITE) ? 'ckeditor/' : '../../?/wolf/plugins/ckeditor/';
    $controllers = '(page|snippet|donate|story|volunteer|project|documentation|source_code|announcement|form_builder|portfolio|testimonial|client|portfolio_section|portfolio_highlight)';
    $actions = '(add|edit|create|view|table)';
    $pattern = '/^'.ADMIN_DIR.'\/'.$controllers.'\/'.$actions.'/';

    if (preg_match($pattern, CURRENT_URI)) {
        Plugin::addJavascript('ckeditor', 'scripts/ckeditor/ckeditor.js');
        Plugin::addJavascript('ckeditor', 'scripts/init.js');
        /* nasty way of including scripts */
        Plugin::$javascripts[] = $config_path.'ckeditor_config.js';
        // load it AFTER ckeditor_config!
//         Plugin::addJavascript('ckeditor', 'scripts/user/config.js');
    }

}

function ckeditor_filter_setup() {
    $config_path = (USE_MOD_REWRITE) ? 'ckeditor/' : '../../?/wolf/plugins/ckeditor/';
    $controllers = '(page|snippet|donate|story|volunteer|project|documentation|source_code|announcement|form_builder|portfolio|testimonial|client|portfolio_section|portfolio_highlight)';
    $actions = '(add|edit|create|view|table)';
    $pattern = '/^'.ADMIN_DIR.'\/'.$controllers.'\/'.$actions.'/';

    if (preg_match($pattern, CURRENT_URI)) {
        Plugin::addJavascript('ckeditor', 'scripts/ckeditor/ckeditor.js');
        Plugin::addJavascript('ckeditor', 'scripts/init.js');
        /* nasty way of including scripts */
        Plugin::$javascripts[] = $config_path.'ckeditor_config.js';
        // load it AFTER ckeditor_config!
//         Plugin::addJavascript('ckeditor', 'scripts/user/config.js');
    }

}

Step 3

Insert SQL Record into wolf_module_setting:
Add 3 status for:

Fullscreen Status
Popup Autoplay
Bannr Autoplay

Or add manually in Module Setting Tab

INSERT INTO `wolf_module_setting`
(`id`, `module`, `name`, `value_type`, `value`, `created_on`, `updated_on`, `created_by_id`, `updated_by_id`)
VALUES 
(NULL, 'announcement', 'Fullscreen', 'checkbox', '1', NOW(), NULL, NULL, NULL),
(NULL, 'announcement', 'Popup Autoplay', 'checkbox', '1', NOW(), NULL, NULL, NULL),
(NULL, 'announcement', 'Banner Autoplay', 'checkbox', '1', NOW(), NULL, NULL, NULL);

INSERT INTO `wolf_module_setting`
(`id`, `module`, `name`, `value_type`, `value`, `created_on`, `updated_on`, `created_by_id`, `updated_by_id`)
VALUES 
(NULL, 'announcement', 'Fullscreen', 'checkbox', '1', NOW(), NULL, NULL, NULL),
(NULL, 'announcement', 'Popup Autoplay', 'checkbox', '1', NOW(), NULL, NULL, NULL),
(NULL, 'announcement', 'Banner Autoplay', 'checkbox', '1', NOW(), NULL, NULL, NULL);

Step 4

Update: style.css

/* For Announcement  */
#announcement_page {
  max-height: 20rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#announcement_page > label {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  /* border-radius: 10px; */
  padding: 0.3rem;
  margin-bottom: 0.3rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* For Announcement  */
#announcement_page {
  max-height: 20rem;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

#announcement_page > label {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  /* border-radius: 10px; */
  padding: 0.3rem;
  margin-bottom: 0.3rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

Step 5

Update: backend.js
Insert:

// Switch
$(document).ready(function () {    
    // for page setting
    $("input.on_off_status").click(function () {
        if($(this).is(":checked")) {
            $(this).parents(".switch_container").find(".switch_label").text("On");
        } else {
            $(this).parents(".switch_container").find(".switch_label").text("Off");
        }
    })
})

// Switch
$(document).ready(function () {    
    // for page setting
    $("input.on_off_status").click(function () {
        if($(this).is(":checked")) {
            $(this).parents(".switch_container").find(".switch_label").text("On");
        } else {
            $(this).parents(".switch_container").find(".switch_label").text("Off");
        }
    })
})

Step 6

Create New Snippet: announcement

<?php
$announcements = Announcement::findByPageId((int)$this->id);
$activePopups = [];
$activeBanners = [];
$tz = new DateTimeZone('Asia/Kuala_Lumpur');
$now = new DateTime('now', $tz);

foreach ($announcements as $announcement) {
    if ((int)$announcement->status === 1) {
        $start = new DateTime($announcement->start_date, $tz);
        $end   = new DateTime($announcement->end_date, $tz);
        if ($now >= $start && $now <= $end) {
            if ($announcement->display_type == 'popup') {
                $activePopups[] = $announcement;
            } else if ($announcement->display_type == 'banner') {
                $activeBanners[] = $announcement;
            }
        }
    }
}

$fullscreen_status = htmlentities(ModuleSetting::findSetting('announcement', 'Fullscreen'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';
$popup_autoplay = htmlentities(ModuleSetting::findSetting('announcement', 'Popup Autoplay'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';
$banner_autoplay = htmlentities(ModuleSetting::findSetting('announcement', 'Banner Autoplay'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';

echo '<input type="hidden" id="fullscreen_status" value="'.$fullscreen_status.'">';
echo '<input type="hidden" id="popup_autoplay" value="'.$popup_autoplay.'">';
echo '<input type="hidden" id="banner_autoplay" value="'.$banner_autoplay.'">';

?>
<!-- Hidden announcement popups -->
<?php foreach ($activePopups as $announcement): 
    $modalId = "announcements_modal_" . $announcement->id;
?>
<div id="<?= $modalId ?>" class="announcements-popup mfp-hide">
    <div class="announcement-slide">
        <h2><?= $announcement->name ?></h2>
        <div class="announcement-content"><?= $announcement->description ?></div>
        <?php if ((int)$announcement->btn_status == 1) {
          $link = '#';
          if ($announcement->btn_type == 'external_link') {
            $link = $announcement->btn_external_link;
          } else if ($announcement->btn_type == 'assign_to_page') {
            $page = Page::findById((int)$announcement->btn_page_id);
            $link = URL_PUBLIC . (USE_MOD_REWRITE ? '' : '?') . $page->getUri() . ($page->getUri() ? URL_SUFFIX : '');
          }
          echo '<a class="btn-blue" href="'.$link.'">'.$announcement->btn_caption.'</a>';
        }
        ?>
    </div>
</div>
<?php endforeach; ?>

<div class="banner-announcement">
    <?php foreach ($activeBanners as $announcement): ?>
        <div>
            <div class="announcement-container">
                <input type="hidden" class="announcement_id" value="<?= $announcement->id ?>">
                <input type="hidden" class="announcement_display_option" value="<?= $announcement->display_option ?>">
                <h2><?= $announcement->name ?></h2>
                <div class="announcement-content"><?= $announcement->description ?></div>
                <?php if ((int)$announcement->btn_status == 1) {
                $link = '#';
                if ($announcement->btn_type == 'external_link') {
                    $link = $announcement->btn_external_link;
                } else if ($announcement->btn_type == 'assign_to_page') {
                    $page = Page::findById((int)$announcement->btn_page_id);
                    $link = URL_PUBLIC . (USE_MOD_REWRITE ? '' : '?') . $page->getUri() . ($page->getUri() ? URL_SUFFIX : '');
                }
                echo '<a href="'.$link.'">'.$announcement->btn_caption.' ></a>';
                }
                ?>
            <div class="slide-counter"></div>
            </div>
        </div>
    <?php endforeach; ?>
</div>


<?php 
if (!empty($activePopups)):
?>
<!-- Pass announcements data to JS -->
<script>
    window.ANNOUNCEMENTS_ITEMS = <?php
        $items = [];
        foreach ($activePopups as $announcement) {
            if ($announcement->display_type == 'popup') {
                $items[] = [
                    "src"            => "#announcements_modal_" . $announcement->id,
                    "type"           => "inline",
                    "midClick"       => true,
                    "inline"         => ["clone" => true],
                    "id"             => $announcement->id,
                    "display_option" => $announcement->display_option,
                ];
            }
        }
        echo json_encode($items);
    ?>;
</script>
<?php endif; ?>

<?php
$announcements = Announcement::findByPageId((int)$this->id);
$activePopups = [];
$activeBanners = [];
$tz = new DateTimeZone('Asia/Kuala_Lumpur');
$now = new DateTime('now', $tz);

foreach ($announcements as $announcement) {
    if ((int)$announcement->status === 1) {
        $start = new DateTime($announcement->start_date, $tz);
        $end   = new DateTime($announcement->end_date, $tz);
        if ($now >= $start && $now <= $end) {
            if ($announcement->display_type == 'popup') {
                $activePopups[] = $announcement;
            } else if ($announcement->display_type == 'banner') {
                $activeBanners[] = $announcement;
            }
        }
    }
}

$fullscreen_status = htmlentities(ModuleSetting::findSetting('announcement', 'Fullscreen'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';
$popup_autoplay = htmlentities(ModuleSetting::findSetting('announcement', 'Popup Autoplay'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';
$banner_autoplay = htmlentities(ModuleSetting::findSetting('announcement', 'Banner Autoplay'), ENT_COMPAT, 'UTF-8') == 1 ? 'On' : 'Off';

echo '<input type="hidden" id="fullscreen_status" value="'.$fullscreen_status.'">';
echo '<input type="hidden" id="popup_autoplay" value="'.$popup_autoplay.'">';
echo '<input type="hidden" id="banner_autoplay" value="'.$banner_autoplay.'">';

?>
<!-- Hidden announcement popups -->
<?php foreach ($activePopups as $announcement): 
    $modalId = "announcements_modal_" . $announcement->id;
?>
<div id="<?= $modalId ?>" class="announcements-popup mfp-hide">
    <div class="announcement-slide">
        <h2><?= $announcement->name ?></h2>
        <div class="announcement-content"><?= $announcement->description ?></div>
        <?php if ((int)$announcement->btn_status == 1) {
          $link = '#';
          if ($announcement->btn_type == 'external_link') {
            $link = $announcement->btn_external_link;
          } else if ($announcement->btn_type == 'assign_to_page') {
            $page = Page::findById((int)$announcement->btn_page_id);
            $link = URL_PUBLIC . (USE_MOD_REWRITE ? '' : '?') . $page->getUri() . ($page->getUri() ? URL_SUFFIX : '');
          }
          echo '<a class="btn-blue" href="'.$link.'">'.$announcement->btn_caption.'</a>';
        }
        ?>
    </div>
</div>
<?php endforeach; ?>

<div class="banner-announcement">
    <?php foreach ($activeBanners as $announcement): ?>
        <div>
            <div class="announcement-container">
                <input type="hidden" class="announcement_id" value="<?= $announcement->id ?>">
                <input type="hidden" class="announcement_display_option" value="<?= $announcement->display_option ?>">
                <h2><?= $announcement->name ?></h2>
                <div class="announcement-content"><?= $announcement->description ?></div>
                <?php if ((int)$announcement->btn_status == 1) {
                $link = '#';
                if ($announcement->btn_type == 'external_link') {
                    $link = $announcement->btn_external_link;
                } else if ($announcement->btn_type == 'assign_to_page') {
                    $page = Page::findById((int)$announcement->btn_page_id);
                    $link = URL_PUBLIC . (USE_MOD_REWRITE ? '' : '?') . $page->getUri() . ($page->getUri() ? URL_SUFFIX : '');
                }
                echo '<a href="'.$link.'">'.$announcement->btn_caption.' ></a>';
                }
                ?>
            <div class="slide-counter"></div>
            </div>
        </div>
    <?php endforeach; ?>
</div>


<?php 
if (!empty($activePopups)):
?>
<!-- Pass announcements data to JS -->
<script>
    window.ANNOUNCEMENTS_ITEMS = <?php
        $items = [];
        foreach ($activePopups as $announcement) {
            if ($announcement->display_type == 'popup') {
                $items[] = [
                    "src"            => "#announcements_modal_" . $announcement->id,
                    "type"           => "inline",
                    "midClick"       => true,
                    "inline"         => ["clone" => true],
                    "id"             => $announcement->id,
                    "display_option" => $announcement->display_option,
                ];
            }
        }
        echo json_encode($items);
    ?>;
</script>
<?php endif; ?>

Step 7

Create New Snippet: js-magnific

<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="<?php echo THEME_PATH ?>js/magnific-popup.min.css">

<!-- Magnific Popup JS -->
<script src="<?php echo THEME_PATH ?>js/jquery.magnific-popup.min.js"></script>

<!-- Magnific Popup CSS -->
<link rel="stylesheet" href="<?php echo THEME_PATH ?>js/magnific-popup.min.css">

<!-- Magnific Popup JS -->
<script src="<?php echo THEME_PATH ?>js/jquery.magnific-popup.min.js"></script>

Step 8

Create New Snippet: js-slick

<!-- Slick CSS -->
<link rel="stylesheet" href="<?php echo THEME_PATH ?>js/slick.css">

<!-- Slick JS -->
<script src="<?php echo THEME_PATH ?>js/slick.min.js"></script>

<!-- Slick CSS -->
<link rel="stylesheet" href="<?php echo THEME_PATH ?>js/slick.css">

<!-- Slick JS -->
<script src="<?php echo THEME_PATH ?>js/slick.min.js"></script>

Step 9

Include: 3 new snippet to all Layout

<!-- in <head> section-->
<?php $this->includeSnippet('js-magnific') ?>
<?php $this->includeSnippet('js-slick') ?>

<!-- after <body> tag insert : -->
<?php $this->includeSnippet('announcement') ?>

<!-- in <head> section-->
<?php $this->includeSnippet('js-magnific') ?>
<?php $this->includeSnippet('js-slick') ?>

<!-- after <body> tag insert : -->
<?php $this->includeSnippet('announcement') ?>

Step 10

Update: default.css

/* For Announcement */
:root {
	--minimum-width: 1200px;
	--bg-color-blue: #0c3c7c;
}

.mfp-content {
	position: absolute !important;
	top: 50%;
	left: 50%;
	width: var(--minimum-width) !important;
	height: 80%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 10px;
	padding: 2rem 0 2.5rem 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.announcements-popup {
	width: 100%;
	max-height: 100%;
}

.announcement-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	max-height: 100%;
}

.announcement-content {
	margin: 1rem 0;
	max-width: 75%;
	overflow: auto;
}

.announcement-indicators {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.announcement-indicators .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	cursor: pointer;
	background: url('themes/dot-inactive.png') no-repeat center center !important;
	background-size: 40px 40px !important;
}

.announcement-indicators .dot.active {
	background: url('themes/dot-active.png') no-repeat center center !important;
	background-size: 40px 40px !important;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: none !important; /* remove triangles */
}

.mfp-arrow-left {
  background: url('themes/arrow-left.png') no-repeat center center !important;
  background-size: 30px 30px !important;
  width: 40px;
  height: 40px;
}

.mfp-arrow-right {
  background: url('themes/arrow-right.png') no-repeat center center !important;
  background-size: 30px 30px !important;
  width: 40px;
  height: 40px;
}

.mfp-arrow-left {
	left: -5rem !important;
}

.mfp-arrow-right {
	right: -5rem !important;
}

.mfp-close {
	background: url('themes/close.png') no-repeat center center !important;
  	background-size: 15px 15px !important;
	width: 20px;
  	height: 20px;
}

.mfp-content.fullscreen {
	height: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.mfp-content.fullscreen .mfp-arrow-left {
	left: 0 !important;
}

.mfp-content.fullscreen .mfp-arrow-right {
	right: 0 !important;
}

@media only screen and (max-width: 1400px) {
	.mfp-content {
		width: 100% !important;
	}

	.mfp-content .mfp-arrow-left {
		left: 0 !important;
	}

	.mfp-content .mfp-arrow-right {
		right: 0 !important;
	}
}

/* For Banner Announcement */
.banner-announcement {
	color: white;
	background-color: var(--bg-color-blue);
	position: relative;
}

.banner-announcement h2 {
	color: white;
}

.banner-announcement .slick-prev {
	left: 0 !important;
	background: url('themes/arrow-left.png') no-repeat center center !important;
	
}

.banner-announcement .slick-next {
	right: 0 !important;
	background: url('themes/arrow-right.png') no-repeat center center !important;
}

.banner-announcement .slick-prev,
.banner-announcement .slick-next {
	margin-top: 0 !important;
	transform: translateY(-50%);
	background-size: 30px 30px !important;
	width: 40px;
	height: 40px;
}

.banner-announcement .announcement-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 2rem;
}

.slide-counter {
	font-weight: bold;
	position: absolute;
	bottom: 0.5rem;
	right: 4rem;
}

.slick-slide {
	position: relative;
}

.banner-announcement .close-banner-announcement {
	cursor: pointer;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	border: none;
	background: url('themes/close.png') no-repeat center center !important;
  	background-size: 15px 15px !important;
	width: 20px;
  	height: 20px;
}

.banner-announcement .slick-prev:hover,
.banner-announcement .slick-next:hover,
.banner-announcement .close-banner-announcement:hover {
	opacity: 0.65;
}

.banner-announcement .announcement-container > a:visited {
	color: #f7a81b;
}

.banner-announcement .announcement-content {
	max-width: 85%;
	height: 5rem;
}

@media only screen and (max-width: 1300px) { 
	body { min-width: auto; min-width: initial; min-width: none; }
	.wrapper { max-width: auto; max-width: initial; max-width: none; width: auto; width: initial; padding: 50px 30px; }
	#header-container { width: auto; width: initial; }
	#menu-top { margin-left: 185px; }
	#menu a, #menu a:visited { padding: 30px 15px; }
	#highlights .item .details { min-height: 350px; }
	#donate-zone .wrapper { padding: 40px 30px; }
	#past-project-list .wrapper, #upcoming-project-list .wrapper, #ongoing-project-list .wrapper, #event-list .wrapper, #news-list .wrapper, #fellowship-list .wrapper { padding: 0px 30px; }
	body.project-info .date { margin-right: 12px; margin-bottom: 12px; }
	body.project-info .text { margin-left: 100px; }
	#ry-menu .wrapper { padding: 0px 50px; }
	#ry-menu .slick-prev { left: 15px; }
	#ry-menu .slick-next { right: 15px; }
	#footer { padding: 40px 30px; }
}
@media only screen and (max-width: 1150px) { 
	#logo { position: relative; text-align: center; margin-bottom: 10px; }
	#menu-top { position: initial; margin: auto; text-align: center; }
	#menu{ height: 38px; text-align: center; }
	#menu a, #menu a:visited { padding: 5px 15px 18px 15px; }
	#menu ul ul { top: 38px; padding-top: 0px; }
	#menu ul li { display: inline-block; *display: inline; zoom: 1; float: none; }
	#banner-contant { top: 147px; margin-bottom: 147px;}
	#volunteer-expertise ul li { width: 26%; }
	#volunteer-expertise ul { text-align: left; }
	#social-media-icons { margin: 10px 0px; position: absolute; top: 0px; right: 20px; }
	#footer #social-media-icons { position: relative; margin: 20px 0px; right: 0px; }
}
@media only screen and (max-width: 1024px) { 
	body { font-size: 14px; }
	.nivo-directionNav a { width: 40px !important; height: 40px !important; background-size: 40px; }
	#menu { height: auto; height: initial; }
    #menu a, #menu a:visited { padding: 5px 10px 10px 10px; }
	#menu ul ul { top: 29px; }
	#social-media-icons a { margin: 0px 10px; }
	.nivo-prevNav { padding-left: 30px !important; background-position-x: 30px !important; }
	.nivo-nextNav { padding-right: 30px !important; } 
	#banner-contant { top: 137px; margin-bottom: 137px;}
	
	h1 { font-size: 32px; }
	#venue-zone .logo, #venue-zone .venue { padding-right: 2%; }
	#venue-zone .wrapper { display: block; }
	#venue-zone .logo { display: block; width: 100%; padding-right: 0px; }
	#venue-zone .logo img { margin: 0px auto 20px auto; }
	#venue-zone .venue { display: block; float: left; width: 46%; padding: 0px 1.5%;  }
	#venue-zone .datetime { display: block; float: right; width: 46%; padding: 0px 1.5%; }
	
	#highlights .item .details > div { padding: 30px 50px; }
	#highlights .item .details { min-height: auto; min-height: initial; min-height: none; }
	#donate-zone { font-size: 16px; }
	#donate-zone .btn a { font-size: 16px; }
	.rotary-club-of-kuching-unity-city #main-content table { margin-left: 0px; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area ol, .rotary-club-of-kuching-unity-city table.four-way-test ol { margin: 0px 30px; }
	.rotary-club-of-kuching-unity-city table.four-way-test td:first-child, .rotary-club-of-kuching-unity-city table.seven-focus-area td:last-child { padding: 120px 30px 30px 30px !important; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area tr { position: relative; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area td:first-child { position: absolute; width: 94%; padding: 30px 3% !important; left: 0px; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area h2, .rotary-club-of-kuching-unity-city table.four-way-test h2 { line-height: 40px; font-size: 35px; }
	
	.rotary-club-of-kuching-unity-city table.four-way-test tr { position: relative; }
	.rotary-club-of-kuching-unity-city table.four-way-test td:last-child { position: absolute; width: 94%; left: 0px; padding: 30px 3%; }
	.rotary-club-of-kuching-unity-city table.four-way-test h2 span { display: inline-block; *display: inline; zoom: 1; font-size: 24px; }
	
	body.project-info .wrapper { padding-bottom: 30px; }
	body.project-info div.table .table-row { margin: 2%; width: 46%; }
	body.project-info div.table.bullet h3 { font-size: 25px; }
	body.project-info div.table .table-row .table-cell:last-child { font-size: 45px; line-height: 1;  }
	body.project-info div.table .table-row .table-cell .name { font-size: 22px; margin-bottom: 10px; }
	body.project-info #youtube iframe { width: 600px; max-width: 100%; margin: 0px 0px 30px 0px; }
	
	.gallery { margin-top: 35px; }
	
	body.member #main-content table.theme td { width: 100% !important; float: left; box-sizing: border-box; }
	
	#president-message .text { padding-left: 10px; }
	
	#donation-list .item { width: 35%; margin: 0px 2.5% 30px 2.5%; }
	#volunteer-list .item { width: 35%; margin: 0px 2.5% 30px 2.5%; }
	
	#sitemap ul.col1, #sitemap ul.col2 { width: 100%; display: block; }
	#sitemap ul.col1 { margin-bottom: 0px; }
	#sitemap ul.col2 { margin-top: 0px; }
	
	#story-list .tab-menu .cat a { padding: 8px 18px; }
	#story-list .list .story { width: 20%; margin: 0px 2.5% 30px 2.5%; }
	
	/* .mfp-container { padding-left: 10px !important; padding-right: 35px !important; } */
	/* .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { padding: 20px !important; } */
	/* .mfp-close { width: 30px !important; height: 30px !important; right: -30px !important; } */
	a.link-spay-popup img { height: 40px; }
	
	.footermenu a { margin: 0px 15px 10px 15px; }
	.footermenu span.separator:first-child { display: none; }
	#footer-menu2 { margin-left: 0px; display: block; margin-top: 10px;  }
}
@media only screen and (max-width: 880px) { 
	body { overflow-x: hidden; }
    .project .items .item, #donate .project .items .item { width: 100%; margin-right: 0px; margin-bottom: 35px; }
	.home .project .items .item.last, .project .items .item:last-child { margin-bottom: 0px; }
	.project .items .item {  }
	.project .items .item .info { height: auto !important; height: initial !important; }
	.project .items .item .info h2 {  }
	#project-zone a.link { margin-top: 30px; display: inline-block; *display: inline; zoom: 1; }
	
	#donate-zone .desc { width: 100%; margin-bottom: 10px; }
	#donate-zone .btn { width: 100%; }
	
	#modal-content .item { padding: 35px; }
	
	#newsevent-list .list .item { width: 100%; margin-right: 0px; margin-bottom: 35px; }
	#newsevent-list .list .item .info { height: auto !important; height: initial !important; }
}
@media only screen and (max-width: 768px) { 
	h1 { font-size: 28px; }
	#header-container { padding: 0px 30px; }
    #menu { display: none; }
	#mobile-menu { display: block; }
	.slicknav_btn { position: absolute !important; right: 30px; top: 45px; }
	#logo { text-align: left; margin-bottom: 0px; }
	#menu-top { margin-bottom: 10px; }
	.nivo-controlNav { padding: 5px 0px; }
	.nivo-controlNav a { height: 18px !important; width: 18px !important; background-size: cover !important; }
	#banner-contant { top: 108px; margin-bottom: 108px; }
	
	.wrapper { padding: 40px 30px; }
	body { font-size: 14px; }
	.breadcrumb a, .breadcrumb-current, .btn-blue, a.btn-blue { font-size: 13px; }
	
	table.twocols td { float:left; width: 100% !important; margin-bottom: 20px; }
	table.twocols td img { margin: auto; }
	
	.rotary-club-of-kuching-unity-city #main-content .btn-blue { width: 180px; }
	.rotary-club-of-kuching-unity-city #main-content table.clubhistory td:last-child { width: 95px !important; }
	.rotary-club-of-kuching-unity-city #main-content table.clubhistory td { padding: 15px 10px; }
	
	
	#volunteer-expertise ul li { width: 40%; }
	
	#venue-zone .venue { width: 96%; padding: 0px 2%; border-right: none; margin-bottom: 30px; }
	#venue-zone .datetime { width: 96%; padding: 0px 2%;  }
	
	#highlights .item a.img { width: 100%; display: block; }
	#highlights .item .details { width: 100%; float: left; height: auto !important; height: initial !important; }
	#highlights .item .details > div { text-align: center; }
	
	#donate-zone { font-size: 15px; } 
	#donate-zone .btn a { font-size: 15px; }
	
	#president-message .img { display: block; text-align: center; }
	#president-message .img img { margin: 0px auto 20px auto; }
	#president-message .text { padding: 0px; }
	#president-message .text h2 { text-align: center; }
	
	body.project-info .date { margin-right: 0px; margin-bottom: 0px; }
	body.project-info div.table { margin-top: 30px; }
	body.project-info div.table .table-row { width: 96%; margin: 0px 2% 25px 2%; } 
	body.project-info div.table .table-row:last-child { margin-bottom: 0px; }
	body.project-info .text { margin-left: 85px; }
	
	.album-cover { margin-right: 4%!important; width: 48%; margin-bottom: 15px; }
	.album-cover.col2 { margin-right: 0!important; }
	
	#member-list .item { width: 45%; margin-bottom: 35px; max-width: auto; max-width: initial; max-width: none; }
	#member-page p { padding: 0px; }
	
	#magazine-list .wrapper { padding-bottom: 10px; }
	#magazine-list .items >.item { width: 48%; margin-right: 4%; }
	#magazine-list .items >.item.even { margin-right: 0px; }

	#award-list .wrapper { padding-bottom: 10px; }
	#award-list>.item { width: 48%; margin-right: 4%; }
	#award-list>.item.even { margin-right: 0px; }

	.tab-menu .cat a { padding: 6px 20px; border-radius: 15px 15px 0px 0px; margin: 0px 2px; border: solid 1px #fff; border-bottom: none; line-height: 1; }
	
	#story-list .tab-menu .cat { display: table; float: left; width: 48%; margin: 0px 1%; }
	#story-list .tab-menu .cat a { height: 25px; display: table-cell; vertical-align: middle; }
	#story-list .tab-menu >div::after { content: ""; clear: both; display: block; } 
	
	#story-list .featured .story .img { float: none !important; width: auto; width: initial; }
	#story-list .featured .story .text { float: none; width: 100%; display: block; height: auto; height: initial; }
	#story-list .featured .story .text > div { padding: 0px; text-align: center; }
	#story-list .featured .story .text > div .story { text-align: justify; }
	#story-list .list { margin-top: 20px; text-align: center; }
	#story-list .list .story { width: 35%; float: none; display: inline-block; *display: inline; zoom: 1; margin: 0px 5% 30px 5%; }
	
	.tbContactform td { width: 100%; float: left; }
	.tbContactform td[colspan="2"] input, .tbContactform input.text { margin: 0px 0px 15px 0px; width: 93.5%; padding: 14px 3%; }
	.tbContactform textarea { margin: 0px 0px 15px 0px; padding: 14px 3%; width: 93.5%; }
	td.captcha { text-align: center; }div.g-recaptcha { display: inline-block; *display: inline; zoom: 1; width: 100%; }
	div.g-recaptcha > div { width: 100% !important; height: auto !important; height: initial !important; height: none !important; max-width: 304px; margin: auto; }
	div.g-recaptcha iframe { width: 100% !important; }
	.tbContactform input[type="button"] { margin: 20px auto 0px auto !important; width: 130px; }
	.tbContactform td.button { text-align: center !important; }
	
}
@media only screen and (max-width:650px){
	.rotary-club-of-kuching-unity-city table.priorities td { float: left; width: 100%; }
	.rotary-club-of-kuching-unity-city table.priorities td:first-child { padding-bottom: 0px; }
	.rotary-club-of-kuching-unity-city table.priorities td:last-child { padding-top: 0px; }
	
	#donation-list .item { width: 80%; display: block; max-width: 80%; margin: 0px auto 30px auto; text-align: center; }
	#volunteer-list .item { width: 80%; display: block; max-width: 80%; margin: 0px auto 30px auto; text-align: center; }
	#donation-list .item h2, #volunteer-list .item h2 { width: 250px !important; height: initial !important; display: block; }
	#donation-list .item .info, #volunteer-list .item .info { height: auto !important; height: initial !important; }
	
	#magazine-list .items >.item a { padding: 15px; }
	#award-list>.item>.frame { padding: 15px; }
	
	#story-list .list .story { width: 40%; }
	#story-list .tab-menu .cat a { height: 35px; padding: 5px 20px; }
}
@media only screen and (max-width:550px){
	.rotary-club-of-kuching-unity-city table.four-way-test h2, .rotary-club-of-kuching-unity-city table.seven-focus-area h2 { font-size: 25px; }
	#member-list .item .rotary_year { font-size: 18px; }
	#member-list .item h3 { font-size: 14px; }
	#member-list .item a.btn-blue { padding: 12px 15px; }
}

/* For Announcement */
:root {
	--minimum-width: 1200px;
	--bg-color-blue: #0c3c7c;
}

.mfp-content {
	position: absolute !important;
	top: 50%;
	left: 50%;
	width: var(--minimum-width) !important;
	height: 80%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 10px;
	padding: 2rem 0 2.5rem 0;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.announcements-popup {
	width: 100%;
	max-height: 100%;
}

.announcement-slide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	max-height: 100%;
}

.announcement-content {
	margin: 1rem 0;
	max-width: 75%;
	overflow: auto;
}

.announcement-indicators {
	position: absolute;
	bottom: 0.5rem;
	left: 50%;
	transform: translateX(-50%);
}

.announcement-indicators .dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
	cursor: pointer;
	background: url('themes/dot-inactive.png') no-repeat center center !important;
	background-size: 40px 40px !important;
}

.announcement-indicators .dot.active {
	background: url('themes/dot-active.png') no-repeat center center !important;
	background-size: 40px 40px !important;
}

.mfp-arrow:before,
.mfp-arrow:after {
  content: none !important; /* remove triangles */
}

.mfp-arrow-left {
  background: url('themes/arrow-left.png') no-repeat center center !important;
  background-size: 30px 30px !important;
  width: 40px;
  height: 40px;
}

.mfp-arrow-right {
  background: url('themes/arrow-right.png') no-repeat center center !important;
  background-size: 30px 30px !important;
  width: 40px;
  height: 40px;
}

.mfp-arrow-left {
	left: -5rem !important;
}

.mfp-arrow-right {
	right: -5rem !important;
}

.mfp-close {
	background: url('themes/close.png') no-repeat center center !important;
  	background-size: 15px 15px !important;
	width: 20px;
  	height: 20px;
}

.mfp-content.fullscreen {
	height: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.mfp-content.fullscreen .mfp-arrow-left {
	left: 0 !important;
}

.mfp-content.fullscreen .mfp-arrow-right {
	right: 0 !important;
}

@media only screen and (max-width: 1400px) {
	.mfp-content {
		width: 100% !important;
	}

	.mfp-content .mfp-arrow-left {
		left: 0 !important;
	}

	.mfp-content .mfp-arrow-right {
		right: 0 !important;
	}
}

/* For Banner Announcement */
.banner-announcement {
	color: white;
	background-color: var(--bg-color-blue);
	position: relative;
}

.banner-announcement h2 {
	color: white;
}

.banner-announcement .slick-prev {
	left: 0 !important;
	background: url('themes/arrow-left.png') no-repeat center center !important;
	
}

.banner-announcement .slick-next {
	right: 0 !important;
	background: url('themes/arrow-right.png') no-repeat center center !important;
}

.banner-announcement .slick-prev,
.banner-announcement .slick-next {
	margin-top: 0 !important;
	transform: translateY(-50%);
	background-size: 30px 30px !important;
	width: 40px;
	height: 40px;
}

.banner-announcement .announcement-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 2rem;
}

.slide-counter {
	font-weight: bold;
	position: absolute;
	bottom: 0.5rem;
	right: 4rem;
}

.slick-slide {
	position: relative;
}

.banner-announcement .close-banner-announcement {
	cursor: pointer;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	border: none;
	background: url('themes/close.png') no-repeat center center !important;
  	background-size: 15px 15px !important;
	width: 20px;
  	height: 20px;
}

.banner-announcement .slick-prev:hover,
.banner-announcement .slick-next:hover,
.banner-announcement .close-banner-announcement:hover {
	opacity: 0.65;
}

.banner-announcement .announcement-container > a:visited {
	color: #f7a81b;
}

.banner-announcement .announcement-content {
	max-width: 85%;
	height: 5rem;
}

@media only screen and (max-width: 1300px) { 
	body { min-width: auto; min-width: initial; min-width: none; }
	.wrapper { max-width: auto; max-width: initial; max-width: none; width: auto; width: initial; padding: 50px 30px; }
	#header-container { width: auto; width: initial; }
	#menu-top { margin-left: 185px; }
	#menu a, #menu a:visited { padding: 30px 15px; }
	#highlights .item .details { min-height: 350px; }
	#donate-zone .wrapper { padding: 40px 30px; }
	#past-project-list .wrapper, #upcoming-project-list .wrapper, #ongoing-project-list .wrapper, #event-list .wrapper, #news-list .wrapper, #fellowship-list .wrapper { padding: 0px 30px; }
	body.project-info .date { margin-right: 12px; margin-bottom: 12px; }
	body.project-info .text { margin-left: 100px; }
	#ry-menu .wrapper { padding: 0px 50px; }
	#ry-menu .slick-prev { left: 15px; }
	#ry-menu .slick-next { right: 15px; }
	#footer { padding: 40px 30px; }
}
@media only screen and (max-width: 1150px) { 
	#logo { position: relative; text-align: center; margin-bottom: 10px; }
	#menu-top { position: initial; margin: auto; text-align: center; }
	#menu{ height: 38px; text-align: center; }
	#menu a, #menu a:visited { padding: 5px 15px 18px 15px; }
	#menu ul ul { top: 38px; padding-top: 0px; }
	#menu ul li { display: inline-block; *display: inline; zoom: 1; float: none; }
	#banner-contant { top: 147px; margin-bottom: 147px;}
	#volunteer-expertise ul li { width: 26%; }
	#volunteer-expertise ul { text-align: left; }
	#social-media-icons { margin: 10px 0px; position: absolute; top: 0px; right: 20px; }
	#footer #social-media-icons { position: relative; margin: 20px 0px; right: 0px; }
}
@media only screen and (max-width: 1024px) { 
	body { font-size: 14px; }
	.nivo-directionNav a { width: 40px !important; height: 40px !important; background-size: 40px; }
	#menu { height: auto; height: initial; }
    #menu a, #menu a:visited { padding: 5px 10px 10px 10px; }
	#menu ul ul { top: 29px; }
	#social-media-icons a { margin: 0px 10px; }
	.nivo-prevNav { padding-left: 30px !important; background-position-x: 30px !important; }
	.nivo-nextNav { padding-right: 30px !important; } 
	#banner-contant { top: 137px; margin-bottom: 137px;}
	
	h1 { font-size: 32px; }
	#venue-zone .logo, #venue-zone .venue { padding-right: 2%; }
	#venue-zone .wrapper { display: block; }
	#venue-zone .logo { display: block; width: 100%; padding-right: 0px; }
	#venue-zone .logo img { margin: 0px auto 20px auto; }
	#venue-zone .venue { display: block; float: left; width: 46%; padding: 0px 1.5%;  }
	#venue-zone .datetime { display: block; float: right; width: 46%; padding: 0px 1.5%; }
	
	#highlights .item .details > div { padding: 30px 50px; }
	#highlights .item .details { min-height: auto; min-height: initial; min-height: none; }
	#donate-zone { font-size: 16px; }
	#donate-zone .btn a { font-size: 16px; }
	.rotary-club-of-kuching-unity-city #main-content table { margin-left: 0px; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area ol, .rotary-club-of-kuching-unity-city table.four-way-test ol { margin: 0px 30px; }
	.rotary-club-of-kuching-unity-city table.four-way-test td:first-child, .rotary-club-of-kuching-unity-city table.seven-focus-area td:last-child { padding: 120px 30px 30px 30px !important; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area tr { position: relative; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area td:first-child { position: absolute; width: 94%; padding: 30px 3% !important; left: 0px; }
	.rotary-club-of-kuching-unity-city table.seven-focus-area h2, .rotary-club-of-kuching-unity-city table.four-way-test h2 { line-height: 40px; font-size: 35px; }
	
	.rotary-club-of-kuching-unity-city table.four-way-test tr { position: relative; }
	.rotary-club-of-kuching-unity-city table.four-way-test td:last-child { position: absolute; width: 94%; left: 0px; padding: 30px 3%; }
	.rotary-club-of-kuching-unity-city table.four-way-test h2 span { display: inline-block; *display: inline; zoom: 1; font-size: 24px; }
	
	body.project-info .wrapper { padding-bottom: 30px; }
	body.project-info div.table .table-row { margin: 2%; width: 46%; }
	body.project-info div.table.bullet h3 { font-size: 25px; }
	body.project-info div.table .table-row .table-cell:last-child { font-size: 45px; line-height: 1;  }
	body.project-info div.table .table-row .table-cell .name { font-size: 22px; margin-bottom: 10px; }
	body.project-info #youtube iframe { width: 600px; max-width: 100%; margin: 0px 0px 30px 0px; }
	
	.gallery { margin-top: 35px; }
	
	body.member #main-content table.theme td { width: 100% !important; float: left; box-sizing: border-box; }
	
	#president-message .text { padding-left: 10px; }
	
	#donation-list .item { width: 35%; margin: 0px 2.5% 30px 2.5%; }
	#volunteer-list .item { width: 35%; margin: 0px 2.5% 30px 2.5%; }
	
	#sitemap ul.col1, #sitemap ul.col2 { width: 100%; display: block; }
	#sitemap ul.col1 { margin-bottom: 0px; }
	#sitemap ul.col2 { margin-top: 0px; }
	
	#story-list .tab-menu .cat a { padding: 8px 18px; }
	#story-list .list .story { width: 20%; margin: 0px 2.5% 30px 2.5%; }
	
	/* .mfp-container { padding-left: 10px !important; padding-right: 35px !important; } */
	/* .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { padding: 20px !important; } */
	/* .mfp-close { width: 30px !important; height: 30px !important; right: -30px !important; } */
	a.link-spay-popup img { height: 40px; }
	
	.footermenu a { margin: 0px 15px 10px 15px; }
	.footermenu span.separator:first-child { display: none; }
	#footer-menu2 { margin-left: 0px; display: block; margin-top: 10px;  }
}
@media only screen and (max-width: 880px) { 
	body { overflow-x: hidden; }
    .project .items .item, #donate .project .items .item { width: 100%; margin-right: 0px; margin-bottom: 35px; }
	.home .project .items .item.last, .project .items .item:last-child { margin-bottom: 0px; }
	.project .items .item {  }
	.project .items .item .info { height: auto !important; height: initial !important; }
	.project .items .item .info h2 {  }
	#project-zone a.link { margin-top: 30px; display: inline-block; *display: inline; zoom: 1; }
	
	#donate-zone .desc { width: 100%; margin-bottom: 10px; }
	#donate-zone .btn { width: 100%; }
	
	#modal-content .item { padding: 35px; }
	
	#newsevent-list .list .item { width: 100%; margin-right: 0px; margin-bottom: 35px; }
	#newsevent-list .list .item .info { height: auto !important; height: initial !important; }
}
@media only screen and (max-width: 768px) { 
	h1 { font-size: 28px; }
	#header-container { padding: 0px 30px; }
    #menu { display: none; }
	#mobile-menu { display: block; }
	.slicknav_btn { position: absolute !important; right: 30px; top: 45px; }
	#logo { text-align: left; margin-bottom: 0px; }
	#menu-top { margin-bottom: 10px; }
	.nivo-controlNav { padding: 5px 0px; }
	.nivo-controlNav a { height: 18px !important; width: 18px !important; background-size: cover !important; }
	#banner-contant { top: 108px; margin-bottom: 108px; }
	
	.wrapper { padding: 40px 30px; }
	body { font-size: 14px; }
	.breadcrumb a, .breadcrumb-current, .btn-blue, a.btn-blue { font-size: 13px; }
	
	table.twocols td { float:left; width: 100% !important; margin-bottom: 20px; }
	table.twocols td img { margin: auto; }
	
	.rotary-club-of-kuching-unity-city #main-content .btn-blue { width: 180px; }
	.rotary-club-of-kuching-unity-city #main-content table.clubhistory td:last-child { width: 95px !important; }
	.rotary-club-of-kuching-unity-city #main-content table.clubhistory td { padding: 15px 10px; }
	
	
	#volunteer-expertise ul li { width: 40%; }
	
	#venue-zone .venue { width: 96%; padding: 0px 2%; border-right: none; margin-bottom: 30px; }
	#venue-zone .datetime { width: 96%; padding: 0px 2%;  }
	
	#highlights .item a.img { width: 100%; display: block; }
	#highlights .item .details { width: 100%; float: left; height: auto !important; height: initial !important; }
	#highlights .item .details > div { text-align: center; }
	
	#donate-zone { font-size: 15px; } 
	#donate-zone .btn a { font-size: 15px; }
	
	#president-message .img { display: block; text-align: center; }
	#president-message .img img { margin: 0px auto 20px auto; }
	#president-message .text { padding: 0px; }
	#president-message .text h2 { text-align: center; }
	
	body.project-info .date { margin-right: 0px; margin-bottom: 0px; }
	body.project-info div.table { margin-top: 30px; }
	body.project-info div.table .table-row { width: 96%; margin: 0px 2% 25px 2%; } 
	body.project-info div.table .table-row:last-child { margin-bottom: 0px; }
	body.project-info .text { margin-left: 85px; }
	
	.album-cover { margin-right: 4%!important; width: 48%; margin-bottom: 15px; }
	.album-cover.col2 { margin-right: 0!important; }
	
	#member-list .item { width: 45%; margin-bottom: 35px; max-width: auto; max-width: initial; max-width: none; }
	#member-page p { padding: 0px; }
	
	#magazine-list .wrapper { padding-bottom: 10px; }
	#magazine-list .items >.item { width: 48%; margin-right: 4%; }
	#magazine-list .items >.item.even { margin-right: 0px; }

	#award-list .wrapper { padding-bottom: 10px; }
	#award-list>.item { width: 48%; margin-right: 4%; }
	#award-list>.item.even { margin-right: 0px; }

	.tab-menu .cat a { padding: 6px 20px; border-radius: 15px 15px 0px 0px; margin: 0px 2px; border: solid 1px #fff; border-bottom: none; line-height: 1; }
	
	#story-list .tab-menu .cat { display: table; float: left; width: 48%; margin: 0px 1%; }
	#story-list .tab-menu .cat a { height: 25px; display: table-cell; vertical-align: middle; }
	#story-list .tab-menu >div::after { content: ""; clear: both; display: block; } 
	
	#story-list .featured .story .img { float: none !important; width: auto; width: initial; }
	#story-list .featured .story .text { float: none; width: 100%; display: block; height: auto; height: initial; }
	#story-list .featured .story .text > div { padding: 0px; text-align: center; }
	#story-list .featured .story .text > div .story { text-align: justify; }
	#story-list .list { margin-top: 20px; text-align: center; }
	#story-list .list .story { width: 35%; float: none; display: inline-block; *display: inline; zoom: 1; margin: 0px 5% 30px 5%; }
	
	.tbContactform td { width: 100%; float: left; }
	.tbContactform td[colspan="2"] input, .tbContactform input.text { margin: 0px 0px 15px 0px; width: 93.5%; padding: 14px 3%; }
	.tbContactform textarea { margin: 0px 0px 15px 0px; padding: 14px 3%; width: 93.5%; }
	td.captcha { text-align: center; }div.g-recaptcha { display: inline-block; *display: inline; zoom: 1; width: 100%; }
	div.g-recaptcha > div { width: 100% !important; height: auto !important; height: initial !important; height: none !important; max-width: 304px; margin: auto; }
	div.g-recaptcha iframe { width: 100% !important; }
	.tbContactform input[type="button"] { margin: 20px auto 0px auto !important; width: 130px; }
	.tbContactform td.button { text-align: center !important; }
	
}
@media only screen and (max-width:650px){
	.rotary-club-of-kuching-unity-city table.priorities td { float: left; width: 100%; }
	.rotary-club-of-kuching-unity-city table.priorities td:first-child { padding-bottom: 0px; }
	.rotary-club-of-kuching-unity-city table.priorities td:last-child { padding-top: 0px; }
	
	#donation-list .item { width: 80%; display: block; max-width: 80%; margin: 0px auto 30px auto; text-align: center; }
	#volunteer-list .item { width: 80%; display: block; max-width: 80%; margin: 0px auto 30px auto; text-align: center; }
	#donation-list .item h2, #volunteer-list .item h2 { width: 250px !important; height: initial !important; display: block; }
	#donation-list .item .info, #volunteer-list .item .info { height: auto !important; height: initial !important; }
	
	#magazine-list .items >.item a { padding: 15px; }
	#award-list>.item>.frame { padding: 15px; }
	
	#story-list .list .story { width: 40%; }
	#story-list .tab-menu .cat a { height: 35px; padding: 5px 20px; }
}
@media only screen and (max-width:550px){
	.rotary-club-of-kuching-unity-city table.four-way-test h2, .rotary-club-of-kuching-unity-city table.seven-focus-area h2 { font-size: 25px; }
	#member-list .item .rotary_year { font-size: 18px; }
	#member-list .item h3 { font-size: 14px; }
	#member-list .item a.btn-blue { padding: 12px 15px; }
}

Step 11

Update: rckuc.js

// Announcement
$(document).ready(function() {
	// Banner Announcement
	if ($(".banner-announcement").children().length) {

		// filter per session
		$(".announcement-container").each(function() {
			let announcement_id = $(this).find(".announcement_id").val();
			if (sessionStorage.getItem("announcements_modal_"+announcement_id) == "1") {
				$(this).parent().remove();
			}
		})

		// Numbering
		$('.banner-announcement').on('init reInit afterChange', function(event, slick, currentSlide){
			// currentSlide is undefined on init, so default to 0
			var i = (currentSlide ? currentSlide : 0) + 1;
			$('.slide-counter').text(i + ' / ' + slick.slideCount);
		});

		let banner_autoplay = $("#banner_autoplay").val() == 1;

		if ($(".banner-announcement").children().length != 0) {
			$('.banner-announcement').slick({
				slidesToShow: 1,        // show one notification at a time
				slidesToScroll: 1,
				arrows: true,           // show left/right arrows
				dots: false,             // show navigation dots
				infinite: true,         // loop through notifications
				autoplay: banner_autoplay,         // automatically move to next
				autoplaySpeed: 3000,    // 3 seconds per slide
				speed: 600,             // transition speed
				fade: false,            // fade effect instead of slide (true = fade)
				cssEase: 'ease-in-out', // smooth easing
				pauseOnHover: true,     // stop auto-play when user hovers
				adaptiveHeight: true,   // adjust height per slide
			});
	
			function setSessionViewed() {
				$(".announcement-container").each(function() {
					if ($(this).parents(".slick-active")) {
						let announcement_id = $(this).find(".announcement_id").val();
						let display_option = $(this).find(".announcement_display_option").val();
						if (display_option === "per_session") {
							sessionStorage.setItem("announcements_modal_"+announcement_id, '1');
						}
					}
				})
			}

			setSessionViewed();
			
			$(document).on("click", ".slick-arrow", function() {
				setSessionViewed();
			})
	
			// Optional if you want a close button
			$(".banner-announcement").append('<button class="close-banner-announcement"></button>');
	
			$(document).on("click", "button.close-banner-announcement", function() {
				$(".banner-announcement").remove();
			})
		}
	}

	// Popup Announcement
	if (typeof window.ANNOUNCEMENTS_ITEMS !== "undefined" && window.ANNOUNCEMENTS_ITEMS.length !== 0) {
		var items = window.ANNOUNCEMENTS_ITEMS;
	
		// filter per session
		items = items.filter(function (item) {
			return sessionStorage.getItem(item.src) !== "1";
		});
	
		if (items.length != 0) {
			$.magnificPopup.open({
				items: items,
				gallery: { enabled: true },
				mainClass: "mfp-fade",
				closeOnBgClick: false,
				callbacks: {
					open: function () {
						var $content = $('.mfp-content');
						$content.append($('.mfp-arrow-left'));
						$content.append($('.mfp-arrow-right'));
						$('.mfp-close').text("");
		
						var mp = $.magnificPopup.instance;
						var total = items.length;
		
						var $content = $('.mfp-wrap .mfp-content');
						if ($("#fullscreen_status").val() == 1) {
							$content.addClass("fullscreen");
						}
				
						if (total > 1) {
							var indicators = $('<div class="announcement-indicators"></div>');
							for (var i = 0; i < total; i++) {
								indicators.append('<span class="dot" data-index="' + i + '"></span>');
							}
							$(".mfp-content").append(indicators);
							indicators.find(".dot").first().addClass("active");
		
							$(document).on("mfpChange", function () {
								indicators.find(".dot").removeClass("active")
									.eq(mp.index).addClass("active");
							});
		
							indicators.find(".dot").on("click", function (e) {
								e.preventDefault();
								mp.goTo($(this).data("index"));
							});
						}
					},
					close: function () {
						for (const item of items) {
							if (item.display_option === "per_session") {
								sessionStorage.setItem(item.src, '1');
							}
						}
						$(document).off("mfpChange");
					}
				}
			});

			let popup_autoplay = $("#popup_autoplay").val() == 1;

			if (popup_autoplay) {
				let autoplayInterval;

				function startAutoplay() {
					// clear previous interval just in case
					clearInterval(autoplayInterval);

					// start a new interval
					autoplayInterval = setInterval(function() {
					$.magnificPopup.instance.next();
					}, 3000);
				}

				// start autoplay initially
				startAutoplay();

				// stop autoplay when popup closes
				$(document).on('mfpClose', function() {
					clearInterval(autoplayInterval);
				});

				// reset interval when user clicks next/prev
				$(document).on('click', '.mfp-arrow', function() {
					setTimeout(() => {
						startAutoplay();
					}, 2000);
				});
			}

			function setSlideHeight () {
				$('.mfp-content').each(function() {
					let maxHeight = $(this).height() - 120;
					let contentHeight = $(this).find('.announcement-content').height();

					if (maxHeight < contentHeight) {
						$(this).find('.announcement-content').css("height", maxHeight + "px");
					}
				})
			}

			setSlideHeight();
			
			$(window).on('resize', setSlideHeight);
		}
	}
})

// Announcement
$(document).ready(function() {
	// Banner Announcement
	if ($(".banner-announcement").children().length) {

		// filter per session
		$(".announcement-container").each(function() {
			let announcement_id = $(this).find(".announcement_id").val();
			if (sessionStorage.getItem("announcements_modal_"+announcement_id) == "1") {
				$(this).parent().remove();
			}
		})

		// Numbering
		$('.banner-announcement').on('init reInit afterChange', function(event, slick, currentSlide){
			// currentSlide is undefined on init, so default to 0
			var i = (currentSlide ? currentSlide : 0) + 1;
			$('.slide-counter').text(i + ' / ' + slick.slideCount);
		});

		let banner_autoplay = $("#banner_autoplay").val() == 1;

		if ($(".banner-announcement").children().length != 0) {
			$('.banner-announcement').slick({
				slidesToShow: 1,        // show one notification at a time
				slidesToScroll: 1,
				arrows: true,           // show left/right arrows
				dots: false,             // show navigation dots
				infinite: true,         // loop through notifications
				autoplay: banner_autoplay,         // automatically move to next
				autoplaySpeed: 3000,    // 3 seconds per slide
				speed: 600,             // transition speed
				fade: false,            // fade effect instead of slide (true = fade)
				cssEase: 'ease-in-out', // smooth easing
				pauseOnHover: true,     // stop auto-play when user hovers
				adaptiveHeight: true,   // adjust height per slide
			});
	
			function setSessionViewed() {
				$(".announcement-container").each(function() {
					if ($(this).parents(".slick-active")) {
						let announcement_id = $(this).find(".announcement_id").val();
						let display_option = $(this).find(".announcement_display_option").val();
						if (display_option === "per_session") {
							sessionStorage.setItem("announcements_modal_"+announcement_id, '1');
						}
					}
				})
			}

			setSessionViewed();
			
			$(document).on("click", ".slick-arrow", function() {
				setSessionViewed();
			})
	
			// Optional if you want a close button
			$(".banner-announcement").append('<button class="close-banner-announcement"></button>');
	
			$(document).on("click", "button.close-banner-announcement", function() {
				$(".banner-announcement").remove();
			})
		}
	}

	// Popup Announcement
	if (typeof window.ANNOUNCEMENTS_ITEMS !== "undefined" && window.ANNOUNCEMENTS_ITEMS.length !== 0) {
		var items = window.ANNOUNCEMENTS_ITEMS;
	
		// filter per session
		items = items.filter(function (item) {
			return sessionStorage.getItem(item.src) !== "1";
		});
	
		if (items.length != 0) {
			$.magnificPopup.open({
				items: items,
				gallery: { enabled: true },
				mainClass: "mfp-fade",
				closeOnBgClick: false,
				callbacks: {
					open: function () {
						var $content = $('.mfp-content');
						$content.append($('.mfp-arrow-left'));
						$content.append($('.mfp-arrow-right'));
						$('.mfp-close').text("");
		
						var mp = $.magnificPopup.instance;
						var total = items.length;
		
						var $content = $('.mfp-wrap .mfp-content');
						if ($("#fullscreen_status").val() == 1) {
							$content.addClass("fullscreen");
						}
				
						if (total > 1) {
							var indicators = $('<div class="announcement-indicators"></div>');
							for (var i = 0; i < total; i++) {
								indicators.append('<span class="dot" data-index="' + i + '"></span>');
							}
							$(".mfp-content").append(indicators);
							indicators.find(".dot").first().addClass("active");
		
							$(document).on("mfpChange", function () {
								indicators.find(".dot").removeClass("active")
									.eq(mp.index).addClass("active");
							});
		
							indicators.find(".dot").on("click", function (e) {
								e.preventDefault();
								mp.goTo($(this).data("index"));
							});
						}
					},
					close: function () {
						for (const item of items) {
							if (item.display_option === "per_session") {
								sessionStorage.setItem(item.src, '1');
							}
						}
						$(document).off("mfpChange");
					}
				}
			});

			let popup_autoplay = $("#popup_autoplay").val() == 1;

			if (popup_autoplay) {
				let autoplayInterval;

				function startAutoplay() {
					// clear previous interval just in case
					clearInterval(autoplayInterval);

					// start a new interval
					autoplayInterval = setInterval(function() {
					$.magnificPopup.instance.next();
					}, 3000);
				}

				// start autoplay initially
				startAutoplay();

				// stop autoplay when popup closes
				$(document).on('mfpClose', function() {
					clearInterval(autoplayInterval);
				});

				// reset interval when user clicks next/prev
				$(document).on('click', '.mfp-arrow', function() {
					setTimeout(() => {
						startAutoplay();
					}, 2000);
				});
			}

			function setSlideHeight () {
				$('.mfp-content').each(function() {
					let maxHeight = $(this).height() - 120;
					let contentHeight = $(this).find('.announcement-content').height();

					if (maxHeight < contentHeight) {
						$(this).find('.announcement-content').css("height", maxHeight + "px");
					}
				})
			}

			setSlideHeight();
			
			$(window).on('resize', setSlideHeight);
		}
	}
})

Step 12

Copy all related files to your project and import sql table

Component

Module