Making the OceanWP theme behave

I recently updated this site with a new theme and a few other changes. I had a few struggles understanding how the basics work, and since then have been working on some fine-tuning. It has been somewhere between frustrating and fun, but I feel like I understand a bit better now how to get the OceanWP theme to do the things I want it to.

It is all done via magic… er, no, actually it is done via CSS. And a lot of help from the OceanWP support folks: being able to get prompt support makes paying for the theme seem a bit less painful at least.

Controlling the sidebars

The default behaviour for the left and right sidebar design with the OceanWP theme is to have those sidebars ‘disappear’ with even small decreases in the size of the browser window. That was the main thing about the site design that I was displeased with, and I opened a ticket with the OceanWP folks to get some guidance towards correcting this.

With their help I was able to come up with some additional CSS I could add to the theme in the WordPress dashboard under Appearance=> Customize => Custom CSS/JS.

/* KGA prevent sidebars */
/* from being removed   */

@media only screen and ((min-width: 960px) and (max-width: 1280px)) {
    .content-both-sidebars .content-area {
        width: 54% !important;
        left: 22% !important;
        position: absolute;
    }

#content-wrap .widget-area.sidebar-primary {
    float: right;
    width: 20% !important;
}

.content-both-sidebars.scs-style .widget-area.sidebar-secondary {
    position: absolute;
    left: 2% !important;
    width: 20% !important;
    float: left;
}
}

I have just enough familiarity with CSS to be dangerous and so most of the above code comes from the OceanWP support folks. But at a high level, here is an overview of my understanding:

@media only screen and ((min-width: 960px) and (max-width: 1280px)) { ...

This directive is basically saying ‘for screen devices if the screen (browser window) is between 960 pixels and 1280 pixels, apply the behaviours that follow‘. The ‘behaviours that follow’ say:

• use both sidebars format (content-both-sidebars)
• make the content area 54% of the available width
• and the left should be 22% of the width, and the right 20%

The ‘magic’ in this primarily involves the named elements and the initial width values provided by the theme support team. The theme does a number of things such as turning off the sidebars and changing the way the menus are rendered outside these width values for smaller devices like phones.

There is another magic number: min-width: 481. ‘481’ is the theme’s size for ‘phone’ devices, and was the original min-width value the support team provided me. I chose a larger value of 960 to allow the sidebars to ‘disappear’ earlier as I found the smaller sizes below that started getting a bit too ‘busy’. I might experiment with this value later as I’ve also resolved another thing I didn’t like: excessive blank space around the content (post text and image) area.

Cleaning up spacing

After getting the sidebars to stick around with somewhat smaller windows I noticed that the most important part of the blog entries page, the content area, had a bunch of empty space around it. With smaller window sizes approaching the 960 pixel range this blank space really cut into the size of the content.

I did not like this ‘wasted’ white space, so I began digging through the CSS a bit to see if I could reduce it. I was able to figure this one out on my own without going back to the support team, which made me happy. I added the following to my custom CSS:

/* KGA remove excess padding */
.content-area {
	padding-left: 10px !important;
	padding-right: 10px !important; 
}

.widget-area.sidebar-primary {
	padding-left: 10px !important;
}
.content-both-sidebars.css-style .widget-area.sidebar-secondary {
  padding-left: 10px !important;
}

.content-both-sidebars .content-area {
  padding-left: 10px !important;
}

From what I can tell the default padding-left and padding-right values are 40 pixels each. That’s a lot of wasted space at smaller window widths, and I found 10 pixels to be more readable.