zackcello

Forum Replies Created

Viewing 5 replies - 76 through 80 (of 80 total)
  • Thread Starter zackcello

    (@zackcello)

    Okay, so I figured it out. Here’s what I did:

    I commented out the header.php code that called the social_profiles.php file. Then I added code after it, that called to the respective CSS classes.

    Here’s what the new header.php file looks like, with my added :

    </head>

<body <?php body_class(); ?>>
<?php $theme->hook('html_before'); ?>

<div id="wrapper">

<div id="container">

    <div class="clearfix">

        <?php if($theme->display('menu_primary')) { $theme->hook('menu_primary'); } ?>

<a class="twitter" href="https://twitter.com/simplythreetrio"></a><a class="facebook" href="https://facebook.com/simplythree"></a><a class="rss" href="https://simplythreetrio.com/?feed=rss"></a><a class="youtube" href="https://youtube.com/simplythreetresona"></a>

      <!--<div id="top-social-profiles">

            <?php $theme->hook('social_profiles'); ?>
        </div>-->
    </div>
    <div id="header">
        <div class="logo">

    And here is the new CSS code, which defines the classes and calls the sprites. I called them facebook, twitter, rss, and youtube:

    /* =HEADER
-------------------------------------------------------------- */

#header {
    height: 0px;
    padding:0px 0;
}

.logo {
    float: left;
    margin: -65px 0px 0px -10px;
padding: 0px 25px;
}

.logo h1.site_title {
    margin: 0;
    padding:0;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:48px;
    line-height: 40px;
    font-weight: bold;
}

.logo h1.site_title a, .logo h1.site_title a:hover {
    color: #47a0eb;
    text-decoration: none;
}

.logo h2.site_description {
    margin: 0;
    padding:0;
    color: #47a0eb;
    font-family: Arial, Helvetica, Sans-serif;
    font-size:14px;
    line-height: 14px;
}

.header-right {
    float: right;
}

#top-social-profiles {
visibility: hidden;
    padding-top: 10px;
    padding-right: 15px;
    height: 32px;
    text-align: right;

}
#top-social-profiles img {
    margin: 0 0 0 6px !important;
} 

#top-social-profiles img:hover {
    opacity: 0.8;

}
#top-social-profiles .widget-container {
  background: none;
  padding: 0;
  border: 0;
}

a.facebook {
	display: inline-block;
	margin: 10px 3px 0 3px;
	width: 32px;
	height: 32px;
	text-decoration: none;
	background: url(customimages/facebook_sprite.png);
	}

a.facebook:hover {
	background-position: -32px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
a.twitter {
	display: inline-block;
margin: 10px 3px 0 106px;
	width: 32px;
	height: 32px;
	text-decoration: none;
	background: url(customimages/twitter_sprite.png);
	}

a.twitter:hover {
	background-position: -32px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
a.rss {
	display: inline-block;
margin: 10px 3px 0 3px;
	width: 32px;
	height: 32px;
	text-decoration: none;
	background: url(customimages/rss_sprite.png);
	}

a.rss:hover {
	background-position: -32px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}
a.youtube {
	display: inline-block;
margin: 10px 3px 0 3px;
	width: 32px;
	height: 32px;
	text-decoration: none;
	background: url(customimages/youtube_sprite.png);
	}

a.youtube:hover {
	background-position: -32px 0;
	}

.displace {
	position: absolute;
	left: -5000px;
	}

    I added margin parameters to align the icons the way I wanted. Anyway, thanks anyway guys! I hope this might help people in the future!

    Zack

    Awesome!! It works now! Now if I could just get the username before the title, and also if I could change the link to wp.me or bit.ly, it would be perfect. But this works for now! I really appreciate your help and lightning fast response!

    PS I have 1.8.2 that just came out. And I would like to insert my username BEFORE both the title and the link. My site is: https://simplythreetrio.com

    Then you should make an update where we can customize it for ourselves. WE can determine exactly which one it is. We should be able to add hash tags and such if we want, too. That would be great if you added this.

    I just tried this, and it didn’t work. The pop-up tweet still is missing my handle. Any chance the code should be different now that Jetpack has updated recently? Thank you so much for your help!

Viewing 5 replies - 76 through 80 (of 80 total)