Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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, 02:11 PM
New WordPress Fan
 
141 posts · Jul 2010
[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">
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 02:31 PM.
  #2  
Old Mar 8, 2013, 02:34 PM
lmilesw's Avatar
lmilesw
 
10,176 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 02:48 PM.
  #3  
Old Mar 8, 2013, 05: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, 05:25 PM
juggledad's Avatar
juggledad
 
23,765 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, 06: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, 07:24 PM
juggledad's Avatar
juggledad
 
23,765 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 9, 2013, 06:38 AM
lmilesw's Avatar
lmilesw
 
10,176 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.
  #8  
Old Mar 9, 2013, 09: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!!!!
  #9  
Old Mar 9, 2013, 09: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!
  #10  
Old Mar 9, 2013, 09:17 AM
lmilesw's Avatar
lmilesw
 
10,176 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.

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 03:48 AM
[SOLVED] Modern Tribe Events Calendar not displaying properly Bilbo Montezuma Theme 2 Oct 30, 2012 01:21 AM
The Events Calendar is giving me an error message on the calendar page dancermom Plugins & Atahualpa 3 Apr 7, 2011 09:49 AM
Default Upcoming Event message even if no event possible for calendar? shalinisridhar Plugins & Atahualpa 2 Nov 29, 2010 10:20 PM
[SOLVED] How to style the Previous/Next Navigation links Fux Header configuration & styling 6 Aug 16, 2009 08:41 AM


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


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