Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

WordPress How to Build a WordPress Theme Preparing to Code WordPress Templates Linking CSS

A Couple of Things I Noticed in Preparing to Code Wordpress Templates Video Series

First - I noticed that there was a link to admin-bar-min.css file but it was not covered in video. Do we need to link to this CSS file?

Secondly I noticed the flexslider css file that I downloaded from Woo themes did not have the link for background: url(../images/bg_direction_nav.png). Although It was noted that the link update would not be needed for this tutorial I wondered if it will effect how the project turns out my end.

Here is code from your flexslider.css v2.0

````.flex-direction-nav {*height: 0;} .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } .flex-direction-nav .flex-prev {left: -36px;} .flexslider:hover .flex-next {opacity: 0.8; right: 5px;} .flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} .flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}

Here is the code from flexslider I downloaded v.2.2.0

````.flex-direction-nav {*height: 0;}
.flex-direction-nav a  { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }
.flex-direction-nav .flex-prev { left: -50px; }
.flex-direction-nav .flex-next { right: -50px; text-align: right; }
.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; }
.flexslider:hover .flex-next { opacity: 0.7; right: 10px; }
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; }
.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; }
.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

5 Answers

Matt Campbell
Matt Campbell
9,767 Points

You don't need to touch the admin-bar css file. That's the css file for controlling the styling of the admin bar, as the name suggests. url() are relative so if you keep the file structure that flexslider comes with, it'll find the background image file.

Matthew is the following code the reason you mentioned the file structure will find the background image file? Did your images appear? Having trouble getting my images to appear. A box appeared in place of images. Did you play/pause images appear?

.flex-direction-nav a:before  { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; }
.flex-direction-nav a.flex-next:before  { content: '\f002'; }

Thank You.

Now that I have reached the stage where I have added the front-page slider the bg_direction_nav.png is not appearing. Instead I have to empty squares. I feel the above code I mentioned has something to do with it. Can I get some guidence on how to fix so that arrows appear?

I copied the url from the project 06 download flexslider.css. I now have previous arrow appearing on both sides of slider images and a 3 sided square outlining the direction bg_direction_nav.png. The next button is not showing up. Still need help clearing this up.

here is my code

.flex-direction-nav a  { display: block; width: 30px; height: 30px; margin: -20px 0 0; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; }

I have also noticed that the ver 2.2 comes with a Pause and Play image and css lines of code. The Previous version 2.0 does not have this as I have noticed when comparing files. Could the following code be part of the reason my images are acting quirky? I have not added background url to bg_play_pause.png

/* Pause/Play */
.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; }
.flex-pauseplay a:before  { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; }
.flex-pauseplay a:hover  { opacity: 1; }
.flex-pauseplay a.flex-play:before { content: '\f003'; }