[Resolved] Moving image in header

[Liam Crane]

Hi all

Just wanted to say first of all what a great theme this is Tom you have done a great job!

I am a complete beginner here so go easy on me 🙂 i am in the process of building my first website and have a couple of niggly issues which i am sure are fairly straight forward to most people.

I have posted an image below of a temp mock up of what i am trying to do.

[url=http://imgur.com/ycQgv4e][img]http://i.imgur.com/ycQgv4e.png[/img][/url]

In the header i would like the image on the right hand side rather than the left, would the code have to be edited in order for this to happen as i could not see an option for this. Second thing was the Image in the ‘About’ box i just wondered if the actual box could be transparent a little bit so the actual image background of the page would show rather than a fixed colour box.

Hope that makes kind of sense and sorry if not

Many thanks

[Tom]

Hi Liam,

1. Have you tried setting the Header alignment to “Right” in “Appearance > Customize > Layout”?

2. You can do this using the Backgrounds add-on.

First, create a semi transparent (with your desired opacity) 4×4 pixel square in Photoshop, then save it as a PNG (with transparency).

Then, go to the Colors area of the Customizer and remove the content background color.

Next, upload the 4×4 image as the content background image, and make sure it’s set to repeat.

Let me know if that works or not 🙂

[Liam Crane]

Hi Tom

Many thanks for the reply,

With regards to the images i have added the main logo under the ‘Header Content’ and then centered this under Layout – Header Alignment – Centre which is fine. I then add the other image as a back ground image (i have purchased the premium pack which by the way is just fab!) under the header option and have set this to no repeat and contain. I cant see an option to be able to move this though? Am i missing something here?

As for the transparency query i will give that a go tonight so thanks for that much appreciated.

One last thing as well, with the default home page whats the best way to remove the sidebars next to the main page without setting the home page to being static?

Thanks again for all your help and sorry for my beginner type questions

[Liam Crane]

Just an update on the above, i am having a few issues trying to create a transparent background. I dont have access to photoshop so have tried to use paint.net. Not sure if i am doing it right but cant seem to get the background to be transparent. I have tried setting the content background with the 4×4 image i created but it didnt seem to work 🙁 Not sure if its because the content background colour is white.

Was just hoping that by having a semi transparent content background it would allow for the body background to be visible still behind it

[Tom]

Hi Liam,

You’re trying to move the background image? You may need to write some CSS for that using the background-position attribute: http://www.w3schools.com/cssref/pr_background-position.asp

Something like:

.site-header {
      background-position: 10px 10px;
}

Would move the background header down and to the right 10px.

You’ll definitely have to remove the background color from the content area. Go to “Appearance > Customize > Colors > Content Colors” and delete the value from the Background color (top option).

That should do it 🙂

[Liam Crane]

Hi Tom

Thanks for the response again, i think its me not being very clear to you so my apologies there. If you look at the picture from the first post you can see the ‘About’ content has a solid white background (dont worry about the image in there though). What i was hoping for was for all the content boxes to have a semi transparent background so that the main body background (blue background with the clouds in the first image) would be visible instead of the white background of the content box.

Does that make sense? Really sorry for my beginner terminology here

Cheers

[Liam Crane]

Hi Tom

Just so you know i have managed to remove the white background colour of the content box so all is well there now 🙂

Still having a slight issue though with the header background image always going off to the left. I notice there is a ‘position x/y’ tab under the header section in background images not to sure what i need to enter in there in order to move it to where i want or if i can even do this from this menu?

One last thing, i really like the social media icons that display on the default genertae press image on the website in the top right corner. Are they just widgets or are they setup as a second menu or something?

Cheers Tom

[Tom]

The position x/y input can accept these parameters: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

This is the plugin used to display the social icons: https://wordpress.org/plugins/lightweight-social-icons/

Let me know if you have any more questions 🙂

[Liam Crane]

Thanks Tom, got to the bottom of the X and Y postion with your help so thanks a lot for that.

Just tried setting a page header image as a test for my homepage. Settings are below. Having a few issues though

[url=http://imgur.com/8iKtP9B][img]http://i.imgur.com/8iKtP9B.png[/img][/url]

[url=http://imgur.com/5HDlbvP][img]http://i.imgur.com/5HDlbvP.png[/img][/url]

But the image keeps coming out like this

[url=http://imgur.com/1MbfFBQ][img]http://i.imgur.com/1MbfFBQ.png[/img][/url]

I just cant work out why the image is coming out the way it is. Am i doing something wrong here?

Thanks again

[Tom]

The background image for the page header is set to cover.

You can remove that setting with this CSS:

.generate-page-header.generate-content-header {
      background-size: auto;
}

[Liam Crane]

Excellent thanks Tom, where do i actually add this line if you dont mind me asking? I have never done coding before so not to sure where it lies.

Thanks again

[Tom]

This article should help: http://generatepress.com/knowledgebase/adding-css/

[Michael Mancini]

Is it poosible to make a transparent header through the customizer or will I use CSS?

MM

[Tom]

Hi there,

Using the Colors add-on you can remove the header background color (making it transparent).

If you want a semi transparent header (opacity), you’ll have to create a 4×4 pixel image in Photoshop (or something similar), and give it your desired opacity. Save it as a PNG, and upload it as the header background image (using the Backgrounds add-on).

Be sure to remove the header background color either way.

Hope this helps 🙂

[Author]

Posts