Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Andrea Sorrell
Andrea Sorrell
4,736 Points

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
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.

Andrea Sorrell
Andrea Sorrell
4,736 Points

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'; }
Andrea Sorrell
Andrea Sorrell
4,736 Points
Andrea Sorrell
Andrea Sorrell
4,736 Points

Thank You.

Andrea Sorrell
Andrea Sorrell
4,736 Points
Andrea Sorrell
Andrea Sorrell
4,736 Points

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?

Andrea Sorrell
Andrea Sorrell
4,736 Points
Andrea Sorrell
Andrea Sorrell
4,736 Points

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; }
Andrea Sorrell
Andrea Sorrell
4,736 Points
Andrea Sorrell
Andrea Sorrell
4,736 Points

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'; }