WordPress Blog, how long has it been since I’ve written here?! Maybe too long to the point where I’ve forgotten how to write.

Please do excuse any instances of rambling, incoherence, incorrect grammar/punctuation, and or random thoughts that seem to make their way into this post.

Clearly I’m just getting back into the swing of blogging.

You know that quote “done is better than perfect”? Yeah, I’m trying to embrace that as I write this one, so bear with me.

I figured it was finally time to kick this blog back into gear, and ain’t no better way to do it than to start off with a blank canvas.

“Blank Canvas“, which by the way, is also the name of the current theme my site is now using, and is also what I want to share and write about in this post.

The Before

My previous theme was “Rosalie“, which in my opinion, is quite dated by today’s theme standards.

For the unfamiliar, here’s what my site looked like before.

There was something very “meh” about how my site was looking. Since I was deviating away from the original design at this point, it was a good indicator that it was time to switch themes.

I really loved the design, but functionality-wise, it’s too restricting.

With newer themes that have been optimized for Gutenberg (the new default WordPress editor), I felt it was only proper that I update my site to a theme that takes full advantage of blocks.

The After

The theme “Blank Canvas” is perfect for keeping things minimal, while at the same time, providing the flexibility for modifying the appearance in a completely custom way, which is exactly what I did.

Here’s what my site looks like now.

This is my current block layout for my site.

I had a lot of fun with this redesign because 1) I hadn’t done a site revamp for a while, and 2) there was a particular design and layout I had in mind.

Inspired by sites like The Verge and Polygon (both run under Vox Media), I took elements like gradient borders and tech-y magazine post layouts, and tried to make something similar.

I did not come anywhere near close to achieving a design that resembles either, but am nonetheless, happy with the way it turned out.

After about a day’s worth of work and 100+ lines of CSS code later, I was able to come out with some knowledge of a few new neat tricks.

Here are three tips I got out of this redesign experience.

TIP #1: How to Full-Screen Elements

You ever encounter a site or landing page where upon visiting it you are greeted with a giant full-screen hero image or video?

Guess what? It’s super easy to achieve that with a minimalistic theme like Blank Canvas and a few lines of CSS!

While this ultimately did not make it in my final design, I was toying with the idea, and after learning how easy it was to implement, I just had to mention it.

To start off, the following blocks are probably the most ideal ones to work with and implement for this method:

Not all elements will be suitable for full-screen, so keep that in mind. In my example, I’ll be using a cover block.

First thing to do, head into your site’s Additional CSS section.

Design -> Customize -> Additional CSS
(Appearance -> Edit CSS)

Copy and paste this code into the CSS field, then save changes.

.full-screen {
	min-height: 100vh;
}

To break this down a bit, .full-screen is the custom CSS class we are giving to the rule.

The property min-height is minimum height.

The “vh” stands for “viewport height”. The number value can be anywhere from 1 – 100, where 100 is equal to 100% of the height of the current viewport in use.

In this case, we want the minimum height of our image/video to take up the full screen no matter what device is being used. Therefore, we need to set the value to 100vh.

Head back into the editor for a page (or post), insert a cover block, select an image or video for it, then be sure to change the alignment to “Full width”.

After that, in the block settings under the “Additional CSS class(es)” section, type in full-screen into the field.

That’s it! You can now preview the changes and watch the magic happen.

TIP #2: Easily Turn Elements Into Custom Shapes

The site https://bennettfeely.com/clippy/ makes it easy to copy the CSS code needed for any shape you create on the site.

I’ll show you how to get started with applying different shapes to an image.

First, decide which shape you want to use from the clippy site. After having selected a shape, copy the CSS code located at the bottom. We’re going to make a rule for it.

Let’s do a pentagon

In our Additional CSS tab, let’s create a custom class .shape-pentagon, and insert the CSS we copied into the field:

.shape-pentagon {
	clip-path: polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);
}

We can repeat this process for any other shapes we want. 

.shape-right-arrow {
	clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

.shape-message {
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.shape-diamond {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Once we are done declaring our CSS rules, all that’s left to do is apply the custom CSS class we want to an image (or any element) under the “Additional CSS class(es)” section of the block settings.

If you’re wondering how I specifically did this for the featured images in the “blog posts” block, all I did was add the additional selector img to the custom classes I created.

.shape-message img {
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

What this does is it targets only the images in the blog posts block instead of the entire block itself.

TIP #3: Gradient Borders

The CSS I used for my site in this case came straight from this article https://css-tricks.com/gradient-borders-in-css/. I’m not even going to try with this one, since the article is short and simple enough to follow along with.

I personally love gradient borders. However, it can get to be a bit too much if overused.

That’s all folks! See you in the next one.