Pagelines is a really powerful Theme for WordPress, I use it very often and totally love it. It’s a fully customizable theme, you can create any kind of modern-looking website with Pagelines, as long as you have some good taste for websites and some graphical skills.

Pagelines: the problem with image captions

But there’s always been a major aesthetic bug, at least for me, up to version 2. That’s my favorite version, although I know that development has gone forward during the years. I like how Pagelines 2 feels like, I like the user interface, pretty much everything… but when you use a Black Background and White Text theme for a canvas space, you get really ugly image caption frames.

The screenshot above shows the problem. You have a white frame with white text in it. Totally unreadable. What’s weird is that although the background color is set as black with white text, the image caption frame keeps it’s white/light grey color.

How to fix it

There’s an easy fix, luckily. Pagelines supports Custom CSS so that, if you know what you’re doing, you can further customize your WordPress website! Here’s where to find the option in the Pagelines interface: while visualizing a page, in edit mode press the </> Custom button, then choose Custom LESS/CSS in the left panel.

There you’ll find an empty text box and you’ll be able to write in it any custom CSS code. For this fix, you’ll want to paste this code (which will make the caption frame black):

.entry .wp-caption {
background: #000000;
padding: 2px 0 10px;
width: 624px !important;
border: none;
border-radius: 0;
color: #eee;
}

.entry .wp-caption p.wp-caption-text {
line-height: 1.5em;
}

Of course, you can customize this code however you like. With this code, the ugly caption frame shown in the previous screenshot will become like this:

Way better indeed, especially if your page Background is not completely black like in this screenshot. And that’s pretty much it! Hope you enjoyed this tutorial 🙂

Credits for custom image caption frames.