asked on

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

Eddie Shipman

.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

nsitedesigns

ASKER

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

Eddie Shipman

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.

nsitedesigns

ASKER

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.

Eddie Shipman

I will download your entire CSS file and post it with the changes here. You can then do a compare on them.

nsitedesigns

ASKER

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

Eddie Shipman

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

ASKER CERTIFIED SOLUTION

Eddie Shipman

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

nsitedesigns

ASKER

This works! Thanks Eddie!

Eddie Shipman

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.