Header size suits theme
-
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)
-
-
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.
-
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; } -
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
-
@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, 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; } -
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/
-
-
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?
-
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/ -
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!
-
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.
-
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. ?
-
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.
-
-
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; } } -
- The topic ‘Header size suits theme’ is closed to new replies.