WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] individual MENU LI COLOR via CONDITIONAL TAGS ??? (4 posts)

  1. maringorama
    Member
    Posted 4 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 4 years ago #

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

  3. alchymyth
    Forum Moderator
    Posted 4 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 4 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.

About this Topic