Adding an Image to the Header in Structure
-
I would like to add an image to the header in structure. I like the way text is displayed and just want to add the image to the right of the current header text. I already removed the search bar using css to free up space. Does anyone know of the CSS code to add an image to the header?
The blog I need help with is: (visible only to logged in users)
-
-
Have you searched the forums? What I observe is that many do not know how the Structure theme is designed to operate. Please read this first so you are clear on that. > http://wpbtips.wordpress.com/2010/05/01/introduction-to-structure/
Also note the header image in Structure has to be 960 x 120 and you must include the image code for the image your create in your CSS. You need to upload the header image to the media library and then take the URL from that uploaded image and insert it into the correct place in the CSS (namely, #header).
You cannot use the custom header upload feature, since it will use the original dimensions. https://en.forums.wordpress.com/topic/need-help-for-structure?replies=4#post-487582
When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/ -
I have searched the forums and there doesn’t seem to be much there. The problem I’m having is that I’m not sure how to write the css code. I know that I need to upload the image to the library, etc. I would think I need to use positioning within the code and I’m not good enough at CSS to place the image where I want it to go.
-
Well, here’s the reality you face. There is no Staff support for the CSS editing upgrade. There are only two Volunteers who help out when they can. That’s why I never recommend the CSS editing upgrade be purchased by anyone who does not have a moderate HTML and CSS skills.
-
You turn your image into a 960×120 image (rest of it white), then just go to Appearance>Header and upload it.
-
This is where you would put your header image.
.headerleft { background: URL("URL of header image") no-repeat scroll 0 0 transparent; height: 200px; }The area in headerleft is 960px wide, and I just temporarily put in a 200px height. You would need to adjust the height for the height of your header image. You will probably also want to adjust the position of the title I expect. You would adjust that by changing the top padding in the following (the 64px value).
#header h1 a #sitename { padding: 64px 10px 0; } -
-
@panaghiotisadam and @thesacredpath, thank you for being so helpful! I really appreciate your advice!
-
And actually, my solution needs work. See if Panos’ solution will do it for you. If not, we can use my solution above with some adjustments to place your image to the right of the title text.
-
@b&a: You said you wanted the image to the right of your blog title. So what I meant was change this:
http://blumenfeldandassociates.files.wordpress.com/2011/02/balogo2.jpg
to something like this:
- The topic ‘Adding an Image to the Header in Structure’ is closed to new replies.
WordPress.com Forums 
