Wordpress: How to Right Align My Icons

Discussion in 'HTML & Website Design' started by leeannax, Jan 6, 2013.

  1. #1
    Can't seem to figure out how to move my Facebook, Twitter, and RSS icons (AddThis) to align right in my header...

    www.pricecharmer.com

    I put it in the body, but it stays left aligned no matter what I do.

    <body <?php body_class(); ?>>
    
    <?php do_action( 'before' ); ?>
    	<header id="branding" role="banner">
          <div id="inner-header" class="clearfix">
    		<hgroup id="site-heading">
    			<h1 id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>
        <?php get_search_form(); ?> 
    
            
    <!-- AddThis Follow BEGIN -->
    <div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook_follow" addthis:userid="pricecharmer"></a>
    <a class="addthis_button_twitter_follow" addthis:userid="pricecharmer"></a>
    <a class="addthis_button_rss_follow" addthis:userid="pricecharmer.com/feed"></a>
    </div>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50e8f96b10a3d1fa"></script>
    <!-- AddThis Follow END -->
    
          </div>
    	</header><!-- #branding -->
    Code (markup):

    Thanks for any help!
     
    Solved! View solution.
    leeannax, Jan 6, 2013 IP
  2. gareth_esutera

    gareth_esutera Member

    Messages:
    47
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #2
    Try this.

    put something like this in CSS:

    .socialicons {float:right;}

    Then modify your codes

    <div class="socialicons addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="socialicons addthis_button_facebook_follow" addthis:userid="pricecharmer"></a>
    <a class="socialicons addthis_button_twitter_follow" addthis:userid="pricecharmer"></a>
    <a class="socialicons addthis_button_rss_follow" addthis:userid="pricecharmer.com/feed"></a>
    </div>
     
    gareth_esutera, Jan 6, 2013 IP
  3. #3
    Or add this to your stylesheet:

    
    .addthis_toolbox.addthis_32x32_style.addthis_default_style {
       float: right;
    }
    
    Code (markup):
     
    Hefaistos, Jan 6, 2013 IP
  4. leeannax

    leeannax Greenhorn

    Messages:
    33
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #4
    Thanks so much! That worked perfectly. ;)
     
    leeannax, Jan 6, 2013 IP
  5. leeannax

    leeannax Greenhorn

    Messages:
    33
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #5
    You wouldn't know of a quick fix to delete the extra line above my ad on the home page? I can't find where the extra space would be in the code:

    <CODE>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />
    <title><?php wp_title('|', true, 'left'); ?></title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

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

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

    <?php do_action( 'before' ); ?>
    <header id="branding" role="banner">
    <div id="inner-header" class="clearfix">
    <hgroup id="site-heading">
    <h1 id="site-title"><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
    </hgroup>
    <?php get_search_form(); ?>

    <!-- AddThis Follow BEGIN -->
    <div class="addthis_toolbox addthis_32x32_style addthis_default_style">
    <a class="addthis_button_facebook_follow" addthis:userid="pricecharmer"></a>
    <a class="addthis_button_twitter_follow" addthis:userid="pricecharmer"></a>
    <a class="addthis_button_rss_follow" addthis:userid="pricecharmer.com/feed"></a>
    </div>
    <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-50e8f96b10a3d1fa"></script>
    <!-- AddThis Follow END -->

    </div>
    </header><!-- #branding -->

    <center>
    <script type="text/javascript"><!--
    google_ad_client = "ca-pub-351196261";
    /* pricecharmer */
    google_ad_slot = "79008";
    google_ad_width = 728;
    google_ad_height = 90;
    //-->
    </script>
    <script type="text/javascript"
    src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
    </script>
    </center>

    <div id="container">

    <nav id="access" role="navigation">
    <h1 class="assistive-text section-heading"><?php _e( 'Main menu', 'pinblue' ); ?></h1>
    <div class="skip-link screen-reader-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'pinblue' ); ?>"><?php _e( 'Skip to content', 'pinblue' ); ?></a></div>

    <?php pinblue_main_nav(); // Adjust using Menus in Wordpress Admin ?>
    </nav><!-- #access -->
    </CODE>
     
    leeannax, Jan 6, 2013 IP
  6. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
    #6
    Search in /wp-content/themes/pinblue/style.css - line 194 :

    
    header[role="banner"] {
          background: url("library/images/header.jpg") repeat-x scroll 0 0 #01192F;
          margin-bottom: 25px;
    }
    
    Code (markup):
    Modify margin-bottom , or delete it , but probably will look better with about 6px instead 25 .
     
    Hefaistos, Jan 7, 2013 IP
  7. leeannax

    leeannax Greenhorn

    Messages:
    33
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #7
    You're a genius!! Thanks so much.
     
    leeannax, Jan 9, 2013 IP