This post will show you some handy CSS Tricks to customise your website. This page will be updated regularly.

How to add Custom CSS

The best and easiest way to add custom CSS is to use the Customizer. In your WordPress dashboard, go to Appearance > Customize. Then click on Additional CSS. You will have something that looks like this.

CSS Tricks

General

Change selection text colors

Selection text by default is the standard popcorn theme colors. To change this, use the following CSS.

::selection {
  background-color: #f25a54; 
  color: #FFFFFF; 
}

Typography

Bold Menu Items & Font Size

Use the CSS below to bold menu items and change Font Size in popcorn theme.

#main-menu li {
    font-weight: 600; 
    font-size: 18px;
}

Layout

Change to 2 Columns for latest posts on Front Page

This CSS snippet will adjust the CSS grid property so that 2 columns are displayed instead of 3.

@media screen and (min-width: 800px) {
     .popcorn-front-page-fp-container-latest {
          grid-template-columns: 1fr 1fr;
     }
}

Hide Elements

This CSS snippet will remove the image from related posts section on each post.

.popcorn-related-posts .wp-post-image {
    display: none;
}

This CSS snippet will hide the sidebar on mobile devices below 993px. (You can change this to whatever width you wish).

@media screen and (max-width: 993px) {
    .popcorn-sidebar-grid {
        grid-template-columns: 1fr !important;
    }
    
    .popcorn-sidebar-container {
        display: none !important;
    }
}

Share your thoughts
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}