12% off of LTD using this coupon: TWELVEPERCENTOFF. Promo ends on 2 Dec midnight UTC.
Published on May 29, 2019

[Video] CSS Grids in Oxygen with Pinegrow

Sridhar Katakam

This tutorial provides the workflow to visually arrange the posts displayed by Oxygen’s Easy Posts component in a grid using Pinegrow.

We shall import the HTML output by Oxygen into Pinegrow, build our grid incl. responsiveness and import the generated CSS into Oxygen.

Our custom grid will have one wide top post and below that, four posts in columns using named grid areas in which the posts are placed.

Pinegrow's CSS Grid builder
Oxygen Posts grid using CSS Grid

Note: The posts layout covered here is just an example to demonstrate the workflow and not necessarily the only thing that can be accomplished using this process.

Screencast:

Step 1 – Set up Easy Posts

Edit your Page_Template with Oxygen editor and add_edit an Easy Posts component.

In this example, we are going to feature five latest blog posts.

Add a Section. Then add an Easy Posts component inside this Section.

Go to Query and select custom

Post Type: post

Count: 5

Step 2 – Add oxy-post-[number] classes to Easy Posts

To easily target the individual posts in CSS, add auto-generated numbered classes like oxy-post-1, oxy-post-2..

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Global post counter

Code:

global $counter;
$counter = 1;

Note: This method will only work with a single Easy Posts component at a time. If you want to use counters on multiple Easy Posts, you would need to declare and use separate multiple global variables.

Step 3 – Template PHP

Back to Easy Posts, go to Primary > Templates > Template PHP.

Replace the entire code with

<?php global $counter; ?>
<div class='oxy-post <?php echo 'oxy-post-' . $counter; $counter++; ?>'>

    <a class='oxy-post-image' href='<?php the_permalink(); ?>' style='background-image: url(<?php echo get_the_post_thumbnail_url(); ?>);'>

      <div class='oxy-post-title-overlay'><h2 class="oxy-post-title"><?php the_title(); ?></h2></div>

    </a>

</div>

Click the Save button and view any page of the site in the front end.

Step 4 – Copy posts html

Inspect the posts with Chrome’s web inspector.

Select the div having the class of oxy-posts and press Cmd+C / Ctrl+C to copy its entire HTML.

Step 5 – Over to Pinegrow

In Pinegrow, select “New page or project”. Then “Plain HTML” and new.html.

Save the file in a folder as a project and open the project.

Import HTML from Oxygen

Click on the code icon in the top toolbar or press Cmd+E (on Mac) to edit the HTML.

Paste the code from earlier step in between opening and closing body tags.

Close the HTML code panel.

Set up the grid

Click anywhere in the main page area and click div.oxy-posts.

Click on the grid icon or press Cmd+G (on Mac).

Then click “Create CSS Grid” button.

Enter 30px for the Gap.

Hover above the last column and press + to add a column.

Similarly add 4 additional rows.

Now click anywhere in the first cell and click on div.oxy-post in the bottom breadcrumbs.

Hold and drag the right handle (A) until it stretches to the end of the row.

Hold and drag the bottom handle until it stretches to the third row.

Click on “Style Attribute” > Set named area.. > type p1 and hit return.

This is a custom name we are setting to this grid area.

Similarly “draw” other areas (each spanning a single column and two rows) and name them p2, p3, p4 and p5.

Move inline styles to CSS file

It’s time to save the inline CSS into style.css in Pinegrow.

Select div.oxy-posts and click on + next to “Style attribute”.

Click on .oxy-posts and click “Create”.

Select the top wide post, click +, .oxy-post-1 and Create.

Repeat for other four posts.

Make the images appear

Click on the post title in the top grid area and select a.oxy-post-image.

Set its display to block and height to 100%.

Set background to not repeat, background position as center, and background size as cover.

Save the style attributes to .oxy-post-image.

Style post titles

Let’s position the titles near the bottom of the posts.

Create a new rule for .oxy-post and set its position to relative.

Select div.oxy-post-title-overlay and set its position to absolute with bottom 10px and left 0.

Set 5px top_bottom and 12px left_right padding.

Set background color to rgba(0,0,0,0.5).

Save the style attributes to .oxy-post-title-overlay.

Select h2.oxy-post-title . Set color to white and line-height to 1.3.

Save the style attributes to .oxy-post-title.

Responsive CSS

The default breakpoints in Oxygen are:

480px
768px
992px
1120px

To use the same in Pinegrow generated CSS, we need to add 1 to these values.

Go to Page > Manage breakpoints… and add:

481px
769px
993px
1121px

Resize the content area down and see from which breakpoint you would like the posts to appear one below the other.

In this example, that would be 768px and below.

Change the width of the viewport to 768px.

Select div.oxy-posts.

Duplicate the CSS selector.

Click on “Media query…” button and select “smaller than 769 px”.

Bring up the grid.

Delete the columns except the first one.

Click inside the named areas and change them so they are p1, p2, p3, p4 and p5 top to bottom.

Change the height of each row to 300px.

Copy the generated CSS

Click on style.css and copy the generated CSS code.

Step 6 – Back to Oxygen

Primary > Templates > Template CSS.

Replace the entire code with the one from earlier step.

Append each selector with %%EPID%% to restrict this CSS to just this instance of Easy Posts.

Go to Primary > Styles > Title > Font size: 20px.

Primary > Styles > Responsive. Set both the dropdowns to Never.


References

Summer Nights CSS Grid Tutorial | Pinegrow Web Editor

https://wpdevdesign.com/how-to-add-oxy-post-number-classes-to-easy-posts/

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right