Have you seen Elementor?

Our flagship product, Layers has been acquired by the team at Elementor.

With a powerful, fast page builder, Elementor is the best way to get your site online with as little effort as possible.

The Writer: Post Custom CSS

The Writer’s Post Custom CSS panel allows advanced users to customize elements within individual posts such as colors, fonts and backgrounds. Use this method to change things in individual posts such as the header image, header height, post background color and so on.

We are unable to provide detailed assistance with troubleshooting, creating or testing post custom css for you. Please see this article for resources and options for Advanced CSS help.

Below is a template you may use to identify the primary elements and customize them. Notes inside /* */ describe what kind of styling you can apply and what it affects.

/* Header Styles */ 
#header-container{} /*Top bar background, border, height*/ 
#top-nav li a{} /*Navigation links, color, font size*/ 
/* Body Styles */ 
.title-container{} /*Header area, background, height*/ 
.title-container .post-title{} /*Header area title font, alignment, size*/ 
#content-container{} /*Post area background*/ 
.copy .post-image{} /*Images in the post - borders, padding, bg color */ 
.copy p{} /*Post text color font and size*/ 
.copy a{} /*Post area links color font and size*/ 
.copy .post-date{} /*Post date color font and size*/ 
.share-button label span{} /*Share text font color and size*/ 
.next-prev-post-nav small{} /*next and previous post text font color and size*/ 
.next-prev-post-nav a{} /*next and previous post links color font and size*/
.author-container{} /*background, height, general text color, font and size*/ 
#comments{} /*background, height, general text color, font and size*/ 
.comment{} /*background, height, general text color, font and size of individual comments*/ 
#reply-title{} /*reply text color font and size*/ 
input[type=submit], button{} /*comment submit button color text font and size*/ 
/* Footer Styles */ 
#footer-container{} /* background, general text color font and size, bar height /*


The following example uses the book cover background and the header-style title rather than a full-screen intro:

.title-container{max-height: 300px;} /*Header area, background, height*/

The following example sets a different header image from the book cover:

.title-container{background: url(http://www.mysite.com/wp-content/uploads/newbg.jpg) no-repeat top center; max-height: 300px;} /*Header area, background, height*/

Please refer to the following resources if you need assistance with custom styling. Please note that our support does not extend to assisting you with post-level or detailed customization, but we are happy to answer any questions you have about selectors or finding element class names.