Six Simple CSS Tricks To Use With Fable

You’d be surprised what a few lines of CSS can do. Today, I would like to share a few easy customizations that you can make to your Fable Theme using only the Custom CSS panel in our ePanel Theme Options. I have based these tips off common questions that we receive in the support forums, as well as a few things that I personally think are useful. To apply this changes, simply copy and paste the code mentioned into the “Custom CSS” box in ePanel, which can be found under the Appearances > Theme Options tab in your WordPress Dashboard.

Enable Fixed Navigation Bar

Due to the long, scrolling nature of Fable, enabling a fixed navigation bar can save your visitors a lot of time. This change will make your navigation bar stick to the top of the page, even as you scroll down, making your menu items easily accessible no matter where your visitor is on the page.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Fable Fixed Navigation*/

#main-header { 
width: 100%;
position: fixed;
z-index: 10;
top: 0;
}

body { padding-top: 86px; }

Re-Skin The Video Player Using Flat Designs

“Flat Design” is a hot topic these days. The trend advocates a move away from skeuomorphism and towards a more simplistic, less-detailed style. We can easily strip away the realism from Fable’s video post format, and replace it with a simple CSS-based container. The result is a much simpler, faster-loading and streamlined appearance.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Make Video Player Flat*/

.et-video-container {
background-color: #F1F1F1;
border: 1px solid #DADADA;
background-image: none;
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
}

@media only screen and ( max-width: 767px ) {
	.et-video-container {
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	}
}

@media only screen and ( max-width: 479px ) {
	.et-video-container {
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	}
}

Create A Floating Social Media Bar

Social media has become an important part of any website, and some website owners will want to put extra emphasis on their social media profiles. By default, Fable places a link to your Facebook, Twitter and Google+ pages in the header. To make these links more prominent, we can pop them out of their container and make them stick to the side of your page so that no visitor will miss them!

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Make Social Media Sticky*/

#et-social-icons {
position: fixed;
z-index: 11;
left: 0;
top: 45%;
background-color: #333333;
padding: 20px 20px 10px 15px;
margin: 0;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}

#et-social-icons a {
padding: 0;
clear: both;
float: left;
margin-bottom: 10px;
}

Stylize Your Gallery Posts Using CSS Filters

Using CSS3 Filters, we can apply some fun effects to our Gallery posts. One of my favorite filters is the Grayscale filter, which can desaturate any image right in your browser. Combining this with CSS transformations, we can create a nifty fading effect on hover. After applying this CSS, your gallery thumbnails will fade to black & white on hover.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Stylize The Gallery Using Black & White Hover*/

.et-main-gallery a:hover img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}

Remove Automatic Post Drop-caps

By default, the theme starts each post with a Drop-cap to emphasize the beginning of the paragraph and catch your visitor’s eye. However, this style isn’t for everyone, and removing the drop-caps is quite easy! After adding this code, the large letter at the beginning of each post will be reverted back to the standard font size and weight.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Remove The Dropcaps*/

.format-standard .entry-content > p:first-child:first-letter, .entry-content > p:first-child:first-letter  {
display: inline;
float: none;
margin-right: 0;
margin-top: 0;
font-size: 18px;
}

Remove Title And Meta Info From Quote

By default, the Quote post format includes a title and meta info. This looks great, but sometimes blogs of a similar style choose to remove these elements to better emphasize the quote itself. This can be easily achieved through a couple lines of CSS. Once added, the title and meta lines are removed and extra space is added to even out the design.

To apply this change, simply copy and paste the following code into the Custom CSS box in ePanel and click Save. If you ever want to revert back to the original style, you can simply delete the code from the Custom CSS field.

/*Strip Down The Quote*/

article.format-quote { padding-top: 150px; }
article.format-quote header { display: none;}