WordPress.org

1. maringorama
   Member
   Posted 2 years ago #

   This is the homepage i am actually working on for a friend. My question is easy, a solution could give headaches, and is maybe not possible at all:

   As you can see, i managed via different stylesheets - triggered via the header (conditional tags referring to a certain category and page) - to give every page a different signal color.

   I would like this signal color to appear in the menu on the very top, via the HOVER function, as in: you are in ACCUEIL and hovering over the other menu buttons makes them "hover" in ORANGE - YELLOW - GREEN ....

   I could easily do this with making PIC files for the menu button and its rollover, but i think of it being more fun when triggering it via CSS and wordpress conditional tags - if this is possible ! (Also as the menu would then change it's size with the page when "zooming in".

   any ideas ? :)

2. maringorama
   Member
   Posted 2 years ago #

   it seems they are doing it.. kinda.. cant get the heck of it, and it's not wordpress ...

3. alchymyth
   The Sweeper
   Posted 2 years ago #

   in style.css:
   just for instance:

   you could try and add the following styles:

   #nav li.page-item-9 a:hover {background-color:green;border-bottom-color: green;}
   
   #nav li.page-item-10 a:hover {background-color:orange;border-bottom-color: orange;}

   and so on ...

   the page-item-9 number is the id of the page;
   adapt the colors.

4. maringorama
   Member
   Posted 2 years ago #

   thank you !!!! you did give the start off...
   i even managed to style the .current_page_item on the #header_menu_home, hahaha, tricky that one :)

   the code seems somewhat complicated tho, donno if i could simplify it somehow ? what do you think ?

   #wrappernav {
     width:450px;
     top: 0px;
     background-color: #000;
     height: 32px;
     float: left;
     z-index: 1;
   }
   #nav {
     float:left;
     width:auto;
     top: 0px;
     height: 50px;
   }
   #nav ul {
     height:50px;
     float:right;
     padding: 0px;
     margin: 0px;
     top: 0px;
     z-index: 1;
   }
   #nav li {
     text-align:center;
     float:left;
     display:inline;
     width:auto;
   }
   #nav li a {
     font-size:14px;
     display:block;
     top: 0px;
     padding-top: 6px;
     padding-right: 0px;
     padding-bottom: 6px;
     padding-left: 0px;
     border-bottom-width: 5px;
     background-color: #000;
     border-bottom-style: solid;
     border-bottom-color: #FFF;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-weight: normal;
     font-style: italic;
     color: #FFF;
   }
   #nav li a:hover {  /* ----------------COLOR COLOR COLOR -------------------- */
   	background-color:#F00;
   	border-bottom-width: 5px;
   	border-bottom-style: solid;
   	border-bottom-color: #F00;
   	color: #fff;
   	text-decoration: none;
   }
   
   #nav li#header-menu-home a {  /* ----------------COLOR COLOR COLOR -------------------- */
   	color:#fff;
   }
   
   #nav li#header-menu-home.current_page_item a {  /* ----------------COLOR COLOR COLOR -------------------- */
   	color:#F00;
   }
   #nav li#header-menu-home a:hover {  /* ----------------COLOR COLOR COLOR -------------------- */
   	color:#fff;
   	background-color:#F00;
   	border-bottom-color: #F00;
   }
   
   #nav li.page-item-4 a {color: #fff;}
   #nav li.page-item-4.current_page_item a {color: #ff8300;}
   #nav li.page-item-4 a:hover {color:#fff; background-color:#ff8300; border-bottom-color:#ff8300;}     /* --- apropos ------ */
   
   #nav li.page-item-6 a {color: #fff;}
   #nav li.page-item-6.current_page_item a {color: #ffcf00;}
   #nav li.page-item-6 a:hover {color:#fff; background-color:#ffcf00; border-bottom-color:#ffcf00;}     /* ---- films ----- */
   
   #nav li.page-item-7 a {color: #fff;}
   #nav li.page-item-7.current_page_item a {color: #0ff07b;}
   #nav li.page-item-7 a:hover {color:#fff; background-color:#0ff07b; border-bottom-color:#0ff07b;}    /* ---- ressources ----- */
   
   #nav li.page-item-8 a {color: #fff;}
   #nav li.page-item-8.current_page_item a {color: #21ddde;}
   #nav li.page-item-8 a:hover {color:#fff; background-color:#21ddde; border-bottom-color:#21ddde;}     /* ----- agenda ----- */
   
   #nav li.page-item-9 a {color: #fff;}
   #nav li.page-item-9.current_page_item a {color: #9844ff;}
   #nav li.page-item-9 a:hover {color:#fff; background-color:#9844ff; border-bottom-color:#9844ff;}    /* ----- contacts ---- */
   
   #nav li.page-item-10 a {color: #fff;}
   #nav li.page-item-10.current_page_item a {color: #ff33e2;}
   #nav li.page-item-10 a:hover {color:#fff; background-color:#ff33e2; border-bottom-color:#ff33e2;}    /* ----- liens ---- */

   thanx alot tho, much appreciated :)

Topic Closed

This topic has been closed to new replies.