How do I place an ad banner to the right of my header logo?

  • Resolved cwmills

    (@cwmills)


    10 years, 7 months ago

    I would like to know how to place the following ad banner to the right of my logo in the header area.

    <a href="https://cex.io/r/0/cwmills/0/" title="Bitcoin Mining and Trading"><img src="https://cex.io/img/b/728x90.jpg" width="728" height="90" border="0" alt="CEX.IO"></a>

    I would like to know how to do the same with Google Adsense, but currently I am having issues with my account.

    I am using the twenty twelve theme with wordpress 3.9.2, here is my child header file.

    <?php
/**
 * The Header template for our theme
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
	<header id="masthead" class="site-header" role="banner">

<div class="header-ads">
<a href="https://cex.io/r/0/cwmills/0/" title="Bitcoin Mining and Trading" target="_blank"><img src="https://cex.io/img/b/728x90.jpg" width="728" height="90" border="0" alt="CEX.IO"></a>
</div><!--/ .header-ads -->

		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<?php if ( get_header_image() ) : ?>
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

	</header><!-- #masthead -->

	<div id="main" class="wrapper">

    And here is my child style sheet.

    /*
 Theme Name:   Twenty Twelve Child
 Theme URI:    https://example.com/twenty-twelve-child/
 Description:  Twenty Twelve Child Theme
 Author:       John Doe
 Author URI:   https://example.com
 Template:     twentytwelve
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-twelve-child
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */
/* Sidebar tightens up space between widgets */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 5px;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 5px;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.widget-area .widget p {
	margin-bottom: 5px;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 5px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 5px;
	margin-left: 2.571428571rem;
}
.widget-area .widget a {
	color: #757575;
}
.widget-area .widget a:hover {
	color: #21759b;
}
.widget-area .widget a:visited {
	color: #9f9f9f;
}
.widget-area #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

/*Remove Space Above Header Image*/
.site-header {
    margin-top: -25px;
    margin-bottom: -15px;   /*Remove space from posts/widgets and menu*/
    padding: 0;
}

/*Remove space below header*/
.site-header {
 padding-top: 0;
}

.main-navigation {
 margin-top: 5px;
}

.header-image {
 float: left;
}

/*remove border from images*/
.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: none !important;
    box-shadow: none !important;
}

/*remove space between posts*/
.site-content article {
border-bottom: 4.854101966px
margin-bottom: 72px;
margin-bottom: 0.809016994rem;
padding-bottom: 24px;
padding-bottom: 0.809016994rem;
}

/*hide tags and others from posts*/
footer.entry-meta {
   display: none;
}

    I have tried pasting the link in my header file in a div tag and then messing with code in the css sheet. I can get the banner to move around but not quite where I want it. I would like to have it to the right and “even” with my logo. Thanks in advance for any help provided.

    Here is my site
    https://cryptorushnews.com

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter cwmills

    (@cwmills)

    I added a span style tag in the header.php file around the div tag for the banner ad, like this…

    <span style="float:right">
<div class="header-ads">
<a href="https://cex.io/r/0/cwmills/0/" title="Bitcoin Mining and Trading" target="_blank"><img src="https://cex.io/img/b/728x90.jpg" width="728" height="90" border="0" alt="CEX.IO"></a>
</div><!--/ .header-ads -->
</span>

    It is now to the right of my logo as you can see at my site, https://www.cryptorushnews.com

    The banner seems cut off at the top, I think this has something to do with code on my CSS sheet that has to do with something else, I would like to lower the banner a little and push it more to the right.

    I tried using a margin-top and margin-right/left in the span tag but nothing happened with the banner.

    Thread Starter cwmills

    (@cwmills)

    I was able to figure it out but I am not sure if I used the correct method of doing so, here is the code I added to the header.php child file,

    <div class="header-ads">
<a href="https://cex.io/r/0/cwmills/0/" title="Bitcoin Mining and Trading" target="_blank"><img src="https://cex.io/img/b/728x90.jpg" width="628" height="90" border="0" alt="CEX.IO"></a>
</div><!--/ .header-ads -->

    And I added this to my CSS child sheet,

    .header-ads {
    position: relative;
    top: 40px;
    float: right;
}

    I basically accomplished what I set out to do, but it’s just not as aesthetically pleasing as I thought it would be. Does anyone have some advice to help make it easier on the eyes and also are there any pros out there that could let me know if I coded correctly or if there is a better way to do it?

    [Moderator note: You decrease the readability of your posts by making every sentence bold]

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I place an ad banner to the right of my header logo?’ is closed to new replies.