Logo placement in header

  • aljahmina

    (@aljahmina)


    10 years ago

    Hi,

    I am trying to move the logo from the left side to the middle. Is there a way to put an image in the background of the header?

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

  • can you edit the file if you can… go to header.php and copy and paste the code of the header.php file here

    Thread Starter aljahmina

    (@aljahmina)

    <?php
/**
* The Header for our theme.
*/
?><!DOCTYPE html>
<?php global $skt_shortname, $skt_themename; ?>
<!--[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 http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!--[if IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<![endif]-->
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="profile" href="https://gmpg.org/xfn/11" />
<?php wp_head(); ?>
<?php
$skt_custom_css = sketch_get_option($skt_shortname.'_custom_css');
?>
<?php if($skt_custom_css){ ?>
<!-- Foodeez Custom CSS Section Starts Here -->
<style type="text/css">
	<?php echo $skt_custom_css; ?>
</style>
<!-- Foodeez Custom CSS Section Ends Here -->
<?php } ?>
</head>

<body <?php body_class(); ?> >

	<div id="wrapper" class="skepage">

		<div class="header-top-wrap">

			<!-- IF IS CONTACT PAGE TEMPLATE -->
			<?php if ( is_page_template('template-contact-page.php') ) {
				global $post;
				$_contact_map_shortcode = get_post_meta($post->ID, "_contact_map_shortcode", true);
				if($_contact_map_shortcode){
			?>
				<div id="contact_map_wrap">
					<?php echo do_shortcode($_contact_map_shortcode); ?>
				</div>
			<?php } } ?>
			<!-- IF IS CONTACT PAGE TEMPLATE END -->

			<div class="header-topbar clearfix" >
				<div class="container">
						<div class="row-fluid">
							<!-- #logo -->
							<div id="logo" class="span3">
								<?php if(sketch_get_option($skt_shortname."_logo_img")){ ?>
									<a href="<?php echo home_url(); ?>" title="<?php bloginfo('name'); ?>" ><img class="logo" src="<?php echo sketch_get_option($skt_shortname."_logo_img"); ?>" alt="<?php echo sketch_get_option($skt_shortname."_logo_alt"); ?>" /></a>
								<?php } else{ ?>
								<!-- #description -->
								<div id="site-title" class="logo_desp">
									<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo('name') ?>" ><?php bloginfo('name'); ?></a>
									<div id="site-description"><?php bloginfo( 'description' ); ?></div>
								</div>
								<!-- #description -->
								<?php } ?>
							</div>
							<!-- #logo -->

							<div class="span4">
								<!-- Top Contact Info -->
								<div class="topbar_info">
									<?php if(sketch_get_option($skt_shortname.'_topbar_contact')){?><i class="fa fa-phone"></i><span class="head-phone-txt"><?php _e('Call Us&nbsp;:','foodeez'); ?></span>&nbsp;<span class="head-phone"><a href="tel:<?php echo sketch_get_option($skt_shortname.'_topbar_contact','foodeez'); ?>"><?php echo sketch_get_option($skt_shortname.'_topbar_contact','foodeez'); ?></a></span><?php } else {?><i class="fa fa-phone"></i><span class="head-phone-txt"><?php _e('Call Us&nbsp;:','foodeez'); ?></span>&nbsp;<span class="head-phone"><a href="tel:1+555-240-7980"><?php echo '1+555-240-7980'; ?></a></span><?php } ?>
								</div>
								<!-- Top Contact Info -->
							</div>
							<div class="span5">
								<!-- Social Links Section -->
								<div class="social_icon">
									<ul class="clearfix">
										<?php if(sketch_get_option($skt_shortname.'_fbook_link')){?><li class="fb-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_fbook_link','timeliner')); ?>"><span class="fa fa-facebook" title="Facebook"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_twitter_link')){?><li class="tw-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_twitter_link','timeliner')); ?>"><span class="fa fa-twitter" title="Twitter"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_gplus_link')){ ?><li class="gplus-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_gplus_link','timeliner')); ?>"><span class="fa fa-google-plus" title="Google Plus"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_pinterest_link')){ ?><li class="pinterest-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_pinterest_link','timeliner')); ?>"><span class="fa fa-pinterest" title="Pinterest"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_linkedin_link')){ ?><li class="linkedin-icon"><a target="_blank" href="<?php echo sketch_get_option($skt_shortname.'_linkedin_link','timeliner'); ?>"><span class="fa fa-linkedin" title="Linkedin"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_foursquare_link')){ ?><li class="foursquare-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_foursquare_link','timeliner')); ?>"><span class="fa fa-foursquare" title="Foursquare"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_flickr_link')){ ?><li class="flickr-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_flickr_link','timeliner')); ?>"><span class="fa fa-flickr" title="Flickr"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_youtube_link')){ ?><li class="youtube-icon"><a target="_blank" href="<?php echo esc_url(sketch_get_option($skt_shortname.'_youtube_link','timeliner')); ?>"><span class="fa fa-youtube-play" title="Youtube"></span></a></li><?php } ?>
										<?php if(sketch_get_option($skt_shortname.'_headserach') === 'on'){ ?><li><a href="javascript:void(0);" class="strip-icon search-strip" title="search"><i class="fa fa-search"></i></a></li><?php } ?>
									</ul>
								</div>
								<!-- Social Links Section -->
							</div>
						</div>
				</div>
			</div><!-- header-topbar -->
			<!-- search-strip -->
			<div class="hsearch" >
				<div class="container">
					<div class="row-fluid">
						<form method="get" id="header-searchform" action="<?php echo home_url('/'); ?>">
							<fieldset>
								<input type="text" value="" placeholder="Search Here ..." id="s" name="s">
								<input type="submit" value="Search" id="header-searchsubmit">
							</fieldset>
						</form>
						<div class="hsearch-close"><i class="fa fa-times"></i></div>
					</div>
				</div>
			</div>

			<div id="header" class="skehead-headernav clearfix">
				<div id="skehead">
					<div class="container">
						<div class="row-fluid">
								<!-- navigation-->
								<?php if(sketch_get_option($skt_shortname.'_rbtn_text')){ ?>
							<div class="top-nav-menu span9">
								<?php } else { ?>
								<div class="top-nav-menu span12">
								<?php } ?>
								<?php
									if( function_exists( 'has_nav_menu' ) && has_nav_menu( 'Header' ) ) {
										wp_nav_menu(array( 'container_class' => 'ske-menu', 'container_id' => 'skenav', 'menu_id' => 'menu-main','menu' => 'Primary Menu','theme_location' => 'Header' ));
									} else {
									?>
									<div class="ske-menu" id="skenav">
										<ul id="menu-main" class="menu">
											<?php wp_list_pages('title_li=&depth=0'); ?>
										</ul>
									</div>
									<?php } ?>
								</div>
								<!-- #navigation -->
								<?php if(sketch_get_option($skt_shortname.'_rbtn_text')){ ?>
								<div class="span3">
									<a href="<?php if(sketch_get_option($skt_shortname.'_rbtn_link')){ echo sketch_get_option($skt_shortname.'_rbtn_link','foodeez'); } else { echo '#'; } ?>" class="res-button"><?php if(sketch_get_option($skt_shortname.'_rbtn_text')){ echo sketch_get_option($skt_shortname.'_rbtn_text','foodeez'); } ?></a>
								</div>
								<?php } ?>
							</div>
						</div>
					</div>
					<!-- #skehead -->
				</div>
				<!-- #header -->
				<div class="header-clone"></div>
			</div>
			<!-- #header -->
		</div>

	<!-- header image section -->
	<?php $classes = get_body_class(); ?>
	<?php
	if( is_page_template('template-front-page.php')  ) {
		$frontslider_set_meta = get_post_meta( $post->ID,'_home_slider_type',true );
		if($frontslider_set_meta === 'flexslider'){ include("includes/front-flex-slider-section.php"); }
		else if($frontslider_set_meta === 'revslider'){ include("includes/front-rev-slider-section.php"); }
		else if($frontslider_set_meta === 'video'){ include("includes/front-video-section.php"); }
		else if($frontslider_set_meta === 'bgimage'){ include("includes/front-bgimage-section.php"); }
	}
	?>

<div id="main" class="clearfix">

    Hello aljahmina,
    Hope you’r good:)

    1. To move the logo from the left side to the middle.
    a.     Make Foodeez Lite Child. It’s pretty simple read here Child_Themes
    b. After making and activating your child theme first check it’s working fine.
    c. then finally make header.php in child theme directory and copy paste the below code

    <?php
/**
* The Header for our theme.
*/
?><!DOCTYPE html>
<?php global $foodeez_lite_shortname, $foodeez_lite_themename; ?>
<!--[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 http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php wp_title( '|', true, 'right' ); ?></title>
	<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!--[if IE 9]>
	<meta http-equiv="X-UA-Compatible" content="IE=9" />
<![endif]-->
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<link rel="profile" href="https://gmpg.org/xfn/11" />
	<?php wp_head(); ?>
</head>
<body <?php body_class(); ?> >
	<div id="wrapper" class="skepage">

<div class="slider-top clearfix">
		<div class="header-topbar clearfix" >
			<div class="container">
					<?php if (is_home()) { ?>
						<a class="title blog-header-text"><?php _e("Enter Your Text here Enter Your Text here...",'foodeez-lite'); ?></a>
					<?php }	?>
					<div class="row-fluid">
						<div class="span4">
							<!-- Top Contact Info -->
							<div class="topbar_info">
								<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_topbar_contact')){?><i class="fa fa-phone"></i><span class="head-phone-txt"><?php _e('Call Us?:','foodeez-lite'); ?></span>?<span class="head-phone"><a href="tel:<?php echo foodeez_lite_get_option($foodeez_lite_shortname.'_topbar_contact','foodeez-lite'); ?>"><?php echo foodeez_lite_get_option($foodeez_lite_shortname.'_topbar_contact','foodeez-lite'); ?></a></span><?php } ?>
							</div>
							<!-- Top Contact Info -->
						</div>
						<!-- #logo -->
						<div id="logo" class="span3">
							<?php if(foodeez_lite_get_option($foodeez_lite_shortname."_logo_img")){ ?>
								<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo('name'); ?>" ><img class="logo" src="<?php echo foodeez_lite_get_option($foodeez_lite_shortname."_logo_img"); ?>" alt="<?php echo foodeez_lite_get_option($foodeez_lite_shortname."_logo_alt"); ?>" /></a>
							<?php } else{ ?>
							<!-- #description -->
							<div id="site-title" class="logo_desp">
								<a href="<?php echo esc_url(home_url('/')); ?>" title="<?php bloginfo('name') ?>" ><?php bloginfo('name'); ?></a>
								<div id="site-description"><?php bloginfo( 'description' ); ?></div>
							</div>
							<!-- #description -->
							<?php } ?>
						</div>
						<!-- #logo -->
						<div class="span5">
							<!-- Social Links Section -->
							<div class="social_icon">
								<ul class="clearfix">
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_fbook_link')){?><li class="fb-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_fbook_link','timeliner')); ?>"><span class="fa fa-facebook" title="Facebook"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_twitter_link')){?><li class="tw-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_twitter_link','timeliner')); ?>"><span class="fa fa-twitter" title="Twitter"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_gplus_link')){ ?><li class="gplus-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_gplus_link','timeliner')); ?>"><span class="fa fa-google-plus" title="Google Plus"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_pinterest_link')){ ?><li class="pinterest-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_pinterest_link','timeliner')); ?>"><span class="fa fa-pinterest" title="Pinterest"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_linkedin_link')){ ?><li class="linkedin-icon"><a target="_blank" href="<?php echo foodeez_lite_get_option($foodeez_lite_shortname.'_linkedin_link','timeliner'); ?>"><span class="fa fa-linkedin" title="Linkedin"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_foursquare_link')){ ?><li class="foursquare-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_foursquare_link','timeliner')); ?>"><span class="fa fa-foursquare" title="Foursquare"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_flickr_link')){ ?><li class="flickr-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_flickr_link','timeliner')); ?>"><span class="fa fa-flickr" title="Flickr"></span></a></li><?php } ?>
									<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_youtube_link')){ ?><li class="youtube-icon"><a target="_blank" href="<?php echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_youtube_link','timeliner')); ?>"><span class="fa fa-youtube-play" title="Youtube"></span></a></li><?php } ?>
									<li><a href="javascript:void(0);" class="strip-icon search-strip" title="search"><i class="fa fa-search"></i></a></li>
								</ul>
							</div>
							<!-- Social Links Section -->
						</div>
					</div>
			</div>
		</div><!-- header-topbar -->
		<!-- search-strip -->
		<div class="hsearch" >
			<div class="container">
					<div class="row-fluid">
						<div class="skt-s-form">
							<form method="get" id="header-searchform" action="<?php echo esc_url(home_url('/')); ?>">
								<fieldset>
									<input type="text" value="" placeholder="Search Here ..." id="s" name="s">
									<input type="submit" value="Search" id="header-searchsubmit">
								</fieldset>
							</form>
							<div class="hsearch-close"><i class="fa fa-times"></i></div>
						</div>
					</div>
			</div>
		</div>
		<div id="header" class="skehead-headernav clearfix">
				<div id="skehead">
					<div class="container">
						<div class="row-fluid">
							<!-- navigation-->
							<div class="top-nav-menu span10">
							<?php
								if( function_exists( 'has_nav_menu' ) && has_nav_menu( 'Header' ) ) {
									wp_nav_menu(array( 'container_class' => 'ske-menu', 'container_id' => 'skenav', 'menu_id' => 'menu-main','menu' => 'Primary Menu','theme_location' => 'Header' ));
								} else {
								?>
								<div class="ske-menu" id="skenav">
									<ul id="menu-main" class="menu">
										<?php wp_list_pages('title_li=&depth=0'); ?>
									</ul>
								</div>
								<?php } ?>
							</div>
							<!-- #navigation -->
							<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_rbtn_link')){ ?>
								<div class="span2">
									<a href="<?php if(foodeez_lite_get_option($foodeez_lite_shortname.'_rbtn_link')){ echo esc_url(foodeez_lite_get_option($foodeez_lite_shortname.'_rbtn_link','foodeez-lite')); } ?>" class="res-button"><?php _e('Reserve Now','foodeez-lite'); ?></a>
								</div>
							<?php } ?>
						</div>
					</div>
				</div>
				<!-- #skehead -->
		</div>
<!-- #header -->
		<div class="header-clone"></div>
</div>
<!-- header image section -->
  <?php $classes = get_body_class(); ?>
  <?php if(in_array('front-page',$classes)) {  include("includes/front-header-image-section.php");} ?>

<div id="main" class="clearfix">

    d. Then add following css in child-theme style.css

    #logo, topbar_info{
    text-align: center;
}

    2. To put an image in the background of the header.
    a.     if adding image from url replace the url link in following code and write that code in child themes style.css

    .header-topbar .row-fluid{
    background-image: url('https://s.w.org/style/images/wp-header-logo.png?1');
}

    Otherwise, create folder images in your child theme directory and save image( suppose xyz_name.jpg ) in this folder, then add following code

    .header-topbar .row-fluid{
    background: #fff url('images/xyz_name.jpg');
}

    for more fun refer CSS background Property

    Best,
    Gunjan Rai Kanungo

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Logo placement in header’ is closed to new replies.