• 0

A little WordPress help!


Go to solution Solved by MikeChipshop,

Question

Mazhar

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

 

Thanks!

Link to post
Share on other sites

11 answers to this question

Recommended Posts

  • 0
MikeChipshop

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 post
Share on other sites
  • 0
MarkSHernandez

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

Link to post
Share on other sites
  • 0
Mazhar

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 post
Share on other sites
  • 0
MikeChipshop

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 post
Share on other sites
  • 0
Mazhar

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 post
Share on other sites
  • 0
Mazhar

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 post
Share on other sites
  • 0
MikeChipshop

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 post
Share on other sites
  • 0
Mazhar

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.

Link to post
Share on other sites
  • 0
MikeChipshop

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

Link to post
Share on other sites
  • 0
Mazhar

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? 

Link to post
Share on other sites
  • 0
Mazhar

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 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
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      The Mega 2020 WordPress Plugin Bundle is now 99% off
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 99% off the Mega 2020 WordPress Plugin Bundle. Kick off your career as an expert web developer & designer with 69+ hours of content on Java, HTML, CSS3, APIs, and more.



      What's the deal?
      Launching your blog or business through WordPress can give you good outcomes, just with the right management. That's why PopNetMedia gives you The Mega 2020 WordPress Plugin Bundle. From marketing to social media engagement and site optimization, it contains 80+ plugins that you need to take your WordPress site to the next level and beyond.

      The Mega 2020 WordPress Plugin Bundle includes:

      Volume 1: 20 Premium Marketing Plugins (New for 2020) Volume 2: All the Social Media & Engagement plugins for any type of WP site Volume 3: All the Marketing Plugins you would need Volume 4: Additional tools Volume 5: Everything else that is necessary for fast-loading sites Check complete list of plugins per volume here.

      Good to know
      Length of time users can access this course: lifetime Requires WordPress V3.x and up Device per license: unlimited Updates included Redemption deadline: redeem your code within 30 days of purchase For a full description, specs, and terms, click here.

      What's the benefit?
      This Mega 2020 WordPress Plugin Bundle normally costs* $4,000, but you can pick it up for just $29.99 for a limited time - that represents a saving of $3,970.01 (99%) off.

      >> Get this deal, or learn more about it <<
      See all discounted Online Courses. This is a time-limited offer.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 68% off for a 2 year plan Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By Refresher
      Apple blocks WordPress iOS app updates until in-app purchases added [Update]
      by Matthew Watson

      WordPress has claimed that Apple has blocked further updates to its iOS app until in-app purchases (IAP) are added, effectively forcing them to add a revenue source for Apple (who take a 30% cut of all in-app sales) into their app.

      WordPress is a free, open-source piece of software that can be used to run websites; and is a commercial company that is partially behind the development of the WordPress software, but also offers domain registrations and managed hosting. WordPress.com also develops its own iOS app (which can be used to manage a website running WordPress from an iOS device), but crucially this app can be used whether you are paying for a WordPress.com account, or using the (free, open-source) software and hosting it yourself. This meant that the iOS app has never offered IAP - these would only have ever been useful to users of WordPress.com accounts, and not those that self-host the software.

      However, in a series of tweets, WordPress.com developer Matt Mullenweg revealed that Apple has prevented further updates to the iOS app being released to the App Store until IAP are offered for WordPress.com hosting plans. Apple would take 30% of any plans purchased via this method.

      Currently, you cannot purchase anything via the WordPress iOS app (either via an in-app purchase or through another storefront) - it only allows for free websites to be created. Apple is, however, insisting that some plans be available to purchase. An Apple spokesperson has said that in-app purchases are required whenever “allow users to access content, subscriptions, or features they have acquired in your app on other platforms or your web site”. Yet, it does not seem that the WordPress iOS app currently offers any of these features.

      Matt Mullenweg has said that they will relent to Apple’s demands, and will add options to allow for domains and hosting plans to purchased within the app; Apple has agreed to allow the app to receive updates until this feature has been released.

      This is yet another saga in the battle against Apple and app developers, which has recently gained further traction with Apple removing the popular battle royale game Fortnite from their App Store, resulting in the game’s developer Epic Games filing a lawsuit against Apple and starting a huge legal battle. It also comes as many others, including newspapers and prominent companies such as Facebook, are beginning to question Apple over their treatment of developers on their platform.

      Source: The Verge via Engadget



      Update: The issue seems to have been corrected by Apple:





    • By News Staff
      Get the WordPress ft Elementor & WooCommerce Master Class Bundle for just $29.99
      by Steven Parker



      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can save 97% off this WordPress ft Elementor & WooCommerce Master Class Bundle. With 14 hours of content led by best selling instructor Alexander Oni, you'll be able to master the art of using word press and plugins for building a variety of websites.

      What's the deal?
      This buindle consists of the following courses:

      Elementor Master Class 2020
      Learn How to Build a Full Website Blog with Elementor — No Coding Skills Required The Complete WooCommerce Master Class 2020
      Build Your & Manage Your Very Own WooCommerce Store Build a Complete Business Website with WordPress
      Services, Team, Clients Section & More! Add Every Major Feature of a Business Website Build a Membership Website with WordPress
      Create Your Very Own Membership Site & Charge Your Subscribers for Premium Content Build a Job Board Website with WordPress
      Work with the WP Job Manager Plugin to Create & Publish Jobs Build a Full One Page Event Website with WordPress
      Master the Art of Using the SiteOrigin, a Popular Page Builder Plugin with 2.5M+ Downloads Build a Photo Gallery with WordPress
      Create Fictional Gallery Using the Most Popular WordPress Gallery Plugin — NextGen Gallery Good to know
      Length of time users can access this course: lifetime Certification of completion included Redemption deadline: redeem your code within 30 days of purchase For terms, certification and instructor info, click here.

      What's the benefit?
      This WordPress ft Elementor & WooCommerce Master Class Bundle normally costs $1,393 but it can be yours for only $29.99, that's a saving of $1,363.01 (98%) off!

      >> Get this deal, or learn more about it <<
      See all Online Courses on offer. This is a time limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Nintendo Gaming Bundle Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By cbz6109
      I have a below blog on WordPress
      Core Voila
       
      When I post an article and open the site on any browser it doesn't show new changes until explicit refresh. On refresh it show latest changes. any idea or clue will be appreciated.
       
      Thanks in advance 👍
    • By News Staff
      Lifetime subscription to this MasterBundle is 80% off for just $69
      by Steven Parker



      Today's highlighted deal comes via our Apps + Software section of the Neowin Deals store, where you can save 80% off a lifetime subscription to the MasterBundle. Get all you need for your website in one bundle with 100+ web templates, 1,000+ graphic designs and logos, 50+ WordPress themes and plugins, pro web tools and more!

      What's the deal?
      A unique opportunity to get all that you need for your website in one single bundle. MasterBundle gives you over 1,300 essentials for setting your page to success. Get 20+ plugins, 100+ themes, 100+ templates, 200+ logos, and 800+ images great for creating a stunning, visit-worthy page. Not only that, this bundle also gives you unlimited hosting, 5x 10GB emails, and professional web tools to make sure that your website will reach your target audiences. With MasterBundle, you don't have to go over the net and search for the hacks and tools to skyrocket your brand. Gain more by using less.

      Ready-made websites w/ 1-click installation & demo content Hosting features: website speed-focused plugin, WordPress staging, WordPress Tools dashboard, & more 1,000+ graphic designs & logos Professional web tools: SEO Tester, EmailScraper.co, Targeter Includes

      Good to know
      For specifications, and license info please click here.

      What's the benefit?
      Lifetime subscription to this MasterBundle normally costs* $345.99, but you can pick up this deal for just $69 for a limited time, that's a saving of $276.99 (80%) off!

      >> Get this deal now, or learn more about it <<
      See all discounted Apps + Software on offer. This is a time-limited deal.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      If this offer doesn't interest you, why not check out the following offers:

      The Samsung Galaxy Z Flip 256GB Giveaway 20% off Ivacy VPN subscription with coupon code IVACY20 NordVPN subscription at up to 70% off Private Internet Access VPN subscription at up to 71% off Unlocator VPN or SmartDNS unblock Geoblock with 7-day free trial Disable Sponsored posts · Other recent deals · Preferred partner software

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.