- This topic is empty.
-
AuthorPosts
-
May 18, 2014 at 8:07 am #170529
netgeorger
ParticipantI 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.May 18, 2014 at 8:56 am #170530Atelierbram
Participant@netgeorger Can you maybe share a link to the live site?
May 18, 2014 at 11:32 am #170536netgeorger
ParticipantIm 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;}May 18, 2014 at 11:43 am #170544Atelierbram
ParticipantMaybe 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 …May 19, 2014 at 5:25 pm #170626MBM
ParticipantI 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>
May 20, 2014 at 2:02 am #170670Atelierbram
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 …
May 20, 2014 at 9:41 am #170708netgeorger
ParticipantFirst 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.May 20, 2014 at 10:10 am #170711Atelierbram
ParticipantI 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 pluginI 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:- create an account on Codepen (if you haven’t already)
- fork the reduced testcase I made
- 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.
May 20, 2014 at 11:27 am #170720netgeorger
ParticipantThanks a lot
I’ll try to figure that outMay 23, 2014 at 2:23 am #170652netgeorger
ParticipantFirst 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.