Hello, I am looking to change the header to my site completely to a customized header (please refer to attached image). Any way to do this? I see there is not a 'header' option in the settings area. Thanks!
Hello, Go to the header.php file present in your theme directory and customize its code according to your requirement.
Hi Piyush, Thanks! I figured it was that file, just not sure where to add the image file, what dimensions work best, and what code to use. Is this something you can know? Thanks again!!
Hello, Could you please specify us with the help of screenshot images that what customization do you want in the header.
Hi, I need to change the header to an image on this theme too so interested in the solution here. I have tried several different things in the css for the header, header container but nothing happens - confused. com
Hi Piyush, so basically I want to change the header (image of default header) to customized one - so the width would be the same but the height will be twice as big. From this: To this: Thanks!!
Hello, Go to the header.php file present in your theme directory and paste the code given below in this file as shown in the image given below. Code: <img class="header_img" src="Enter your image URL address here"> This will solve your issue.
Thanks Piyush! Still running into an issue. I added the image code and this is still happening (see image). The dimensions for the image was 1790px by 175px. Also added the code so you can see what I did. Thanks! Image link: http://ow.ly/i/4Ln2b Code: Code: <?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <title> <?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?> </title> <?php if (is_front_page()) { ?> <?php if (inkthemes_get_option('inkthemes_keyword') != '') { ?> <meta name="keywords" content="<?php echo inkthemes_get_option('inkthemes_keyword'); ?>" /> <?php } else { } ?> <?php if (inkthemes_get_option('inkthemes_description') != '') { ?> <meta name="description" content="<?php echo inkthemes_get_option('inkthemes_description'); ?>" /> <?php } else { } ?> <?php if (inkthemes_get_option('inkthemes_author') != '') { ?> <meta name="author" content="<?php echo inkthemes_get_option('inkthemes_author'); ?>" /> <?php } else { } ?> <?php } ?> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?> style="background:url('<?php if (inkthemes_get_option('inkthemes_bodybg') != '') { echo inkthemes_get_option('inkthemes_bodybg'); } else { } ?>');"> <div class="header_container"> <div class="container_24"> [COLOR=#ff0000]<div class="grid_24">[/COLOR] [COLOR=#ff0000]<div class="header">[/COLOR] [COLOR=#ff0000] [/COLOR][COLOR=#ff0000]http://simplybeconsulting.com/wp-content/uploads/2014/03/sbc-header.jpg[/COLOR] [COLOR=#ff0000]</div>[/COLOR] [COLOR=#ff0000]</div>[/COLOR] <div class="clear"></div> </div> </div> <div class="menu_container"> <div class="container_24"> <div class="grid_24"> <div class="menu_container"> <div class="menu_bar"> <div id="MainNav"> <a href="#" class="mobile_nav closed">Pages Navigation Menu<span></span></a> <?php inkthemes_nav(); ?> </div> </div> </div> </div> <div class="clear"></div> </div> </div>
Oops sent the wrong code. Here is the one I used: Code: <?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * */ ?> <!DOCTYPE html> <html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="<?php bloginfo('charset'); ?>" /> <title> <?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?> </title> <?php if (is_front_page()) { ?> <?php if (inkthemes_get_option('inkthemes_keyword') != '') { ?> <meta name="keywords" content="<?php echo inkthemes_get_option('inkthemes_keyword'); ?>" /> <?php } else { } ?> <?php if (inkthemes_get_option('inkthemes_description') != '') { ?> <meta name="description" content="<?php echo inkthemes_get_option('inkthemes_description'); ?>" /> <?php } else { } ?> <?php if (inkthemes_get_option('inkthemes_author') != '') { ?> <meta name="author" content="<?php echo inkthemes_get_option('inkthemes_author'); ?>" /> <?php } else { } ?> <?php } ?> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('stylesheet_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?> style="background:url('<?php if (inkthemes_get_option('inkthemes_bodybg') != '') { echo inkthemes_get_option('inkthemes_bodybg'); } else { } ?>');"> <div class="header_container"> <div class="container_24"> <div class="grid_24"> <div class="header"> <img class="header_img" src="http://simplybeconsulting.com/wp-content/uploads/2014/03/sbc-header.jpg"> </div> </div> <div class="clear"></div> </div> </div> <div class="menu_container"> <div class="container_24"> <div class="grid_24"> <div class="menu_container"> <div class="menu_bar"> <div id="MainNav"> <a href="#" class="mobile_nav closed">Pages Navigation Menu<span></span></a> <?php inkthemes_nav(); ?> </div> </div> </div> </div> <div class="clear"></div> </div> </div>
It's simplybeconsulting.com. I put the original code back. Should I use the edited code again? Let me know. Thanks!
Hello, Yes, please apply the code given above (#7) in the header.php file and then paste the code given below in Custom CSS section (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard. Code: body > div.header_container > div > div.grid_24 > div > img { width: 100%; } This will solve your issue.
Thanks again Piyush. I really appreciate you taking the time to work on this with me!! Looks like that did it!
Ugh!! Sorry to bother again. I just realize that the header size I had was 1790 x 175px. But the container of the template won't allow for a header wider than ~100px. Where can I adjust this? Thanks!!
Hello, You can use the header image of maximum width 1100 px. Theme is implemented on the grid system, if we try to change its size then theme will loose its layout. So not possible to exceed its width greater than 1100 pixel.
