Mazhar 55 Posted 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! Share this post Link to post Share on other sites
0 MikeChipshop 3,458 Posted 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. Share this post Link to post Share on other sites
0 MarkSHernandez 0 Posted February 24, 2015 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 Posted 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"> Share this post Link to post Share on other sites
0 MikeChipshop 3,458 Posted 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. Share this post Link to post Share on other sites
0 Mazhar 55 Posted 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. Share this post Link to post Share on other sites
0 Mazhar 55 Posted 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; } Share this post Link to post Share on other sites
0 MikeChipshop 3,458 Posted 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. Share this post Link to post Share on other sites
0 Mazhar 55 Posted 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. Share this post Link to post Share on other sites
0 MikeChipshop 3,458 Posted February 24, 2015 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 Posted 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? Share this post Link to post Share on other sites
0 Mazhar 55 Posted 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. 1 Share this post Link to post Share on other sites
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