Centering header image in Origin theme

truthseekerblogger2015 · Member · Feb 3, 2016 at 8:52 pm
Copy link

Add topic to favorites
Hi,

I wanted to widen the theme on my site, I have the custom CSS option activated.

I was able to successfully widen the page using this code:

.wrap {
max-width: 1100px;
}
#sidebar-primary {
width: 23.6596%;
}
#content {
width: 72.0851%;
}

I have since reverted back to the stock width because I could not get the header image to center. I have tried about 7 different things.

What’s the magic line of code I need to add to center the header image for this theme if I widen it again?

Also, how would I widen the allowable width for the header image? I think the stock width for this theme is 940 pixels. I can’t change it, I tried several things with CSS and could not alter that. If I was hosting this on my own host I would have more options as far as modification but I’m not interested in hosting a wordpress package right now.

Thanks

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Feb 4, 2016 at 6:39 am
Copy link
Many thanks for including the code you were using. With that code in place, add the following to make the header image go full width.
```
img#header-image {
    width: 100%;
}
```
truthseekerblogger2015 · Member · Feb 4, 2016 at 2:53 pm
Copy link
You go it. I spent hours yesterday trying to work that out. I noticed this stretches the current image. I can always resize the current image and upload it but is there a way to just center the current image and not stretch it?

I was hoping you were going to be the person to respond to me because I have read a lot of your answers to questions on here and you are very helpful.

Thank you.
truthseekerblogger2015 · Member · Feb 4, 2016 at 3:15 pm
Copy link
Actually, I can’t upload a wider image, the template won’t take anything larger than 940px. I know I have to modify the .php file for that, which I can’t do with wordpress.com hosting.

I found a work around for centering but I just wanted to see what you have for centering the image.

Thanks again.
thesacredpath · Member · Feb 4, 2016 at 7:58 pm
Copy link
For the header image, remove the width declaration in img#header-image and the image will center and go back to its original width.

I do notice the image itself looks a bit distorted, especially the tree in the center, but that could just be the photo itself, or perhaps the lens that was on the camera that took it (fish-eye or extremely wide angle).
thesacredpath · Member · Feb 4, 2016 at 7:59 pm
Copy link
You may want to add
padding-top: 20px;
to the .wrap rule you have to give a bit more white space above the image.
truthseekerblogger2015 · Member · Feb 4, 2016 at 10:14 pm
Copy link
Hi, if I use width=”100%” the image just stretches, it doesn’t center. If I get rid of the width declaration it pins to the left. So I put width=”940px” which is the image width.

This is my code:

img#header-image {
width: 940px;
margin: 8px auto;
padding-left: 30px;
}

I’m using padding-left to basically put the image were I want horizontally, which is in the center. Nothing else seemed to work. Margin brings it 8px off the top.

What should I use to center the image besides padding-left?

Thanks

The image itself is intentionally stretched, I did that in my photo editor.
truthseekerblogger2015 · Member · Feb 4, 2016 at 11:05 pm
Copy link
Hey, I hope you don’t mind I had another question. What would I used to make the header background transparent so I can see the body background image behind my logo?

Thank you.
thesacredpath · Member · Feb 5, 2016 at 12:33 am
Copy link
Oh, the designer made this difficult. Change this rule to look like this
```
.wrap img#header-image {
    max-width: 940px;
    width: 100%;
}
```
and then add these two rules
```
.wrap {
    text-align: center;
}
.wrap #main {
    text-align: initial;
}
```
thesacredpath · Member · Feb 5, 2016 at 12:39 am
Copy link
Hmmm, I just remembered that Internet Explorer doesn’t support “initial” at all, not even on the latest version of its browser, so let’s change that last rule to this instead.
```
.wrap #main {
    text-align: left;
}
```
truthseekerblogger2015 · Member · Feb 5, 2016 at 1:28 am
Copy link
Hi,

Actually I put it back to the default width for now.

These lines of code in particular completely screws everything up on my Firefox and Chrome on my android. It look like a mess. Why I have no idea.

#sidebar-primary {
width: 23.6596%;
}

#content {
width: 72.0851%;
color: #474747;

I think to do this right I would have to host this theme on my own host and really dig into everything. I’m not doing that, this blog is just something I do in my spare time. I used to do a lot of web design a long time ago and I’m very rusty obviously.

I want to really thank you for your time, I appreciate it.
truthseekerblogger2015 · Member · Feb 5, 2016 at 1:48 am
Copy link
O.K., I gave it one more shot I removed this:

#sidebar-primary {
width: 23.6596%;
}

#content {
width: 72.0851%;
color: #474747;

And I just kept:

.wrap {
max-width: 1000px;
text-align: center;
}

And that fixed the issue on Firefox and Chrome on the Android.

How come text-align: center; that you told me to add to .wrap is not centering all of the text on the page? I don’t want the text centered, I’m just wondering why it’s not.

Thanks again.
truthseekerblogger2015 · Member · Feb 5, 2016 at 1:49 am
Copy link
I meant one more shot, not sh*t, that was a typo. I was a bit frustrated, lol.
truthseekerblogger2015 · Member · Feb 5, 2016 at 1:50 am
Copy link
Oh, wait.

.wrap #main {
text-align: left;
}

That’s why it’s not centering all of the content.
thesacredpath · Member · Feb 5, 2016 at 2:35 am
Copy link
You are welcome, and yup, due to the way they did the HTML, I had to “undo” the centering for the #main section.

No items found.