Header size suits theme

ridinginthesky · Member · Jan 13, 2014 at 9:09 am
Copy link

Add topic to favorites
Hi there!

I was wondering if someone could help with the code I would need to change the size of the header on my blog.

I use the suits theme, and I did inspect element in chrome and I think I found the header size to be 1180×211. I want to adjust the height to be bigger to fit a header I made. I’m very new to CSS though and have no idea what code I would need to put in to do this, and I would be super duper grateful if someone else knew.

Thanks :)

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 13, 2014 at 7:24 pm
Copy link
Hi there, nice header image and glad you got this sorted out.
designdayze · Member · Jan 16, 2014 at 5:33 am
Copy link
Hi there!

Im having the exact same issues as yourself and was wondering how you solved this?

I’ve just started using the Suits Theme so havn’t done much but would like to customize the header size & change the colour of the navigation menu.

Your blog looks fantastic I would reallly appreciate your feedback in what css coding you used to solve this!

Thank so much.
thesacredpath · Member · Jan 16, 2014 at 7:14 am
Copy link
Hi @designdayze, I’m not sure exactly how @ridinginthesky did it, but here is one way.

Go to Appearance > Header, upload your header and select the “use as is” option when it goes to the cropping step (don’t crop). Next, add the following CSS and change the height and min-height values to match your image height.
```
.site-header {
	height: 300px;
}

.site-header .home-link {
	min-height: 300px;
}
```
williamtimothywalker · Member · Jan 18, 2014 at 8:45 pm
Copy link
Hi everyone,

I have a similar question for my header image in the Suits Theme. I’m happy with the height of my image but I would like to have it span the width of the header or page so there is no space on either side.

This is my site: http://www.wepilgrims.wordpress.com

Any suggestions?

William
thistimethisspace · Member · Jan 18, 2014 at 8:49 pm
Copy link
@williamtimothywalker
Have you purchased a custom design upgrade for that blog? If your answer is no then read the information at the links I post below. See here for details on purchasing the annually renewable custom and CSS editing:
Custom design – Frequently Asked Questions
http://en.support.wordpress.com/custom-design/#frequently-asked-questions
http://en.support.wordpress.com/custom-design/
http://en.support.wordpress.com/custom-design/editing-css/
http://en.support.wordpress.com/custom-design/custom-fonts/
williamtimothywalker · Member · Jan 18, 2014 at 9:25 pm
Copy link
Thank you. That helps.

William
thistimethisspace · Member · Jan 18, 2014 at 9:27 pm
Copy link
You’re welcome.
designsimply · Member · Jan 20, 2014 at 6:18 pm
Copy link
@williamtimothywalker, one possible solution would be to repeat the image:
```
.site-header {
	background-repeat: repeat-x;
}
```
Another would be to create a wider image, upload it to your media library, copy the URL, and then pasted it into the url() area in this CSS example:
```
.site-header {
	background: #000 url("YOUR_IMAGE_URL") no-repeat scroll top;
}
```
alyjayeve · Member · Jan 21, 2014 at 6:55 am
Copy link
Hi all, Im using Suits Theme and would like my page titles to be centered rather than aligning to the left. Can anyone help? http://eveilleinconline.com/
justpi · Member · Jan 21, 2014 at 7:09 am
Copy link
```
.page .entry-title {
text-align: center;
}
```
alyjayeve · Member · Jan 21, 2014 at 7:54 am
Copy link
Thanks, but that didn’t work. Im needing to center the headings titled : About | In the media | Our clients

I am also stumped at how to get rid of the wordpress footer that says ‘blog at wordpress customised suit theme’

Any ideas?
justpi · Member · Jan 21, 2014 at 8:10 am
Copy link
a) Well, if you click About you’ll see that the code worked: the title of the page is now centered.
You said you want to center the page titles but you meant you want to center the menu. Add this:
```
ul.nav-menu, div.nav-menu > ul {
text-align: center;
}
.nav-menu li {
display: inline-block;
float: none;
}
```
b) Removing the footer credits is easy, but it’s against the TOS. See #11:
http://en.wordpress.com/tos/
alyjayeve · Member · Jan 21, 2014 at 8:26 am
Copy link
Oh wow, thank you so much for that! Im sorry if I was unclear in my first post.

I removed the footer from my other blog that I created years ago, but I just can’t recall how I did it and now the CSS editing seems different! http://alytheevil.com

I haven’t encountered any issues with that yet, so any info would be really appreciated!
justpi · Member · Jan 21, 2014 at 8:48 am
Copy link
You’re welcome!

Sorry, you need to restore the credits on the other blog. “Years ago” removing them was allowed but WP has changed policy: now removing the credits is grounds for suspension.
alyjayeve · Member · Jan 21, 2014 at 8:50 am
Copy link
Ok, really? Ok, will do. Thanks for the heads up. One last question (I promise).. how to I increase the text size of the header only EVEILLE INC. ?
justpi · Member · Jan 21, 2014 at 9:09 am
Copy link
You’re welcome.

Add this and change the value:
```
.site-title {
font-size: 8rem;
```
And you can ask as many questions as you like: that’s what this forum is for! Just make sure your questions are related to the title of a thread (to help other users looking for the same answers): for a different issue, start a new thread.
alyjayeve · Member · Jan 21, 2014 at 9:17 am
Copy link
Thank you so much :)
justpi · Member · Jan 21, 2014 at 9:27 am
Copy link
With such a huge font size, the title breaks into two lines on narrower screens and looks gross on mobile devices, so better limit the change to wide screens only. Use this instead of the above:
```
@media only screen and (min-width: 960px) {
.site-title {
font-size: 14rem;
}
}
```
alyjayeve · Member · Jan 21, 2014 at 9:29 am
Copy link
Champion, thanks :)

No items found.