• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

A little WordPress help!

Question

Mazhar    55

This is my site. I just want the Title and Tagline inside the green banner. I am using Twenty Twelve Child theme.

 

Thanks!

Share this post


Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
MikeChipshop    3,458

Yes now I can see, can title and tagline come in center of the banner?

Vertically? Yes, just add some padding to the .site-title .

.site-title {
    padding-top:20px;
}
The above should do it, but you may need to play around with the amount of pixels if it's not spot on.

Share this post


Link to post
Share on other sites
  • 0
MarkSHernandez    0

You can make a div with that green banner as background and put the h1 and h2 tags inside that div.

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

You can make a div with that green banner as background and put the h1 and h2 tags inside that div.

 

Can you help me making it, here is header.php code:

<!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="http://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="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		
<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; ?>

			
<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>

		<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">

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

You should have something similar to ...
 

<?php blog_info('name'); ?>
<?php blog_info('description'); ?>

In the header template (header.php) of your theme. Move those calls in to the green div you have set up.

Edit: OK seems you have the green image set up as an actual linked image. You'd be better off making that in to a background image of the div, then placing your call for the site name and description in the div.

try getting it in there first... change your header.php code for the code below.
 

<!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="http://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="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		
<hgroup>

<div class="header-info" style="background-image:url(<?php header_image(); ?>) no-repeat top center;">
<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>
</div>

			


		<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">

Once you've done that, we'll have to make some changes to the theme styles, but as i'm flying blind at the moment, it'll be easy to work through once you have the above in place to look at.

DISCLAIMER: Back up your original files before trying any ideas or code i may give you. I am not responsible for your code or your site or any issues that may crop up due to my advice.

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

You should have something similar to ...

 

<?php blog_info('name'); ?>
<?php blog_info('description'); ?>

In the header template (header.php) of your theme. Move those calls in to the green div you have set up.

Edit: OK seems you have the green image set up as an actual linked image. You'd be better off making that in to a background image of the div, then placing your call for the site name and description in the div.

try getting it in there first... change your header.php code for the code below.

 

<!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="http://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="holy-islam">IN THE NAME OF ALLAH MOST GRACIOUS MOST MERCIFUL</div>
<div id="page" class="hfeed site">

	<header id="masthead" class="site-header" role="banner">
		
<hgroup>

<div class="header-info" style="background-image:url(<?php header_image(); ?>);">
<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>
</div>

			


		<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">

Once you've done that, we'll have to make some changes to the theme styles, but as i'm flying blind at the moment, it'll be easy to work through once you have the above in place to look at.

DISCLAIMER: Back up your original files before trying any ideas or code i may give you. I am not responsible for your code or your site or any issues that may crop up due to my advice.

 

Please check the site now, there is some alignment problem after adding the code. And no problem I have made backup of header.php and stylesheet.

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

Here is stylesheet.css code for your convenience:

/*
 Theme Name:   Twenty Twelve Child
 Description:  Twenty Twelve Child Theme
 Template:     twentytwelve
*/

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

/* =Theme customization starts here --------- */

body.custom-background {
    background-color: #9cac87 !important;
}

#holy-islam {
    margin: 15px auto 0;
    font-size: 10px;
    font-weight: bold;
    text-align: center
}
#page {
    margin-top: 20px;
    margin-bottom: 20px;
    border:0px solid;
    border-radius:10px;
}
.site-header h1, .site-header h2, .main-navigation div.nav-menu > ul {
    text-align: center;
}
.main-navigation li {
    margin: 0 1.5rem 0 1.5rem;
}
.entry-header .entry-title a {
    color: #000000;
}

.site-title a {
    font-size: 35px;
}

.site-header h2 {
      font-size: 20px;
}

.site-content article {
    margin-bottom: 2rem;
}
#colophon {
    margin-top: 0;
}

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

Please check the site now, there is some alignment problem after adding the code. And no problem I have made backup of header.php and stylesheet.

 

That's no problem, i expected that to be honest.

 

I changed the header code slightly.

 

So change this...

 <div class="header-info" style="background-image:url(<?php header_image(); ?>);">
 

to this...

 

 <div class="header-info" style="background:url(<?php header_image(); ?>) no-repeat top center;">
 

and stick this...

 

.header-info {
height: 150px;
}
 

...in your style sheet.

 

should be all good.

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

should be all good.

 

Its good mate except that the banner is not fully appearing rather bottom side is missing! Here is the full banner image that should come.

Share this post


Link to post
Share on other sites
  • 0
MikeChipshop    3,458

Hit a hard refresh a few times (CTRL + SHFT + R), i'm seeing the whole thing.

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

Hit a hard refresh a few times (CTRL + SHFT + R), i'm seeing the whole thing.

 

Yes now I can see, can title and tagline come in center of the banner? 

Share this post


Link to post
Share on other sites
  • 0
Mazhar    55

Vertically? Yes, just add some padding to the .site-title .

 

.site-title {
    padding-top:20px;
}
The above should do it, but you may need to play around with the amount of pixels if it's not spot on.

 

 

Thanks mate! I am trying to fit it. :)

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.