OceanWP logoA couple of days ago I decided to try the OceanWP premium theme for this WordPress site. I have clients using older themes that have not been updated for more than a year. To me, that spells S-E-C-U-R-I-T-Y R-I-S-K, so I’m anxious to find a suitable theme that I can adapt to each individual website. I’ve tried a few and now I’m trying OceanWP. I felt confident enough after doing some research to buy the premium version right at the start.

What makes this a bit unusual is that I am determined to be able to create an aesthetically pleasing site without the use of a page builder, like Elementor. I use that page builder on two of my other sites and the results are impressive, once you work past the learning curve. But it also comes with a hefty price. I’m not referring to the actual cost, which was a big enough hurdle to jump, but the code bloat has me worried a lot. While I wouldn’t consider myself an expert, I do know enough HTML and CSS to do a few things that a page builder does, only with far less code. However…

How did I make a box-shadow here?

Pointing at the content borderThis isn’t intended to be a review of any page builder, or even of the OceanWP theme. It was a plea for help from my fellow website developers who might be able to help me accomplish a specific task that I was not able to do on this page. More specifically, to this or any other single page or post – this was the original intention of this post, but as I explain further, I did finally discover the solution. I originally was able to create a box shadow surrounding the main content boxes (they all have a white background) on the home page and all of the category archive pages. But as you can see (used to could see) where I’m pointing, there’s no box shadow. If you switch to the home page, you’ll see there is a box shadow.

By using the code inspector of my browser, I’m able to determine what ID/class to add my box-shadow values to in my child theme’s CSS file. The problem I ran into was that the ID and class used for the content area DIV of single pages & posts is also a DIV used on the archive pages. That creates a double box shadow on the Home and archive pages that spans the entire length of all post excerpts, including the pagination at the bottom. It’s not a cool look.

Double Box-Shadow   Double Box-Shadow

Answers Were Hard To Find

facebook postMy first inclination was to google the problem. Unfortunately, my search terms inadvertently limited the scope of my searches to either only WordPress themes, or to the OceanWP theme specifically. There were other limiting factors too and my results were disappointing. So, I tried to seek help from the private OceanWP facebook group (my apologies if you get an error message, but it is a group with restricted access). In that group post, I pointed members to this page for a better explanation, but the post only got one reply, which prompted additional questions from me, which were not answered.

I had pulled too much hair out by now and there’s just so much I can conceal with a hat, so continued to search Google to shed some light… or should I say “throw some shade” on my box shadow predicament. The look I was going for is a piece of paper lying on the floor – there’s a slight shadow around the edges that gives it that 3-dimensional look. I wanted it to be consistent throughout the site. Just as in my previous life as a flooring installer, the hard work paid off in the end.

The Box Shadow – and other CSS Properties – Solution Found!

My search finally led to Valentin Garcia, of OSTraining.com, where his article, How To Hide Objects On Specific WordPress Pages, had the answers I had been looking for. In my case, of course, I didn’t want to hide something, I wanted to make it appear on pages & posts, yet not duplicate what I already did for archives.

My original CSS:

In the OceanWP customizer (Customizing > General Options > General Settings), I selected Separate under Layout Style and the Inner Background color I selected white. I wanted all of the separate blog entry excerpts to have a subtle box shadow around each white box. This is the CSS I added to my child theme stylesheet to create that:

.blog-entry {
	border: 1px solid #B7A788 !important;
        box-shadow: 0 5px 15px 0 rgba(0,0,0, .25);
}

This was the effect I wanted on all pages of the site, so I used the browser Inspector to find the CSS Properties that styled the content areas on single pages and posts. What I discovered, strangely enough, was the CSS Property “.content-area”. I added this to my child theme’s stylesheet too:

.content-area {
	border: 1px solid #B7A788 !important;
        box-shadow: 0 5px 15px 0 rgba(0,0,0, .25);
}

That’s when I discovered “.content-area” is also a class used on all the archive pages, resulting in the funny looking box shadow effect I illustrate in the above 2 screenshots.

The CSS that solved my problem

Thanks to Valentin Garcia’s article, I was able to use the browser Inspector to find the unique body classes used in my theme’s (most themes, probably) to add to the content area class that makes the box shadow work on those specific pages and posts, but not duplicate itself on the archive pages. Here’s the code I added to my stylesheet:

.page-template-default .content-area {
	border: 1px solid #B7A788 !important;
        box-shadow: 0 5px 15px 0 rgba(0,0,0, .25);
}

.post-template-default .content-area {
	border: 1px solid #B7A788 !important;
        box-shadow: 0 5px 15px 0 rgba(0,0,0, .25);
}

You can adapt this to any number of unique situations where you want to show or hide something on specific pages of your website, without making the styling global. I am very happy to be able to accomplish this without resorting to the use of a page builder, like Elementor, as recommended by the OceanWP author. I’m liking this theme more and more and will continue to resist using a page builder to do tricks that I can do with hand-coded CSS. I hope my efforts and research have helped you too.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu