[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: Code:
<div class="navlink tribe-previous"> Code:
<div class="navlink tribe-next"> Have tried the following CSS (and a bunch of other variations), without luck: Code:
.navlink tribe-previous a:hover { 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 HTML Code:
<div id="top"> HTML Code:
div#top ul.level1 li.blue ul.level2 li.darkblue {color: orange;} HTML Code:
#top .level1 .blue .level2 .dark-blue {color: green;} HTML Code:
.dark-blue {color: pink;} |
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:
Code:
#container .navlink tribe-previous a:hover { 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: Code:
#container .navlink tribe-previous Code:
#container .navlink tribe-next Code:
.navlink tribe-previous Code:
.navlink tribe-next 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 HTML Code:
.tribe-previous a:hover { HTML Code:
.navlink a:hover { |
Quote:
|
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
HTML Code:
.tribe-next HTML Code:
.navlink .tribe-next HTML Code:
.navlink, .tribe-next 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!! |
All times are GMT -6. The time now is 01:23 AM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.