[SOLVED] Tribe Events Calendar: How to Style Next & Previous Navigation links in Even
 

Have installed the Tribe Events Calendar plugin (http://wordpress.org/extend/plugins/...ents-calendar/) with Atahualpa 3.7.10 and Wordpress 3.5.1.

I can't seem to find the right CSS indicator to style the Next and Previous Navigation Links that appear at the bottom of each Event post.

The page source code shows the following before the Previous Nav link:

And the following before the Next Nav Link:

I want to change the a:hover color of these links from red to white.

Have tried the following CSS (and a bunch of other variations), without luck:

What am I doing wrong? I'd really appreciate any help you can give!!

Many thanks!

One thing I quickly see is there is no . before tribe-previous and tribe-next or was that a typo?
what is the url?

Thanks for the reply, lmilesw.

There is no typo. The . begins my attempted CSS Code because I thought that in CSS, you use a . to indicate a div class (and # to indicate a div id). No?

Anyway, I tried the same code, deleting the . -- and still no luck.

try this, write out your css in longhand, ie use the html element and ID/class

for example if you had this html
to set the color of the class dark-blue in longhand it would be
in short hand it could be
or in this case, really simple

Thank you, Juggledad. I tried that, and still come up with the same CSS code I had tried (as referenced above) stated in the "really simple" format. I also tried the longhand version:

But no luck. It seems that all of the div classes on that page work in the .[div class name] format to style the respective elements, EXCEPT for the next/previous navigation links and the Edit link -- both of which are found in the container just underneath the event post.

I will send you the URL via private message.

Many thanks!

What is 'tribe-next'? its not an HTML element so it is a class or an ID. If it is an ID, it needs a pound sign before it. If it is a class, it needs a period

Each of "navlink tribe-previous" and "navlink tribe-next" is identified as a div class in the page source. See my first post above.

In the page source, all div id's above those div classes appear to have been closed all the way up to the #container.

Therefore the longhand appears to be:

and

and the simple version should be:

and

But this does not work to style the elements.

I sent you the URL by private message.

Many thanks.

Since they are a class you need a period before them ie .tribe-next
Try using just '.tribe-next' you don't need both classes so you could have
or just

I said the . was missing not that you should delete it.

That works!!! (using just the .tribe-previous and the .tribe-next, as quoted by juggledad in his last post). Thank you both, Juggledad and lmilesw!!

You taught me something important: I did not previously understand that there could be more than one class (that is, nested classes) identified after a single <div class> tag in the source code without any punctuation between them in the source code -- i.e. that navlink is a class and apparently tribe-previous and tribe-next themselves are classes of navlink.

Thank you both very much!!!!

P.S. Can either of you recommend a good online course in CSS code?

Many thanks!

tribe-previous and tribe-next are just classes. They are not classes of navlink. If you have an element with a class of navlink and within that element there are elements with a class of tribe-next for instance you can target all the tribe-next classes by using . If you only want to target the items with a class of tribe-next that are withing the item with a class of navlink then you would use If you wanted to target all items with a class of either navlink or tribe-next you would use . Note the comma.

Two good places for turorials and info on css are w3schools.com and htmldog.com

Thank you very much for the explanation, lmilesw! Very helpful!!

I'll try the tutorials you reference.

Again, Thank you very much, lmilesw and juggledad!!