Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS custom css in smoothslider

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #170529
    netgeorger
    Participant

    I am so new to all this it is hard to find where I need to go to do what I want. In the slider I have a default number bar to select the individual slides. I have the
    background on this opaque so looking at the boxes there outlined with the box inside in crimson red. I found the area in Css that changes the active color to white but the links on the numbers are the blue that the default is for the whole site. I fooled around with this and managed to change all the links to white which looks good on the slider crimson red with white numbers then black background when selected versus white. unfortunately that made all the links invisible on the rest of the site. I started studying how to change the links just for a single text object. The problem I have is I don’t really know where that object is I went to firefox web developer and looked at the objects and I see
    rows of these from 1 to 11
    11
    How can I change the link color just the numbers in the number selector bar is my question?
    }
    a:link {
    color: #0066cc;
    }
    a:visited {
    color: #743399;
    }
    a:active,
    a:hover {
    color: #ff4b33;
    }

    I copied this out of the site.
    sorry for my ignorance this is the first time I ever looked at this stuff and I really don’t know how to rea the css.

    #170530
    Atelierbram
    Participant

    @netgeorger Can you maybe share a link to the live site?

    #170536
    netgeorger
    Participant

    Im sorry my site still isn’t live as is it looks terrible with the blue numbers you can not see pica 8 and on deep
    red color. Here is the css devoted to smooth slider but I really don’t know what I am looking at here is the css on smooth slider

    /Navigation numbers/
    .smooth_slider .smooth_nav { position:absolute;bottom:0px;text-align:center;margin: 10px auto;}
    .smooth_slider .smooth_nav a.smooth_slider_nnav { padding: 2px 6px; margin: 3px; border: 1px solid #fff; text-align: center; text-decoration: none; font-weight:normal;}
    .smooth_slider .smooth_nav a.smooth_slider_nnav.activeSlide { font-weight:bold;background-color: #fff; }
    .smooth_slider .smooth_nav a.smooth_slider_nnav:focus { outline: none; }
    .smooth_slider .smooth_nav a.smooth_slider_inav{display:block;float:left;}
    .smooth_slider .smooth_nav a.smooth_slider_bnav{background: transparent url(buttons/default/nav.png) no-repeat 0 0;margin:0 3px;}

    #170544
    Atelierbram
    Participant

    Maybe make a Codepen? Are we talking about this


    @netgeorger
    you can clone this on Codepen if you want, and then maybe more easily try things out …

    #170626
    MBM
    Participant

    I think you want to target individual link elements? Use a class :

    a.bar:link {color:#333333;} 
    a.bar:visited {color:#000000;}
    a.bar:hover {color:#ffff00;} 
    a.bar:active {color:#eeeeee;}
    

    Then in your HTML :

    <a class="bar" href="index.html">Home</a>
    
    #170670
    Atelierbram
    Participant

    @netgeorger Hard to imagine a name conflict could cause bleeding the styles over to others with selectors this specific. If my Codepen copy of smooth-slider is indeed the thing we are talking about, then

    
    .smooth_slider .smooth_nav a.smooth_slider_nnav  { }
    

    will target the regular numbers, and

    
    .smooth_slider .smooth_nav a.smooth_slider_nnav.activeSlide {  }
    

    (also) the active number

    But again, hard to say anything for certain without seeing your code live somewhere …

    #170708
    netgeorger
    Participant

    First thank you all for the insight and help.
    Yes this is what I am using what you have in the code pen is what I have
    the Css on the links affects the whole site if I manipulate them. So I believe I need a class as mbm points out my problem is I don’t know where to put the code offered. I don’t really know what I need to target.
    thank you all.

    #170711
    Atelierbram
    Participant

    I don’t know where to put the code offered.

    When you copy the style declarations from your plugins css into your WP (child-theme?)-stylesheet, then, most likely, you can override the default styles from the plugin

    I don’t really know what I need to target.

    Think I explained that above in the last comment, but


    @netgeorger
    What you could do is:

    1. create an account on Codepen (if you haven’t already)
    2. fork the reduced testcase I made
    3. change it, adapt it to your needs, try things out

    Then take it on from there, ’cause when you can show what you did, and you have a question, you will find people on this forum to help you out with this.

    #170720
    netgeorger
    Participant

    Thanks a lot
    I’ll try to figure that out

    #170652
    netgeorger
    Participant

    First I want to thank all for helping me with this
    From my quick study I think that the class Idea is right on as I found examples of that solution.
    now if I could just figure out where to put the css and the html
    what they have in smoothslider is a custom css box that allows you to add css but I don’t know were to put the target or html mind you I am
    working in wordpress and using only the inspector firefox developer tools.

    MOD EDIT – Codedump removed

Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.