Elegant Themes Blog

Stay up to date with our most recent news and updates

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.

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.

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.

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.

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.

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.

Big thumbs up to all your team for your new blog. You’ve made some really nice changes to your blog model and I have no doubt that it is for the best. I would be curious to see your new conversion rates with this tweak 😉

Keep up the good works. I keep getting back way more frequently on your blog since then.

Quick question/issue for anyone out there – When I use the custom css to fix the header to the top of the screen (so it stays there when scrolling) it covers up the text in my slider. I don’t know CSS, but I have been messing around with the settings and can’t get it to stop covering up my slider text. Thoughts?

Dear Nick,
Great information. Why not for all themes. After all the tickets ET had to solve you have enough information to fill 20 Blogs. After filling the blogs, the amount of tickets will decline. And that would be great news for ET.

We’re utterly thankful for all these freebies, tips & tricks. Indeed this is a game up for ET. As much as we like all this free stuff, we are however running out of patience with Divi now! Any approx. dates for its release? I’m sure it’ll be worth the wait but I have, like many other members here put hold on projects just for that amazing theme.. More focus on that please!!! Many thanks to your efforts from one happy customer:)

hey Nick,
was wondering, I am using the Vertex theme, yet I really like the trick of adding a floating social box on the pages, is it possible for you to show us some code that will work on that theme?

Hi there! I wanna to say a lot of thanks for your team! <3 Actually Im have to use the FOXY theme! And I have got some questions about it. How can I make a product slider as you have in demo in the end of page? Thanks a lot for answering.

I found these tricks very useful, but there is a little problem with the trick of centering the Post Headings Inside The Thumbnails… when I pasted the code into the Custom CSS box in ePanel the color of the Title (h1) is white (#fff) and it looks great over the image, but then titles of pages disappear, because the background is also white…

I love your documentation – some of the best of many WP designers – and the theme is very easy to use and customize. Question: this theme has many issues with Internet Explorer. It looks stretched out, and fills the entire page, as opposed to the nice clean box with background on Firefox and Chrome. Also, the footer has squashed the links and social media icons against each other.

These are awesome! All of them worked for me except the centering of the title and making the image full screen on the featured slider which is the one I want more than anything by a long shot! Any idea why it might not do anything? Also, when I put the scrolling header code in it made the header full screen width, going over the top edge of the grey background. I’d like that if I could make the whole page full width and drop the background altogether.

Love this theme however my background image is only around the footer, is there a way to make it the full page? i’m probably just missing something simple however i have tried a bunch of ways and can’t get it to display the way i want. do you have a CSS code for this?

I have a question. In number two above (Center Post Headings ), there is a subheading: Home > Recent News > Aenean…. >
How do we remove this subheading from all pages please? I can not find anything in the theme options. Thanks for your time. Cheers
Scott