SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Help wanted with basic editing for a main navigation bar.

    Hi,
    I would greatly appreciate if someone could help me with my website. I would like to move my main navigation bar lower right above the content of the website, make it show individual buttons for all my categories as it currently shows one button for all categories.
    Optionally i would like some help with a few floating buttons/icons above the right side of the bar for hot tags that i usually use in posts like LOL WIN FAIL etc.

    Any advice and help would be really really appreciated!

    PHP Code:
    <!doctype html>
    <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
    <head><?php global $data?>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
        <meta charset="<?php bloginfo('charset'); ?>">
        <?php if($data['uxde_responsive']): ?>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />        
        <?php endif; ?>

        <title><?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?></title>
        
        <!-- Included CSS Files -->
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
        <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/styles/<?php if($data['uxde_color_scheme']): ?><?php echo $data['uxde_color_scheme']; ?><?php endif; ?>/css.css">
        <link href='http://fonts.googleapis.com/css?family=Raleway:300,400,500,600' rel='stylesheet' type='text/css'>

        <!-- IE Fix for HTML5 Tags -->
        <!--[if lt IE 9]>
        <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
        <![endif]-->
        
        <!--[if (gte IE 6)&(lte IE 8)]>
          <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/selectivizr.js"></script>
        <![endif]-->

        <!-- Favicon and Feed -->
        <?php if($data['uxde_favicon']): ?><link rel="shortcut icon" href="<?php echo $data['uxde_favicon']; ?>" type="image/x-icon" /><?php endif; ?>
        <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Feed" href="<?php echo home_url(); ?>/feed/">
        
        <!--  iPhone Web App Home Screen Icon -->
        <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/apple-touch-icon.png" />

        <style type="text/css">

            .meta-category.color-1 a {
                                                                            background: rgba(255, 34, 0, 0.3);
                                        color: <?php if($data['uxde_article_text_2']): ?><?php echo $data['uxde_article_text_2']; ?><?php endif; ?> ! important;    
                                        
                                        }

            .meta-category.color-2 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_2']): ?><?php echo $data['uxde_article_text_2']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-3 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_3']): ?><?php echo $data['uxde_article_text_3']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-4 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_4']): ?><?php echo $data['uxde_article_text_4']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-5 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_5']): ?><?php echo $data['uxde_article_text_5']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-6 a { 
                                        background: rgba(255, 34, 0, 0.3);;
                                        color: <?php if($data['uxde_article_text_6']): ?><?php echo $data['uxde_article_text_6']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-7 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_7']): ?><?php echo $data['uxde_article_text_7']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-8 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_8']): ?><?php echo $data['uxde_article_text_8']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-9 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_9']): ?><?php echo $data['uxde_article_text_9']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-10 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_10']): ?><?php echo $data['uxde_article_text_10']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-11 a { 
                                        background: rgba(255, 34, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_11']): ?><?php echo $data['uxde_article_text_11']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-12 a { 
                                        background: rgba(255, 26, 0, 0.3);
                                        color: <?php if($data['uxde_article_text_12']): ?><?php echo $data['uxde_article_text_12']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-13 a { 
                                        background: rgba(255, 26, 0, 0.3);
                                        color: <?php if($data['uxde_article_text_13']): ?><?php echo $data['uxde_article_text_13']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-14 a { 
                                        background: rgba(255, 26, 0, 0.3);
                                        color: <?php if($data['uxde_article_text_14']): ?><?php echo $data['uxde_article_text_14']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-15 a { 
                                        background: rgba(255, 26, 0, 0.3);
                                        color: <?php if($data['uxde_article_text_15']): ?><?php echo $data['uxde_article_text_15']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-16 a { 
                                        background: rgba(255, 26, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_16']): ?><?php echo $data['uxde_article_text_16']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-17 a { 
                                        background: rgba(255, 26, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_17']): ?><?php echo $data['uxde_article_text_17']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-18 a { 
                                        background: rgba(255, 26, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_18']): ?><?php echo $data['uxde_article_text_18']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-19 a { 
                                        background: rgba(255, 26, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_19']): ?><?php echo $data['uxde_article_text_19']; ?><?php endif; ?> ! important;
                                        }

            .meta-category.color-20 a { 
                                        background: rgba(255, 26, 0, 0.3); 
                                        color: <?php if($data['uxde_article_text_20']): ?><?php echo $data['uxde_article_text_20']; ?><?php endif; ?> ! important;
                                        }

        </style>

        <style type="text/css">

            <?php if($data['uxde_custom_css']): ?><?php echo $data['uxde_custom_css']; ?><?php endif; ?>

        </style>

        <?php wp_head(); ?>
        
    </head>

    <body <?php body_class(); ?>>

    <nav id="top-navigation">

        <div class="wrapper">

            <ul class="top-menu-left">

                <li class="small-logo"><a href="<?php echo home_url(); ?>"><span class="home-icon"></span></a></li>

                <li class="categories">

                    <a><span class="categories-icon"></span><?php _e('Divertisment''uxde'); ?></a>

                    <div class="dropdown-menu categories">

                        <div class="categories-menu-section">

                            <?php /*
                                Our navigation menu. If one isn't filled out, wp_nav_menu falls
                                back to wp_page_menu. The menu assigned to the primary position is
                                the one used. If none is assigned, the menu with the lowest ID is
                                used. */
                                
                                
    wp_nav_menu( array(
                                
    'theme_location' => 'categories_navigation',
                                
    'container' =>false,
                                
    'menu_class' => 'categories-menu',
                                
    'echo' => true,
                                
    'before' => '',
                                
    'after' => '',
                                
    'link_before' => '',
                                
    'link_after' => '',
                                
    'depth' => 3,
                                
    'items_wrap' => '<ul class="categories-menu">%3$s</ul>')
                            ); 
    ?>

                        </div>

                    </div>

                </li>

                <li class="hot-tags">

                    <a><span class="tags-icon"></span><?php _e('Hot Tags''uxde'); ?></a>

                    <div class="dropdown-menu hot-tags">

                        <div class="hot-tags-menu-section">
        
                            <?php /*
                                Our navigation menu. If one isn't filled out, wp_nav_menu falls
                                back to wp_page_menu. The menu assigned to the primary position is
                                the one used. If none is assigned, the menu with the lowest ID is
                                used. */
                                
                                
    wp_nav_menu( array(
                                
    'theme_location' => 'tags_navigation',
                                
    'container' =>false,
                                
    'menu_class' => 'hot-tags-menu',
                                
    'echo' => true,
                                
    'before' => '',
                                
    'after' => '',
                                
    'link_before' => '',
                                
    'link_after' => '',
                                
    'depth' => 3,
                                
    'items_wrap' => '<ul class="hot-tags-menu">%3$s</ul>')
                            ); 
    ?>

                        </div>

                    </div>

                </li>

            </ul>

            <ul class="top-menu-right">

                <li class="search">

                    <a><span class="search-icon"></span><?php _e('Search''uxde'); ?></a>

                    <div class="dropdown-menu search">

                        <?php get_search_formtrue ); ?> 

                    </div>

                </li>
        
                <li class="twitter">

                    <a><span class="twitter-icon"></span><?php _e('Follow Us''uxde'); ?></a>

                    <div class="dropdown-menu social-icons">

                        <div class="social-icons-section">

                            <h4><?php _e('Follow Us''uxde'); ?></h4>

                            <ul>
                
                                <?php if($data['uxde_rss_feed']): ?><li><a href="<?php echo $data['uxde_rss_feed']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/rss_icon@2x.png"></a></li><?php endif; ?>

                                <?php if($data['uxde_email_url']): ?><li><a href="<?php echo $data['uxde_email_url']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/email_icon@2x.png"></a></li><?php endif; ?>
                    
                                <?php if($data['uxde_twitter_username']): ?><li><a href="http://twitter.com/<?php echo $data['uxde_twitter_username']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/twitter_icon@2x.png"></a></li><?php endif; ?>
                    
                                <?php if($data['uxde_facebook_fanpage']): ?><li><a href="<?php echo $data['uxde_facebook_fanpage']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/facebook_icon@2x.png"></a></li><?php endif; ?>

                                <?php if($data['uxde_google_plus_url']): ?><li><a href="<?php echo $data['uxde_google_plus_url']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/google_icon@2x.png"></a></li><?php endif; ?>

                                <?php if($data['uxde_pinterest']): ?><li><a href="<?php echo $data['uxde_pinterest']; ?>"><img width="40" height="40" alt="rss" src="<?php echo get_template_directory_uri(); ?>/images/icons/pinterest_icon@2x.png"></a></li><?php endif; ?>

                            </ul>

                        </div>

                        <div class="facebook-box-section">

                            <h4><?php _e('Facebook Fanpage''uxde'); ?></h4>

                            <iframe src="//www.facebook.com/plugins/likebox.php?href=<?php if($data['uxde_facebook_fanpage']): ?><?php echo $data['uxde_facebook_fanpage']; ?><?php endif; ?>&amp;width=350&amp;height=245&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23ffffff&amp;header=false&amp;appId=140836909399878" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:350px; height:245px;" allowTransparency="true"></iframe>

                        </div>

                    </div>

                </li>

                <li class="share">

                    <a><span class="share-icon"></span><?php  _e('Share''uxde'); ?></a>

                    <div class="dropdown-menu share-buttons">

                        <?php
                            
    function curPageURL() {
                            
    $pageURL 'http';
                            if (
    $_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
                            
    $pageURL .= "://";
                            if (
    $_SERVER["SERVER_PORT"] != "80") {
                            
    $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
                            } else {
                            
    $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
                            }
                            return 
    $pageURL;
                            }
                        
    ?>

                        <ul>

                            <li class="twitter-button"><a href="http://twitter.com/share" data-url="<?php echo curPageURL(); ?>" data-text="<?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?>" class="twitter-share-button" data-count="horizontal" data-via="<?php if($data['uxde_twitter_username']): ?><?php echo $data['uxde_twitter_username']; ?><?php endif; ?>">Tweet</a></li>
                            <li class="facebook-button"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo curPageURL(); ?>&layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 92px" allowTransparency="true"></iframe><div id="fb-root"></div></li>
                            <li class="google-button"><g:plusone size="medium"></g:plusone></li>
                            <li class="linkedin-button"><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share"></script></li>
                            <li class="pinterest-button"><a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo curPageURL(); ?>&media=<?php if (has_post_thumbnail$post->ID ) ): ?><?php $image wp_get_attachment_image_srcget_post_thumbnail_id$post->ID ), 'single-post-thumbnail' ); ?><?php echo $image[0]; ?><?php endif; ?>&description=<?php wp_title('|',true,'right'); ?><?php bloginfo('name'); ?>" class="pin-it-button" count-layout="horizontal" always-show-count="true"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>

                            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                            <script>(function(d, s, id) {
                              var js, fjs = d.getElementsByTagName(s)[0];
                              if (d.getElementById(id)) return;
                              js = d.createElement(s); js.id = id;
                              js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=143969905702939";
                              fjs.parentNode.insertBefore(js, fjs);
                            }(document, 'script', 'facebook-jssdk'));</script>
        
                            <script type="text/javascript">
                              (function() {
                            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
                            po.src = 'https://apis.google.com/js/plusone.js';
                                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
                              })();
                            </script>

                        </ul>

                    </div>

                </li>

                <li class="turn-off">

                    <a><span class="turn-off-icon"></span><?php _e('Off Drop''uxde'); ?></a>

                </li>

            </ul>

        </div>

    </nav>
            

    <div class="body-content">
        
    <header id="header">

        <div class="wrapper">
                        
        <div class="logo">

            <?php if($data['uxde_logo']): ?>
                
            <?php if(is_home() || is_front_page()) : ?>

                <h1 class="custom-logo">

                    <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php if($data['uxde_logo']): ?><?php echo $data['uxde_logo']; ?><?php endif; ?>" width="<?php if($data['uxde_logo_width']): ?><?php echo $data['uxde_logo_width']; ?><?php endif; ?>" height="<?php if($data['uxde_logo_height']): ?><?php echo $data['uxde_logo_height']; ?><?php endif; ?>" /></a>

                    <p><?php bloginfo('name'); ?></p>
                                
                </h1>

            <?php else: ?>

                <div class="custom-logo">

                    <a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><img src="<?php if($data['uxde_logo']): ?><?php echo $data['uxde_logo']; ?><?php endif; ?>" width="<?php if($data['uxde_logo_width']): ?><?php echo $data['uxde_logo_width']; ?><?php endif; ?>" height="<?php if($data['uxde_logo_height']): ?><?php echo $data['uxde_logo_height']; ?><?php endif; ?>" /></a>

                </div>

            <?php endif; ?>

            <?php else: ?>

                <h1><a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>

                <p class="subheader"><?php bloginfo('description'); ?></p>

            <?php endif; ?>
                            
        </div>

        <?php if($data['uxde_headerads']): ?>
        <div class="header-ads">

            <?php echo $data['uxde_headerads']; ?>

        </div>
        <?php endif; ?>

        </div>
                        
    </header>
            
    <div id="main">

        <div class="main-content">

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi NoBlink. Welcome to the forums.

    That code is not much use to us. Could you either post a live link, or make up a template that demostrates the issue? Here's a guide to such a template (see the rest of the thread for more options): http://www.sitepoint.com/forums/show...=1#post5406274

  3. #3
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm really sorry about that. I don't mean to post usless stuff.
    This is it!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Cool, it's good to have a link. Could you clarify what you want to do, though, as I can't quite work out what the question is.

  5. #5
    SitePoint Member
    Join Date
    Aug 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like to have the navigation bar under the logo; Have my categories spread on the navigation bar and if possible have a few tag buttons/icons floating in the right hand side over the navigation bar.

    It's really nice of you to try and help!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,590
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    OK, I see. This is more of a WordPress question than a CSS question, as you'll need to tweak your template(s) to move all those bits and pieces around. I've moved the thread to the CMS/WP forum. Good luck with this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •