Customizing Page Header and Blog Page

ifdc1974 · Member · Jul 3, 2014 at 8:43 pm
Copy link

Add topic to favorites
Hello,

I had some direction on this page. I have a category on my site called IFDC Perspectives that I have turned into it’s own page.

http://ifdcorg.wordpress.com/category/ifdc-perspectives/

However because it is a category, I cannot change the header image.

Support told me to set up a test page and they got me this far

http://ifdcorg.wordpress.com/test-page/?preview=true&preview_id=257&preview_nonce=c5f6db3e10′

The problem is that I want it to look like the blog page.

http://ifdcorg.wordpress.com/category/ifdc-perspectives/

What can I do?

The blog I need help with is: (visible only to logged in users)
megluby · Member · Jul 3, 2014 at 8:45 pm
Copy link
I had almost this exact same question just under a different title! Anyone who can help- would love to hear it!
designsimply · Member · Jul 3, 2014 at 9:07 pm
Copy link
However because it is a category, I cannot change the header image.

You actually can change the header image manually on a category page using Custom CSS. Not every support person knows CSS, but they try to help when they can! The person you talked to before may not have known you could do it. Do you want to give some custom CSS for category pages a try?

Here is an example that will work with the Arcade theme:
```
.category .title-card > img.header-img {
	display: none;
}

.category .title-card {
	background: url(http://i2.wp.com/s.w.org/about/images/logos/wordpress-logo-notext-rgb.png?w=150);
	display: table;
	height: 300px;
}
```
The first block of CSS hides the header set via Appearance > Header, and the second block of CSS adds a new one in manually. The “.category” at the beginning of each selector limits the change to only category pages.

I used a WordPress logo for the image in this example. To use your own image, replace the url() value with a link to the image you would like to use and adjust the height value if needed.

@megluby, if you use the Arcade theme, then you can use the same CSS as above. If you’re using a different WordPress.com theme, please start a new help request at https://en.forums.wordpress.com/forum/css-customization/#postform and make sure to include a link to your blog or mention the theme you are going to be using.
ifdc1974 · Member · Jul 3, 2014 at 10:14 pm
Copy link
Wonderful thank you! I will test this out. I appreciate you help. Will let you know how it goes on Monday when I get back to work.
ifdc1974 · Member · Jul 7, 2014 at 6:51 pm
Copy link
Where do I add the CSS? I added it in Customize > CSS but that didn’t work.
ifdc1974 · Member · Jul 7, 2014 at 6:56 pm
Copy link
This is what I added

.category .title-card {
background: url(https://ifdcorg.files.wordpress.com/2014/07/perspectives.png);
display: table;
height: 300px;
}
thesacredpath · Member · Jul 7, 2014 at 9:14 pm
Copy link
Hi there, you forgot to add the first rule @designsimply has above. Add the following above the other category title-card rule you have.
```
.category .title-card > img.header-img {
	display: none;
}
```
ifdc1974 · Member · Jul 7, 2014 at 9:19 pm
Copy link
Thank you. It just won’t let me adjust height now.
thesacredpath · Member · Jul 7, 2014 at 10:58 pm
Copy link
On the height declaration, add the !important attribute to force your height like this.
height: 1200px !important;
ifdc1974 · Member · Jul 8, 2014 at 1:25 pm
Copy link
Thanks. Ok. I think I’m going to go with the less deep header but the problem now is that it is wanting to repeat and not span the whole page. What can I do about that?

https://ifdcorg.wordpress.com/wp-admin/customize.php?url=http%3A%2F%2Fifdcorg.wordpress.com%2F

Also I’d like to span a photo across the whole page just like the header is on many of my subsequent pages on the site. Do you know how I can achieve this in the Arcade template.

Thanks!
thesacredpath · Member · Jul 8, 2014 at 9:36 pm
Copy link
To keep the image from repeating, in your background declaration change it to look like this:

background: url(https://ifdcorg.files.wordpress.com/2014/07/perspectives.png) no-repeat scroll transparent;

The topic ‘Customizing Page Header and Blog Page’ is closed to new replies.

WordPress.com forums

Customizing Page Header and Blog Page