RMGTmagazine

Portal Wawasan Online

About

Thanks for importing Rumour ๐Ÿ™‚

Rumour is constructed primarily using GP’s awesome built-in features with some CSS to provide custom styles.

The sections below provides a quick overview on how the site was built and some potential modifications. All the CSS mentioned below can be found in the Additional CSS field in the customizer.

Header/Navigation

The header/navigation is using one of GP’s newest options Use navigation as Header. You can use a site title or upload a logo in Site Identity.

Here is the CSS added for the header/navigation area:

/* Header navigation styling */
.main-navigation, .sticky-enabled .main-navigation.is_stuck {
    -webkit-box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
    -moz-box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
    box-shadow: 0px 1px 0px 0px rgba(51,51,51,1);
}

Home Page Header Element/Page Hero

The first section after the header/navigation is built using GP Premium’s Header Element module and WP Show Posts plugin. To modify it, head to Dashboard > Appearance > Elements and edit the “Home Hero” header element.

The WP Show Posts shortcode/list can be modified in Dashboard > WP Show Posts > Home Hero.

Here is the CSS added for this section:

/* Home page hero styles */
.page-hero .wp-show-posts .wp-show-posts-entry-title {
    padding: 20px;
}

.page-hero .wp-show-posts-image {
    margin-bottom: 0;
}

.home-hero-description {
    padding: 40px 0;
    text-align: center;
    border-top: 1px solid #5ddee8;
    border-bottom: 1px solid #5ddee8;
}

.narrow-container {
    max-width: 600px;
    margin: auto;
}

Container Width

The container width of 900px is used through out the site with the exception of the home page.

The home page has a Content/Sidebar layout so this CSS below is used to set the width to 1100px:

/* Container size for home page */
body.home .grid-container:not(.inside-navigation) {
    max-width: 1100px;
}

Posts List

You will notice that the 2 recent posts displayed in the header element/page hero are also duplicated in the posts list. The PHP snippet below can be used to remove the duplication:

add_filter( 'pre_get_posts', function( $query ) {
    if ( $query->is_home() && $query->is_main_query() ) {
        $offset = 2;
        $ppp = get_option('posts_per_page');

        if ( $query->is_paged ) {
            $page_offset = $offset + ( ($query->query_vars['paged']-1) * $ppp );
            $query->set('offset', $page_offset );
        } else {
            $query->set('offset',$offset);
        }
    } else {
        return $query;
    }
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Here is the CSS for this section:

/* Home page posts list styles */
@media (min-width: 769px) {
    .post-image-aligned-left .post-image img {
        max-width: 200px;
    }
}

h2.entry-title {
    margin-bottom: 5px;
}

.home.one-container .inside-article {
    padding: 0;
}

Footer Widgets

The plugin Recent Posts Widget With Thumbnails is used in the footer widgets area to show recent posts throughout the site.

The footer widgets area is removed from the home page using the Layout Element.