custom css in smoothslider

[netgeorger]

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.

[Atelierbram]

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

[netgeorger]

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;}

[Atelierbram]

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 …

[MBM]

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>

[Atelierbram]

@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 …

[netgeorger]

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.

[Atelierbram]

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.

[netgeorger]

Thanks a lot
I’ll try to figure that out

[netgeorger]

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

[Author]

Posts