Bonpress Header customization

• 

  koager · Member · Jun 24, 2013 at 6:09 am

  • Copy link
  • Add topic to favorites

  I’m trying to customize the theme Bonpress and I am trying to figure out how to get an image in the top left box where the header is. Unlike the Twenty Eleven theme where I can just upload an image and the theme automatically inputs it in, Bonpress does not have this function and I need some help in trying to figure out if there is another way to get an image in that space.

  I’ve found that the id is “masthead”, the class is “site-header” and it has a role of “banner”.
  So far I’ve used

  #masthead .site-title {
  	display: none;
  }
  #masthead .site-description {
  	display: none;
  }

  to remove the text that shows up in the space. To add in an image I have tried just doing

  #masthead {
  background-image:('url')
  }

  but that is putting the image behind the solid block of color instead of on top.

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Jun 26, 2013 at 3:58 pm

  • Copy link

  The following example uses an image replacement technique to hide the site title link and replace it with an background image instead:

  #masthead hgroup {
  	position: relative;
  	height: 143px;
  }
  .site-title a {
  	background: url(http://s.wordpress.org/about/images/logos/wordpress-logo-32-blue.png);
  	position: absolute;
  	top: 0;
  	left: 0;
  	display: block;
  	width: 256px;
  	height: 143px;
  	text-align: left;
  	text-indent: -9999px
  }
  .site-description {
  	display: none;
  }

  You should replace the url() value with a link to the header image you would like to use instead.

  You will need to adjust the height values to match the height of your image.

• 

  designsimply · Member · Jun 26, 2013 at 3:59 pm

  • Copy link

  I noticed that you have removed the footer credit links with the following custom CSS:

  #colophon {
  	display: none
  }
  #site-generator {
  	display: none
  }

  Removing those credits is against the WordPress.com terms of service. Can you please remove the CSS that hides them?

  If you would like to add CSS to customize the footer so it’s not so bold or to make it different colors, you can do that instead. Let me know if you need any help!