wordpress A little WordPress help!

February 24, 2015

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

Thanks!

February 24, 2015

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.

February 24, 2015

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

February 24, 2015

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

February 24, 2015

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.

February 24, 2015

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.

February 24, 2015

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

February 24, 2015

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.

February 24, 2015

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.

February 24, 2015

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

February 24, 2015

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?

February 24, 2015

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.

Sign In

wordpress A little WordPress help!

Question

Link to post

Share on other sites

11 answers to this question

Recommended Posts

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Similar Content