[teainthesahara]

teainthesahara

#10556

I am trying to replace the dots under my slider with arrow images. I was some code on the forums and now my test site child theme looks lile this:

/*

Theme Name:     Graphene Child

Theme URI:      http://johnbarefield.com/test/graphene-child/

Description:    Child theme for the Graphene theme

Author:         John Barefield

Author URI:     http://johnbarefield.com/test/

Template:       graphene

Version:        1.9.4.2

*/

@import url("../graphene/style.css");

/*



.slider_nav a, .slider_nav a:visited {

background: url("http://johnbarefield.com/slider-arrows%20light.png

");

}



.slider_nav a:hover {

background: url("http://johnbarefield.com/slider-arrows%20dark.png");

}



*/

But it doesn’t work for me. I have been looking at the forums and a lot of people mentioned sprite images, usually aiming above my head, that is, everybody in the conversation already knew all about them. Should I alter sprites image, to customize the sliders arrows/dots, while making my site faster? I don’t know how to do that.

What I really need to know is the very best way to change the dots to arrows, and a pointer to how how to do that, including the very basic baby steps.

Can anyone give me some pointers? I’d really appreciate it because I need the arrows for my primary site.

[Kenneth John Odle]

Kenneth John Odle

#46416

That’s because you’ve commented out your code.

In CSS, /* is the opening comment tag and */ is the closing comment code.

You have:

/*



.slider_nav a, .slider_nav a:visited {

background: url("http://johnbarefield.com/slider-arrows%20light.png

");

}



.slider_nav a:hover {

background: url("http://johnbarefield.com/slider-arrows%20dark.png");

}



*/

but it should be

.slider_nav a, .slider_nav a:visited {

background: url("http://johnbarefield.com/slider-arrows%20light.png

");

}



.slider_nav a:hover {

background: url("http://johnbarefield.com/slider-arrows%20dark.png");

}

[teainthesahara]

teainthesahara

#46417

Thanks for the assist! It shows I have a lot to learn.

Now I have entered the code as you suggest, and it looks like this:

/*

Theme Name:     Graphene Child

Theme URI:      http://johnbarefield.com/test/graphene-child/

Description:    Child theme for the Graphene theme

Author:         John Barefield

Author URI:     http://johnbarefield.com/test/

Template:       graphene

Version:        1.9.4.2

*/

@import url("../graphene/style.css");



.slider_nav a, .slider_nav a:visited {

background: url("http://johnbarefield.com/slider-arrows%20light.png

");

}



.slider_nav a:hover {

background: url("http://johnbarefield.com/slider-arrows%20dark.png");

}

But the dots still appear, rather than the arrows that I intended. I wish I knew what I was doing wrong. Can you help?

[Kenneth John Odle]

Kenneth John Odle

#46418

Link to site, so we can take a closer look?

[teainthesahara]

teainthesahara

#46419

Thanks for that. Sorry, here’s the URL: http://johnbarefield.com/test/

Any pointers at all will be greatly appreciated!

[Kenneth John Odle]

Kenneth John Odle

#46420

That’s weird, because it should work.

When I copy and paste into a validator from your stylesheet here: http://johnbarefield.com/test/wp-content/themes/graphene-child/style.css?ver=4.6.1

I get errors.

But when I download your stylesheet, and copy and paste into a validator, I get no errors.

This makes me think there may be an encoding issue with your stylesheet. Because when I inspect your page (press f12—it will teach you a lot!), I see the browser combining the two rules in your stylesheet. So, next question:

What program/application are you using to write your stylesheet?

Second question:

Do you know what encoding that program/application is using?

[teainthesahara]

teainthesahara

#46421

Thanks very much for your response.

I just did it on WP. Network admin:test Sites > Themes > Graphene Child > Edit

This takes me to:

Edit Themes

Graphene Child: Stylesheet (style.css)

[teainthesahara]

teainthesahara

#46422

Should I be using a more sophisticated encoding editor/program/application?

Thanks.

[Kenneth John Odle]

Kenneth John Odle

#46423

That should work. I’m not quite sure what is going on here.

[teainthesahara]

teainthesahara

#46424

You said,

Quote:

I see the browser combining the two rules in your stylesheet.

You mean the two rules for the slider dots and arrows?