• 0

A little WordPress help!


Question

11 answers to this question

Recommended Posts

  • 0

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.
Link to comment
Share on other sites

  • 0

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">
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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;
}
Link to comment
Share on other sites

  • 0

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.

Link to comment
Share on other sites

  • 0

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
Link to comment
Share on other sites

This topic is now closed to further replies.