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 » Page & Category Menu Bars »

Background color for visited takes over


  #1  
Old Oct 15, 2010, 12:45 AM
halthur
 
6 posts · Sep 2010
I am new to wordpress and are not really familiar with css coding so what I have done so far have really been by intuition and by copy past from other posts... so thank you for a great forum.

My problem is that I have been experimenting with the page menu background an colors and have tested with background images. Everything works fine except for that the visited settings (possibly from the settings in the page menu bar tab) seems to take over and thus the active never shows up.
It also seems like the background color comes from the page menu bar settings tab.

I use wordpress 3.0 and Atahualpa 3.5.1. Please have a look at my page:

http://www.colloidalresource.se/cmstest/

This is the code that I have inserted in the CSS inserts:

Code:
div#menu1
{
background: #ffffff;
border: 0px;
}

ul.rMenu li a:link
{
color: #ff4001 !important;
font-weight: bold !important;
font-size: 10pt !important;
background: gray !important;
width: 102px !important;
height: 25px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li a:visited
{
color: #000000 !important;
font-weight: bold !important;
font-size: 10pt !important;
width: 102px !important;
height: 25px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li a:active
{
color: #000000 !important;
font-weight: bold !important;
font-size: 10pt !important;
background: red !important;
width: 102px !important;
height: 25px !important;
text-align: center !important;
padding-top: 0px !important;
}

ul.rMenu li a:hover
{
color: #000000 !important;
font-weight: bold !important;
font-size: 10pt !important;
background: blue !important;
width: 102px !important;
height: 25px !important;
text-align: center !important;
padding-top: 0px !important;
}
Thanks in advance
  #2  
Old Oct 15, 2010, 08:24 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
A couple of thoughts.
  • First try switching the position of the hover and active CSS. Hover needs to come before Active.
  • Have you implemented the sub-menu bug fixes as explained in the New Versions and updating forum?
  • Have you tried using the Atahualpa menu color settings and taking out all your CSS to test?
  • What happens if you add the background color you want for the visited links?
__________________
~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.
  #3  
Old Oct 16, 2010, 02:07 PM
halthur
 
6 posts · Sep 2010
Thanks for your help!

I have changed the order accordingly and i have updated to AT 3.5.3.

I have also simplified the code somewhat, and yes in the end I do want the visited to be the same as the link... it just seems like that the visited takes over, so that the active is never displayed. This is even more visible when I code the colors differently for the visited and the link.

I have tryed to set the colors using the settings, but I want to code since I will be using images in the end.

This is what I have in the inserts now:

Code:
/* ================================================ */
/* Page menu background                             */
/* ================================================ */
div#menu1 { 
	height: 40px;  
	margin-top:0px; 
	background: blue; 
}
/* ================================================ */
/* Page Menu item's background and border           */
/* ================================================ */
div#menu1 ul.rMenu {
	background: yellow;
	border: none 0px; 
}
/* ================================================ */
/* Page Menu item                                  */
/* ================================================ */

ul.rMenu li a:link {
	background: green !important;
	color: #000000 !important;
}
ul.rMenu li a:visited {
	background: green !important;
	color: #000000 !important;
}
ul.rMenu li a:hover {
	background: red !important;
	color: #FFFFFF !important;
}
ul.rMenu li a:active {
	background: red !important;
	color: #000000 !important;
}
  #4  
Old Oct 16, 2010, 02:15 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
What happens if you take out the visited declaration?
__________________
~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.
  #5  
Old Oct 17, 2010, 11:28 AM
halthur
 
6 posts · Sep 2010
I have now deleted the visited declaration in the CSS inserts, everything els is the same. Pleas view the strange result on my site:

www.colloidalresource.se/cmstest

the link and visited gets the same brown color that I picked long time ago in the Page Menu Bar settings and the active works but with the light gray color which is also from those original settings.

The hover, the background, and the page menu items background however still gets their colors red, blue and yellow, from the CSS inserts.
This seems really odd to me, hope it makes sense to you
  #6  
Old Oct 17, 2010, 02:21 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
I am gathering that what you ultimately want to do is have an image on the menu and then when you hover the image changes but then you want the active tab to have a different image or color is that correct?
__________________
~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.
  #7  
Old Oct 18, 2010, 02:16 AM
halthur
 
6 posts · Sep 2010
Yes, That is exactly right!

  #8  
Old Oct 18, 2010, 10:49 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
It looks like you are using JD cheat sheet and one thing that is missing is the ul.rMenu li selector which may have to be worked into the code for you to get all of what you want. This would take awhile for me to fiddle with if I get the chance but it looks like you learning your way around CSS pretty well. I have never played with images in the background of menu items but I know there are others in the forum. Maybe a search on the forum will find something on this but I would encourage you to keep plodding away as this is a GREAT way to learn and I think you are pretty close.
__________________
~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

Tags
page menu, page menu background, page menu bar image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] how to change the entire background color, not the body color? crobertl Forum How-To 24 Sep 12, 2010 10:00 AM
Post visited link color dmtompki Post-Kicker, -Byline & -Footer 8 Dec 22, 2009 04:08 AM
[SOLVED] Different title color and byline background color for different categories? chiara7 Post-Kicker, -Byline & -Footer 1 Sep 9, 2009 06:01 PM
Fixed width site. Different page background color from body color? blueprairie Forum How-To 1 Mar 20, 2009 08:55 PM


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


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