Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)
-   -   Background color for visited takes over (http://forum.bytesforall.com/showthread.php?t=10353)

halthur Oct 15, 2010 12:45 AM

Background color for visited takes over
 
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

lmilesw Oct 15, 2010 08:24 PM

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?

halthur Oct 16, 2010 02:07 PM

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;
}


lmilesw Oct 16, 2010 02:15 PM

What happens if you take out the visited declaration?

halthur Oct 17, 2010 11:28 AM

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 :)

lmilesw Oct 17, 2010 02:21 PM

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?

halthur Oct 18, 2010 02:16 AM

Yes, That is exactly right!

:)

lmilesw Oct 18, 2010 10:49 AM

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.


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

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