Change Color of "Next > >>" & "<< < Prev"

[4EverPhotography]

How can I change the color of only "Next > >>" and "<< < Prev" above my thumbnails in Galleries with several pages of photos?

Here is an example: http://www.officialphotographer.co.nz/gallery/4137176_bJvx7#362346168_gFew6

Thanks,
Stacie

http://4EverPhotography.com

[jfriend]

First, you have to fix an error in your CSS that is keeping new things at the end from working:

Add a closing brace to this:

.top_border, /*removes gallery borders*/
.bottom_border,
.left_border,
.right_border {
border:0;
}

Then, you can control the color of the various navigation things with this CSS:

a.nav.next {color:blue;}
a.nav.prev {color:blue;}
a.nav.first {color:blue;}
a.nav.last {color:blue;}

[4EverPhotography]

First, you have to fix an error in your CSS that is keeping new things at the end from working:

Add a closing brace to this:

.top_border, /*removes gallery borders*/
.bottom_border,
.left_border,
.right_border {
border:0;
}

Then, you can control the color of the various navigation things with this CSS:

a.nav.next {color:blue;}
a.nav.prev {color:blue;}
a.nav.first {color:blue;}
a.nav.last {color:blue;}


I couldn't find anything in my CSS that wan't closed with a }. Maybe you were looking at the site link I gave as an example instead of my site?

Also, I added the above to try and change the font colors, and it didn't work. What am I doing wrong?

Thanks again, Stacie
http://www.4everphotography.com

[Allen]

I couldn't find anything in my CSS that wan't closed with a }. Maybe you were looking at the site link I gave as an example instead of my site?

Also, I added the above to try and change the font colors, and it didn't work. What am I doing wrong?

Thanks again, Stacie
http://www.4everphotography.com
Only found one oops :D

change

a:active {
color:#ffffff;
#caption_top {
display: block;
}
}

to this

a:active {
color:#ffffff; }
#caption_top {
display: block;
}

[jfriend]

I couldn't find anything in my CSS that wan't closed with a }. Maybe you were looking at the site link I gave as an example instead of my site?

Also, I added the above to try and change the font colors, and it didn't work. What am I doing wrong?

Thanks again, Stacie
http://www.4everphotography.com

I got confused in your original posting. I thought your site was: http://www.officialphotographer.co.nz/gallery/4137176_bJvx7#362346168_gFew6. That site has some messed up CSS.

[4EverPhotography]

Only found one oops :D

change

a:active {
color:#ffffff;
#caption_top {
display: block;
}
}

to this

a:active {
color:#ffffff; }
#caption_top {
display: block;
}


Thanks! I fixed that problem, but still haven't figured out how to change the "Next > >>" & "<< <Prev" colors.

How can I do that?

[jfriend]

I couldn't find anything in my CSS that wan't closed with a }. Maybe you were looking at the site link I gave as an example instead of my site?

Also, I added the above to try and change the font colors, and it didn't work. What am I doing wrong?

Thanks again, Stacie
http://www.4everphotography.com

After fixing the CSS mistake that Allen mentioned, the following CSS will change those colors:

a.nav.next {color:blue !important;}
a.nav.prev {color:blue !important;}
a.nav.first {color:blue !important;}
a.nav.last {color:blue !important;}

Note, there is no period in front of the a like you have in your CSS right now.

[4EverPhotography]

After fixing the CSS mistake that Allen mentioned, the following CSS will change those colors:

a.nav.next {color:blue !important;}
a.nav.prev {color:blue !important;}
a.nav.first {color:blue !important;}
a.nav.last {color:blue !important;}


Adding the !important fixed it. Thanks so much!

[jfriend]

Adding the !important fixed it. Thanks so much!

FYI, the !important is needed when you use a theme that also defines this same attribute. The !important tells the browser that you want to override the setting in the theme. It is only needed if the theme is also specifying this exact attribute.

[Distant Light]

I have followed the tips of this thread and have all of my "prev" and "next" and arrows to the color I want - The only pesky thing remaining is the color of the actual page that the viewer is on - it's still green as is the shadow behind each page number if you go to the page number drop down to navigate to another page in the gallery - help please ?

[Allen]

I have followed the tips of this thread and have all of my "prev" and "next" and arrows to the color I want - The only pesky thing remaining is the color of the actual page that the viewer is on - it's still green as is the shadow behind each page number if you go to the page number drop down to navigate to another page in the gallery - help please ?
The font size in this is making a lot of text unreadable, like your navbar.

body {
font-family: BlairMdITC TT, sans-serif !important;
font-size: 50%;
}

[Allen]

I have followed the tips of this thread and have all of my "prev" and "next" and arrows to the color I want - The only pesky thing remaining is the color of the actual page that the viewer is on - it's still green as is the shadow behind each page number if you go to the page number drop down to navigate to another page in the gallery - help please ?
Try this in CSS

.pageNav .title {
color: yellow !important;
}

.pickerContent a.page:hover {
background-color: #cccccc !important;
color: #000 !important;
}
.pickerContent a.pageOn,
.pickerContent a.pageOn:hover {
background: none !important;
color: red !important;
}

[HamSmuggler]

Tried the following code to shrink the size of my breadcrumb and <<prev and Next>> links. works for breadcrumbs, but not for the navigation links? Any ideas on what I'm doing wrong?

#breadcrumb a:link,
#breadcrumb a:visited,
#breadcrumb a:active,
#breadcrumb a:hover {
font-size:10px !important;
}

a.nav.next {
font-size:10px !important;
}
a.nav.prev {
font-size:10px !important;
}
a.nav.first {
font-size:10px !important;
}
a.nav.last {
font-size:10px !important;
}

.albumNav {
font-size:10px !important;
}