Replace text with logo [outreach]

[Bases Loaded]

Hello,

I have searched and found similar threads, but due to my general ignorance, I am not sure I have found a solution for my situation.  Any help, advice, or a link to where this has been explained in terms a non-coding person could understand would be greatly appreciated.

I am setting up a website for a local non-profit, and I want to use the outreach theme pretty much out of the box as is.  However, I want to replace the site title text with a logo.  To be clear, I want everything else to stay the same, I just want a graphic logo where the "outreach" text is featured in the site title text area ( http://demo.studiopress.com/outreach/ )

Well, I'm stumped.  If I un-check the box under Show Header Text from Appearance > Header > Header Text, the whole header will shift left, leaving a big square white space on the right side of the header.  So "out of the box" the only way a simpleton like me can keep the header at 100% width is to keep the header text (check the box) but remove the text.  However, this doesn't get my logo in that responsive area.  I don't want a custom header persay, I'd like to keep the grid pattern of the default header.

A simple solution in my mind would be to format my logo to the correct parameters to simply replace the text logo area that "buffers" the left side of the default header, so that it would also then properly format when viewed in the mobile version (a la, responsive, which is centered perfectly when viewing the demo site on a mobile).

I know this question has been asked in similar ways a few times, but I beg your patience for a neophyte.  Your help would be greatly appreciated!

-JP

[Mike Alpert]

I have the same issue.  I look forward to hearing how to correct it.

I tried using the background image and placing the logo on it as a complete graphic but still ended up with the white space to the right.  I also tried putting in some custom code into the header to set the background color to black and that did not work either.

Mike

---

Mike Alpert

[Bases Loaded]

Spoke with support, and if I understand the code correctly, this will fix the header from sliding to the left leaving that white block on the right (see below).  But I am still trying to figure out how to get my logo uploaded to appear over the header image and still be responsive.  I was unable to edit the .css in WP, and used notepad++ to do it, then uploaded new .css via filezilla.  Good luck.

In your style.css file, find the following css:
#header {
  background: url(images/header.png) repeat-y center center #090909;
  margin: 0 auto;
  min-height: 120px;
  overflow: hidden;
  width: 100%;
}

Change this to:
#header {
  background: url(images/header.png) repeat-y center center #090909;
  background-position: center top !important;
  background-color: #090909 !important;
  margin: 0 auto;
  min-height: 120px;
  overflow: hidden;
  width: 100%;
}

[Author]

Posts