Six Simple CSS Tricks For The Foxy Theme

Using only CSS and our Custom CSS box in ePanel, you can do some awesome things! Today I will go over 6 simple tricks that can alter the Foxy Theme is some really cool ways. To apply these 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

This change will transform your navigation bar into a floating navbar with a fixed position. No matter where your visitors scroll, your menu items will be easily accessible at the top of the screen. This can improve visitor engagement as it promotes additional clicking and website exploration. Using this code, the floating navigation bar is removed on mobile devices to ensure that the small screens are not obstructed.

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.

/* Fixed Navigation Bar */
@media only screen and (min-width: 768px) {
#main-header {
	position: fixed;
	width: 90%;
	text-align: center;
	margin: 0;
	top: 0;
	background-color: #fff;
	padding: 20px 5% 20px 5%;
	z-index: 100;
	left: 0;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
	}
#body-area {
	padding-top: 74px;
}
}

Center Post Headings Inside The Thumbnail

This is a fun change that centers your post titles within the featured image box. In some ways, this style is more cohesive with the way that titles are already displayed on category pages, but it’s really up to you to decide which layout you prefer!

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.

/* Center Post Headings */
.et_full_width_image .post-heading {
	padding: 0;
	width: 100%;
	position: absolute;
	text-align: center;
	background: none;
	color: #fff;
	margin-top: -360px;
	font-weight: ;
}

.post-heading p.meta-info, .post-heading p.meta-info a, .post-heading h1 {
	color: #fff;
}

@media only screen and (max-width: 1300px) and (min-width: 961px) {
	.et_full_width_image .post-heading { padding: 0; margin-top: -260px; }
}

@media only screen and (max-width: 960px) and (min-width: 768px) {
.et_full_width_image .post-heading { padding: 0; margin: -220px 0 0 -60px; }
}

@media only screen and (max-width: 767px) {
	.et_full_width_image .post-heading { padding: 0; margin: -180px 0 0 -60px; }
}

@media only screen and (max-width: 479px) {
	.et_full_width_image .post-heading { padding: 0; margin: -120px 0 0 -40px; }
	.post-heading p.meta-info { font-size: 14px; }
}

Style Your Website With Rounded Corners

Some people like hard edges, while others like soft rounded corners. By default, the content container in Foxy is simple and boxy, but this can be easily changed using a few lines of CSS. If you would like to give you website a more rounded look, then look no further! You can also adjust the size of the curve by changing the “30” values below to something smaller or larger depending on your desired result.

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.

/* Rounded Corners */
.container { 
	-webkit-border-top-left-radius: 30px;
	-webkit-border-top-right-radius: 30px;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-topright: 30px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

#footer-area .container { 
	-webkit-border-bottom-right-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	-moz-border-radius-bottomright: 30px;
	-moz-border-radius-bottomleft: 30px;
	border-bottom-right-radius: 30px;
	border-bottom-left-radius: 30px;
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-topright: 0;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	overflow: hidden;
}

Remove Slider Transition Animations

Personally, I love the transition animations in the Foxy slider. They aren’t for everyone, however, and if you are looking to give your homepage a less flashy and more streamlined appearance, then these animations can be easily removed. Luckily we used pure CSS for this slider’s animations, instead of using javascript, so we can adjust the animations using CSS as well. Adding the following code will remove the slide and bounce effects in favor of a classic fade.

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 Slider Animations */

#featured .slide.et-active-slide img, #featured .slide.et-active-slide h2, #featured .slide.et-active-slide .description {
	-webkit-animation-duration: 0;
	-webkit-animation-delay: 0;
	-moz-animation-duration: 0;
	-moz-animation-delay: 0;
	-o-animation-duration: 0;
	-o-animation-delay: 0;
	-ms-animation-duration: 0;
	-ms-animation-delay: 0;
	animation-duration: 0;
	animation-delay: 0;
}

Create Floating Social Media Buttons

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, Foxy places a link to your Facebook, Twitter and Google+ pages in the footer. 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 10px 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 Website Using Flat Design

Throughout Foxy’s design, we implemented an inner shadow effect to give the slider, buttons, tabs and call-outs a bit of depth. Recognizing the popularity of the “flat design” trend, however, I am sure that some users will want to remove these shadows in favor of a simpler design. These shadows can be easily removed using the follow code. The result is a single highlight color throughout the theme.

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 Things Flat */

#featured, #top-navigation > ul > li.sfHover > a, #top-navigation > ul > li > a:hover, #home-tab-area > ul > li.home-tab-active, #footer-bottom li a:hover, .mobile_nav, #callout { 
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}