Return to Support

replace slider dots with arrow – code not working

Home Forums Graphene WordPress theme Support replace slider dots with arrow – code not working

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #10556
    teainthesahara
    Participant

    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.

    #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");
    }

    #46417
    teainthesahara
    Participant

    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?

    #46418

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

    #46419
    teainthesahara
    Participant

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

    Any pointers at all will be greatly appreciated!

    #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?

    #46421
    teainthesahara
    Participant

    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)

    #46422
    teainthesahara
    Participant

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

    Thanks.

    #46423

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

    #46424
    teainthesahara
    Participant

    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?

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.