ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   steveblue
   Member

   Since Thematic supports Menus, I figured I'd convert the Gallery category-menu and category-nav CSS to support styling for the Menu elements. So here it is, hopefully with full IE fixes too. Plop it down at the end of the current styles.css and you should be able to use Menus too, styled just like the Categories were. Ciao, Steve!

   /* Wordpress 3.0 Menu Support */

   #header .menu ul{
   padding: auto
   }
   #header .menu li{
   float: left;
   height: 45px
   }
   #header .menu li a,
   li.blog-description span{
   display: block;
   font-size: .8em;
   font-weight: bold;
   height: 28px;
   padding: 8px;
   margin-right: 8px;
   color: white;
   text-decoration: none
   }
   #header .menu li.home a{
   display: block;
   text-indent: -9000px;
   overflow: hidden;
   text-align: left;
   width: 24px;
   background: url("images/ico-home-trans.png") no-repeat;
   background-position: center 15px;
   padding-bottom: 0;
   margin-left: 10px
   }
   #header .menu li.home a:hover{
   background: url("images/ico-home-trans.png") no-repeat center -16px
   }
   #header .menu li.current_page_item{
   }
   #header .menu li.current_page_item a{
   color: #ddd;
   }
   #header .menu > li:first-child{
   margin-left: 10px;
   }
   #header .menu li a:hover{
   color: #ddd
   }
   #header .menu li.blog-description{
   float: right
   }
   #header .menu li.blog-description span{
   color: #eee;
   font-weight: normal
   }

   body #access #header .menu .sf-menu li li {
   width: 100%;
   margin: 0;
   padding: 0;
   height: auto;
   width: auto

   }

   body #access #header .menu .sf-menu a:focus,
   body #access #header .menu .sf-menu a:hover,
   body #access #header .menu .sf-menu a:active {
   background: #232323;
   }
   body #access #header .menu .sf-menu .home a:focus,
   body #access #header .menu .sf-menu .home a:hover,
   body #access #header .menu .sf-menu .home a:active {
   background: url("images/ico-home-trans.png") no-repeat center -16px
   }
   body #access #header .menu .sf-menu ul a:focus,
   body #access #header .menu .sf-menu ul a:hover,
   body #access #header .menu .sf-menu ul a:active {
   background: #454545;
   }

   body #access #header .menu .sf-menu ul a {
   background:#111111;
   color: white;
   padding: 5px 0 5px 5px;
   margin: 0;
   line-height: 20px;
   height: 20px;
   display: block;
   width: auto
   }

   .ie6 #header .menu,
   .ie6 #header #menu-navi .sfmenu{
   width: 940px
   }
   .ie6 #header .menu{
   margin: 10px 0 0 10px
   }
   .ie6 #header #menu-navi .sfmenu li {
   float: left;
   display: inline;
   padding: 0;
   margin: 0;
   height: auto
   }
   .ie6 #header #menu-navi .sfmenu li.blog-description{
   float: right
   }
   .ie6 #header #menu-navi .sfmenu li.blog-description span{
   float: right
   }
   .ie6 #header #menu-navi .sfmenu a{
   float: left
   }

   Posted 12 years ago #
2. 

   steveblue
   Member

   OK, I just tested it again, and you I still have to come up with some styling for 2nd tier menus.

   Posted 12 years ago #
3. 

   steveblue
   Member

   I just had to change the following style:

   .sf-menu li li li {
   background:red ;
   }

   to

   .sf-menu li li li {
   background:transparent;
   }

   It could use some sleaker styling, but use this code instead to get Menus up and running:

   #header .menu ul{
   padding: auto
   }
   #header .menu li{
   float: left;
   height: 45px
   }
   #header .menu li a,
   li.blog-description span{
   display: block;
   font-size: .8em;
   font-weight: bold;
   height: 28px;
   padding: 8px;
   margin-right: 8px;
   color: white;
   text-decoration: none
   }
   #header .menu li.home a{
   display: block;
   text-indent: -9000px;
   overflow: hidden;
   text-align: left;
   width: 24px;
   background: url("images/ico-home-trans.png") no-repeat;
   background-position: center 15px;
   padding-bottom: 0;
   margin-left: 10px
   }
   #header .menu li.home a:hover{
   background: url("images/ico-home-trans.png") no-repeat center -16px
   }
   #header .menu li.current_page_item{
   }
   #header .menu li.current_page_item a{
   color: #ddd;
   }
   #header .menu > li:first-child{
   margin-left: 10px;
   }
   #header .menu li a:hover{
   color: #ddd
   }
   #header .menu li.blog-description{
   float: right
   }
   #header .menu li.blog-description span{
   color: #eee;
   font-weight: normal
   }

   body #access #header .menu .sf-menu li li {
   width: 100%;
   margin: 0;
   padding: 0;
   height: auto;
   width: auto

   }

   body #access #header .menu .sf-menu a:focus,
   body #access #header .menu .sf-menu a:hover,
   body #access #header .menu .sf-menu a:active {
   background: #232323;
   }
   body #access #header .menu .sf-menu .home a:focus,
   body #access #header .menu .sf-menu .home a:hover,
   body #access #header .menu .sf-menu .home a:active {
   background: url("images/ico-home-trans.png") no-repeat center -16px
   }
   body #access #header .menu .sf-menu ul a:focus,
   body #access #header .menu .sf-menu ul a:hover,
   body #access #header .menu .sf-menu ul a:active {
   background: #454545;
   }

   body #access #header .menu .sf-menu ul a {
   background:#111111;
   color: white;
   padding: 5px 0 5px 5px;
   margin: 0;
   line-height: 20px;
   height: 20px;
   display: block;
   width: auto
   }

   .ie6 #header .menu,
   .ie6 #header #menu-navi .sfmenu{
   width: 940px
   }
   .ie6 #header .menu{
   margin: 10px 0 0 10px
   }
   .ie6 #header #menu-navi .sfmenu li {
   float: left;
   display: inline;
   padding: 0;
   margin: 0;
   height: auto
   }
   .ie6 #header #menu-navi .sfmenu li.blog-description{
   float: right
   }
   .ie6 #header #menu-navi .sfmenu li.blog-description span{
   float: right
   }
   .ie6 #header #menu-navi .sfmenu a{
   float: left
   }

   .sf-menu li li li {
   background: transparent ;
   }

   Posted 12 years ago #
4. 

   steveblue
   Member

   I also had to change Gallery's functions.php to support Menus:

   Changed the following:

   // Add a drop down category menu //commente dout to support menus
   function childtheme_menus() { ?>
   <div id="page-menu" class="menu">
   <ul id="page-nav" class="sf-menu">
   <li class="rss">">RSS Feed
   <?php wp_list_pages('title_li='); ?>

   </div>
   <div id="category-menu" class="menu">
   <ul id="category-nav" class="sf-menu">
   <li class="home">">Home

   <?php wp_list_categories('title_li=&number=7'); ?>
   <li class="blog-description"><span><?php bloginfo('description'); ?></span>

   </div>

   <?php }
   add_action('wp_page_menu','childtheme_menus'); */

   I used this code instead (found here:http://wptheming.com/2010/03/using-3-0-menu-navigation-with-thematic/)
   // Add a Wordpress 3.0 Menu

   function remove_thematic_actions() {
   remove_action('thematic_header','thematic_access',9);
   }

   add_action('init','remove_thematic_actions');

   if ( function_exists( 'add_theme_support' ) ) {

   // This theme uses wp_nav_menu()
   add_theme_support( 'menus' );

   }

   function childtheme_menu() { ?>

   <div id="access">
   <div class="skip-link">">
   <?php _e('Skip to content', 'thematic'); ?></div>

   <div id="page-menu" class="menu">
   <ul id="page-nav" class="sf-menu">
   <li class="rss">">RSS Feed
   <?php wp_list_pages('title_li='); ?>

   </div>
   <div id="category-menu" class="menu">
   <ul id="category-nav" class="sf-menu">
   <li class="home">">Home
   <li class="blog-description"><span><?php bloginfo('description'); ?></span>

   </div>

   <?php wp_nav_menu( 'sort_column=menu_order&container_class=menu&menu_class=sf-menu' ); ?>
   </div>
   <!-- #access -->
   <?php }
   add_action('thematic_header','childtheme_menu',9);

   Posted 12 years ago #
5. 

   beanfair
   Member

   You have piqued my curiosity, do you have a demo link for this?

   Posted 12 years ago #
6. 

   steveblue
   Member

   Its working on my blog right now. http://installationspace.com/spaces/

   Posted 12 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.