Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Plugins & Atahualpa »

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


  #1  
Old Mar 8, 2013, 03:11 PM
New WordPress Fan
 
141 posts · Jul 2010
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">
And the following before the Next Nav Link:

Code:
<div class="navlink tribe-next">
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:

Code:
.navlink tribe-previous a:hover {
color: #ffffff !important;
}

.navlink tribe-next a:hover {
color: #ffffff !important;
}
What am I doing wrong? I'd really appreciate any help you can give!!

Many thanks!

Last edited by lmilesw; Mar 8, 2013 at 03:31 PM.
  #2  
Old Mar 8, 2013, 03:34 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
One thing I quickly see is there is no . before tribe-previous and tribe-next or was that a typo?
what is the url?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by juggledad; Mar 8, 2013 at 03:48 PM.
  #3  
Old Mar 8, 2013, 06:07 PM
New WordPress Fan
 
141 posts · Jul 2010
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.
  #4  
Old Mar 8, 2013, 06:25 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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">
    <ul class="level1">
         <li class="red">this is a color</li>
         <li class="blue">these are blue colors
              <ul class="level2">
                   <li class="light-blue">this is a color</li>
                   <li class="dark-blue">this is a color</li>
              </ul>
         </li>
         <li class "green">this is a color</li>
    </ul>
to set the color of the class dark-blue in longhand it would be
HTML Code:
div#top ul.level1 li.blue ul.level2 li.darkblue {color: orange;}
in short hand it could be
HTML Code:
#top .level1 .blue .level2 .dark-blue {color: green;}
or in this case, really simple
HTML Code:
.dark-blue {color: pink;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Mar 8, 2013, 07:53 PM
New WordPress Fan
 
141 posts · Jul 2010
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 {
color: #ffffff !important;
}

#container .navlink tribe-next a:hover {
color: #ffffff !important;
}
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!
  #6  
Old Mar 8, 2013, 08:24 PM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Mar 8, 2013, 09:53 PM
New WordPress Fan
 
141 posts · Jul 2010
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
and

Code:
#container .navlink tribe-next
and the simple version should be:

Code:
.navlink tribe-previous
and

Code:
.navlink tribe-next
But this does not work to style the elements.

I sent you the URL by private message.

Many thanks.
  #8  
Old Mar 9, 2013, 03:56 AM
juggledad's Avatar
juggledad
 
23,576 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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 {
color: #ffffff !important;
}

.tribe-next a:hover {
color: #ffffff !important;
}
or just
HTML Code:
.navlink a:hover {
color: #ffffff !important;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 9, 2013 at 04:31 AM.
  #9  
Old Mar 9, 2013, 07:38 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by New WordPress Fan
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.
I said the . was missing not that you should delete it.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Mar 9, 2013, 10:00 AM
New WordPress Fan
 
141 posts · Jul 2010
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!!!!
  #11  
Old Mar 9, 2013, 10:10 AM
New WordPress Fan
 
141 posts · Jul 2010
P.S. Can either of you recommend a good online course in CSS code?

Many thanks!
  #12  
Old Mar 9, 2013, 10:17 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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
. 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
HTML Code:
.navlink .tribe-next
If you wanted to target all items with a class of either navlink or tribe-next you would use
HTML Code:
.navlink, .tribe-next
. Note the comma.

Two good places for turorials and info on css are w3schools.com and htmldog.com
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #13  
Old Mar 9, 2013, 10:35 AM
New WordPress Fan
 
141 posts · Jul 2010
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!!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tribe Events Calendar plugin - Changes a:active link color in site navigation bar New WordPress Fan Plugins & Atahualpa 5 Mar 19, 2014 04:48 AM
[SOLVED] Modern Tribe Events Calendar not displaying properly Bilbo Montezuma Theme 2 Oct 30, 2012 02:21 AM
The Events Calendar is giving me an error message on the calendar page dancermom Plugins & Atahualpa 3 Apr 7, 2011 10:49 AM
Default Upcoming Event message even if no event possible for calendar? shalinisridhar Plugins & Atahualpa 2 Nov 29, 2010 11:20 PM
[SOLVED] How to style the Previous/Next Navigation links Fux Header configuration & styling 6 Aug 16, 2009 09:41 AM


All times are GMT -6. The time now is 04:04 AM.


Powered by vBulletin® Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.