format arrows on slider

How do I customize the look of the arrows in the slider (yellow ad with the book)?  
http://pl.triolibraries.com/

Right now the arrows are white with an underline and when you hover over them, the background of the arrow turns black.

Am hoping to:
activate underline on arrows ONLY on mouseover
change arrows themselves to gray color
Remove black box color on mouseover

Here is some css that I have been playing with
/* ..... SLIDER......*/

#frontpage-slider .zeeslide .slide-entry {
    position: absolute;
   background: none;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
  bottom: .5em;
    left: .5em;
    color: #004488;
     width: 90%;
  text-decoration:none;
}

#frontpage-slider .zeeslide .slide-entry .slide-more-link, #frontpage-slider .zeeslide .slide-entry .slide-more-link:link, #frontpage-slider .zeeslide .slide-entry .slide-more-link:visited {
    color: #004488;
  text-decoration:underline;}

.frontpage-slider-controls .zeeflex-direction-nav a {
    display: block;
    position: absolute;
    margin: -50px 1em 0 0;
    width: 50px;
    height: 50px;
    background: none;  /*.. removes color from behind left and right arrows...*/
  color: #004488;}

Open in new window

nsitedesignsAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Eddie ShipmanAll-around developerCommented:
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, .frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover

Open in new window

   Add
text-decoration: underline;

Open in new window


.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next

Open in new window

   Add text-decoration: none;

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev

Open in new window

   Add text-decoration: none;

.frontpage-slider-controls .zeeflex-direction-nav a:before

Open in new window

   Change color to #999999

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, .frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover

Open in new window

   Remove background-color
0
nsitedesignsAuthor Commented:
I added the below code to my css and it didn't do anything.  I also tried viewing in private window.  Not sure where I am going wrong.
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, .frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover {text-decoration: underline; background-color:none;}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next{text-decoration: none;}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev {color:#999;}

Open in new window

0
Eddie ShipmanAll-around developerCommented:
Well, I just made those changes in the Chrome developer window and it did what you asked. Maybe you are doing it wrong?
First, I see that on the last one did not mean to set the background-color to none, it said to remove the property.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

nsitedesignsAuthor Commented:
I put background-color: none on the first code snippet since it was calling for the same selector.

I also tried removing all my original code and only going with your code but that didn't work either.
0
Eddie ShipmanAll-around developerCommented:
I will download your entire CSS file and post it with the changes here. You can then do a compare on them.
0
nsitedesignsAuthor Commented:
I can provide you with the css that I altered.  The other css that "came with" the template is somewhat above my head.
/* ..... COLORS .....
GRAY = 303030
tan = 6e5340
blue 004488

*/

/* ..... REMOVES WORD "HOME" FROM HOME PAGE CONTENT AREA .....
.home .page-title { display:none; }*/

#content {
  padding: 0em 2em 0;}
  

#logo .site-title a {
  text-decoration: none;}


/* ..... SLIDER......*/


#frontpage-slider .zeeslide .slide-entry {
    position: absolute;
   background: none;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
  bottom: .5em;
    left: .5em;
    color: #004488;
     width: 90%;
  text-decoration:none;
}

#frontpage-slider .zeeslide .slide-entry .slide-more-link, #frontpage-slider .zeeslide .slide-entry .slide-more-link:link, #frontpage-slider .zeeslide .slide-entry .slide-more-link:visited {
    color: #004488;
  text-decoration:underline;}

.frontpage-slider-controls .zeeflex-direction-nav a {
    display: block;
    position: absolute;
    margin: -50px 1em 0 0;
    width: 50px;
    height: 50px;
    background: none;  /*.. removes color from behind left and right arrows...*/
  color: #004488;}



.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, .frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover {text-decoration: underline; background-color:none;}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next{text-decoration: none;}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev {color:#999;}


  
  



/* ..... HOME PAGE WIDGET TITLE......*/
#frontpage-magazine-widgets .widget .widgettitle {
    font-family: 'Raleway', Arial, Tahoma;
    font-size: 0.9em;
    padding: 0.9em;
    margin: 0 0 1.5em 0;
    background: #004488;}

/*...remove text on slider...
.slide-entry {
    display: none;
}*/

/* ..... IMAGES IN POSTS .....*/ 
.entry img {
    padding-bottom: 0px;
}

.entry h2, comment h2{
    font-size: 1.4em;
    padding: 0.3em 0;
  margin: 1.2em 0 0.3em;
  color: #aa740f;
  font-weight: normal;
border-bottom:1px solid #ccc;
 
}

.type-post, .type-page, .type-attachment {
margin:0px;
  padding:0px;
    border-bottom: 0px dashed #aaa;}



/* ..... BULLETS.....*/ 
  .entry ol {
    margin: 0;
}


/* ..... HEADER.....*/ 
#header {
    padding: .5em 2em;
}

/* ..... MONARCH FORM.....*/ 
input, textarea {
    margin: 5px;
  padding:0px;
}

input[type="submit"] {
    color: #0e328d;
    background-color: #fff;
    text-decoration: underline;
}



  
/* ..... H TAGS .....*/

/*... h1...*/

.page-title {
    font-size: 2.3em;
    padding: .9em 0px 0px 0px;
  color:#0e328d;
}
.page-title, .entry-title {
    font-weight: normal;
    font-family: 'Bitter', Georgia, Arial, Tahoma;
     color: #0e328d;

    -ms-word-wrap: break-word;
    word-wrap: break-word;
}



.entry h3, .comment h3 {
    font-size: 1.1em;
    color: #6e5340;
  font-weight: normal;
}

/* ..... SIDEBARS .....*/

.widgettitle {
    font-size: 1em;
    font-family: 'Raleway', Arial, Tahoma;
    color: #fff;
  background: #303030;
  padding: 0.5em;
  box-shadow: none;
  border:none;
  margin: -0.5em -0.5em .3em -0.5em;
}


.widget .textwidget p {
    margin-bottom: 1em;
  font-size: .9em;}

#sidebar {
  background: linear-gradient(to right, #ccc 0%,#c5b595 100%);}


.widget {
    padding: 1em 1em 0px 1em;}


/* ..... LINKS .....*/

a, a:link {
    color:blue;
    text-decoration: underline;
  font-weight:normal;
}


/* visited link */
a:visited {
    color: #DC143C;
}

/* mouse over link */
a:hover {
    color: tan;
}

/* selected link */
a:active {
    color: blue;
}

 
/* .... NAVIGATION..... */

.main-navigation-menu a {
    display: block;
}
  
#navi-wrap {
    border-top: 0px solid #004488;
    border-bottom: 0px solid #004488;
}
  

.main-navigation-menu li:last-child { border: none; }


  /* .... IMAGES..... */
.entry img {
    padding-bottom: 20px;
}


  /* .... FOOTER..... Go to "Tools/Remove Footer Credit" to modify text */
#footer #footer-text {
    font-size: .95em;
  line-height: 2em;
  color:#fff;
}



  /* .... BODY..... */
  
  .entry p, .comment p {
    font-size: .9em;
}
    .type-post, .type-page, .type-attachment {
    border-bottom: 0px dashed #aaa;
}
    
body {
    font-family: 'Raleway', Arial, Tahoma;
    font-size: 1.1em;
    color: #111;
}

Open in new window

0
Eddie ShipmanAll-around developerCommented:
Try making only these changes:
Having these flex-slider selectors in your own file, I'm not sure about that. I would make the changes in the flex-slider css file because I'm modifying it for my site.

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, 
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover {
    text-decoration: underline;
    background: none;
}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next {
    text-decoration: none;
}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, 
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover {
    text-decoration: underline;
    background: none;
}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next, 
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev {
    color: #999;
    text-decoration: none;
}

.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-next:before {
    content: '\f429';
    color: #999;
}

.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-prev:before {
    content: '\f430';
    color: #999;
}

Open in new window

0
Eddie ShipmanAll-around developerCommented:
After looking a little closer, it seems that this is what you need, however, I can't get it to work correctly in Chrome; works perfectly in IE 11. Take a look after making these changes and see if it works for you.

.frontpage-slider-controls .zeeflex-direction-nav a:hover {
    text-decoration: underline;
    background: none;
}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next, 
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev {
    text-decoration: none;
}

.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-prev:hover, 
.frontpage-slider-controls .zeeflex-direction-nav .zeeflex-next:hover {
    background: none;
}

.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-next:before,
.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-prev:before {
    color: #999;
}

.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-next:before {
    content: '\f429';
}

.frontpage-slider-controls .zeeflex-direction-nav a.zeeflex-prev:before {
    content: '\f430';
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
nsitedesignsAuthor Commented:
This works!    Thanks Eddie!
0
Eddie ShipmanAll-around developerCommented:
You know, personally, I liked the white arrows better, easier to see on the "Plymouth Public Library Hours" slide.
Is that site your design? It looks great.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.