How do I change header size (make smaller) in spun theme?

ashleighbiggins · Member · Apr 6, 2014 at 1:36 pm
Copy link

Add topic to favorites
Hi,
I’ve just upgraded to custom design in the spun theme and i was wondering if there is a way to make my header image smaller? It is automatically setting it at 150×150.
Also is there a way to have the header present on my static home page but not the other pages?

Thanks,

Ashleigh

The blog I need help with is: (visible only to logged in users)
somedaymeansnvr · Member · Apr 6, 2014 at 1:52 pm
Copy link
Ashleigh,

When I view your site in Firefox, your image is 450X454. What size would you like it to be?
ashleighbiggins · Member · Apr 6, 2014 at 1:55 pm
Copy link
Hello,

I think i’d like the image to be roughly half the size it is now, so around 225×227

Thanks
somedaymeansnvr · Member · Apr 6, 2014 at 2:26 pm
Copy link
Did you upload your logo through your theme where it asks you to select a header image? The best method would be to upload a new header image with the correct dimensions.
ashleighbiggins · Member · Apr 6, 2014 at 2:36 pm
Copy link
Yes i did, I made the image on indesign and then opened it up in photoshop to crop it down, i will try reducing the scale in photoshop first. Thanks. Do you by any chance no if its possible to have the header on your first page (my static one) and then disable it for the other pages? Thanks.
somedaymeansnvr · Member · Apr 6, 2014 at 2:44 pm
Copy link
Unfortunately, to remove the header from your other pages, you must edit the HTML and PHP of your theme’s files. The Custom Design upgrade only allows you to tinker with your theme’s CSS.

If this is a must-have feature for you, WordPress.com does provide a list of suitable hosts to choose from.
designsimply · Member · Apr 6, 2014 at 4:12 pm
Copy link
Do you by any chance no if its possible to have the header on your first page (my static one) and then disable it for the other pages?

You can do this with CSS actually! Here is an example:
```
.header-wrapper {
	display: none;
}

.home .header-wrapper {
	display: block;
}
```
The first rule hides the header-wrapper area with the image in it on all pages and the 2nd rule turns it back on for the home page only. The “.home” part of the 2nd rule is what limits it to the home page only. You can do that because “home” is one of the classes used in the “body” tag in the HTML.

Also, to limit the size of the image using CSS, you could do something like this:
```
.site-header img {
	width: 225px;
}
```
But I think smdaymeansnever’s advice to make a smaller image to start with might be preferable. Try that first!
somedaymeansnvr · Member · Apr 6, 2014 at 4:22 pm
Copy link
Oh, high five, designsimply! I knew about the body tag design, but my head was in the wrong place.
designsimply · Member · Apr 6, 2014 at 4:35 pm
Copy link
High five!!

Welcome to the CSS forums smdaymeansnever :) it’s nice to see you here!
ashleighbiggins · Member · Apr 6, 2014 at 8:26 pm
Copy link
Thank you so much! Thats perfect! I also made the image smaller on photoshop and that has worked fine too, sorry if my questions were obvious, I’m a newbie! Thanks again :)

No items found.