WordPress.org

1. stoneroses6300
   Member
   Posted 8 months ago #

   The full title of this topic should be

   "How to change the menubar of a theme into a menubar I created in photoshop, and then place coordinates in the header file so parts of the graphic can be clicked on"

   This may be a complicated, but hopefully someone can help. I dont like the standard font and background colors that can be used HTML style so I designed my own menubar in photoshop for a site I;m working on now (www.thematchmakingco.com). The graphic menu bar is not up there as you will see. I know how to get the graphic menubar up there by changing this in the css file

   "#sub_menu ul { width: 944px; margin: 0 0 0 3px; padding: 9px 0; list-style: none; background:
   #d1e0fb; text-align: center; }"

   to

   "#sub_menu ul { width: 944px; margin: 0 0 0 3px; padding: 9px 0; list-style: none; background:
   url(images/menubar2.jpg); text-align: center; }

   Now, after this is done, the graphic is show but it collides with the original menu bar that is up on the site now. The "Home", "About Us", Register" ect. still show up. I tried to get rid of it by going to the "Header.PHP" where the menubar is coded and removing

   "<div id="sub_menu">
   <?php if(function_exists('wp_page_menu')) : ?>
   <?php wp_page_menu ('show_home=1&depth=1&sort_column=menu_order&title_li='); ?>
   <?php else : ?>

   • ">Home

   <?php wp_list_pages('depth=1&sort_column=menu_order&title_li='); ?>

   "

   But this just made the page not able to be seen.

   The question is how can I get my own menubar graphic up without having the original menubar links up there, and once this is done, where I would put the coordinates of the menubar graphic so the user can click on certain parts of the graphic that will take them to a different part of the page. I was assuming I would put all the coordinate coding in the header.php where the original menu bar was coded, but I first need to get rid of the original links to "Home", "About Us", Register" ect.

   Thank you

   -Brian

2. wlowden
   Member
   Posted 8 months ago #

   Did you try using text-indent to take the orginal menu off the page view? This approach has SEO advantages over using images only for navigation.

   Example
   #sub-menu
   {
   text-indent:-999:
   }

   http://www.w3schools.com/Css/pr_text_text-indent.asp

3. stoneroses6300
   Member
   Posted 8 months ago #

   Yeah, I tried that. It made no impact on the menu bar. I've used this css with paragraphs though and it takes off all the text I don't want to see by putting in -999. It's not working with the submenu though.

4. Chrisber
   Member
   Posted 8 months ago #

   Can you provide a link to your site so we can see exactly what you are describing? I've done something similar to what you are talking about in my footer. You will either need to strip out the wp-list pages function from your header.php file, or use a big indent as suggested above to hide it.

   Take a look HERE and see if this is close to what you have in mind.

Reply

You must log in to post.