ThemeShaper Forums » Thematic

[closed]

Gallery Child Support for Wordpress 3.0 Menus

(6 posts)
  • Started 3 years ago by steveblue
  • Latest reply from steveblue
  • This topic is not a support question
  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 3 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 3 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 3 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 3 years ago #
  5. beanfair
    Member

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

    Posted 3 years ago #
  6. steveblue
    Member

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

    Posted 3 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.