CSS for different header photo
-
I’m trying to have a different “header” photo for my bio page and contact page than on my home page. When I contacted support they suggested that I post here to create a css. She said that because of my chosen layout it would require a more complex css.
Can you please help me by writing one?
The blog I need help with is: (visible only to logged in users)
-
Hi, we can give this a try. You will want to have the images the same size as the existing header image, which is 1140 x 522 pixels. If you can make those images and the post links to them we can work on the code for you.
-
-
I uploaded the images to my media library. I would like image 0048 to be on the bio page and image 0063 on the contact page. Yes, the same size as the existing header.
-
-
Hi, sorry for the delay on this. The following I worked out for your about page. Given the image is portrait in orientation, it took a little more tweaking. See what you think with this.
.page-id-2 .image-header-flexible img { visibility: hidden; } .page-id-2 .image-header-flexible { background-image: url("https://culturedbygrace.files.wordpress.com/2016/08/0048.jpg"); background-size: 100% auto; background-repeat: no-repeat; background-position: center 30%; } .page-id-2 .image-header-flexible a { display: block; }This would be for your contact page. Again, see what you think.
.page-id-3 .image-header-flexible { background-image: url("https://culturedbygrace.files.wordpress.com/2016/08/0063.jpg"); background-size: 100% auto; background-repeat: no-repeat; background-position: center 60%; } -
Thank you so much! Could you help guide me to where in the editing feature that I insert the code?
-
Ok, I got some help on where to insert the codes, but you’ll see when you go to the website that the contact page image didn’t work.
The about page looks awesome though! -
Oops, I somehow forgot to copy/paste one bit of code. Add the following at the very bottom of your custom CSS.
.page-id-3 .image-header-flexible img { visibility: hidden; } -
-
-
Hi,
I am trying to put the same image, but as a traditional narrower header, not full page like my home page header–I don’t know squat about CSS, though I used a bit of the code on Weebly to change some background colors on another site.
Help!!
Dr. Mills
-
Dr. Mills, which site are you referring to? I see a number of sites associated with your username including on self-hosted site.
-
THANK YOU for replying! It seems really hard to reach suport on WP.com.
It’s the bronwynmills.wordpress.com site. If I can make this work, I’ll probably upgrade.
1) Just to be clear, the first page has a full screen image, except for a teensy orange/rust footer.
2) I want the subsequent pages–about, the submenu items, etc. to have a header just across the top–more or less same size as your own site–and the majority of the page, the orange part with what I have entered there.
3) I can trim the original image and upload that, but then it changes the first page full screen header, and I don’t want that.
I hope that’s clear?Thanks again,
Dr.M.
-
Dr. Mills, this thread is about the Rosalie theme, and since you are using a different theme, Affinity, in the future, please start a new thread to prevent confusion for those searching for solutions in the future.
You can try out and preview custom CSS before you buy as explained here. Add this CSS and see what you think. I’ve specifically excluded your home page.
body:not(.home) .custom-header { max-height: 400px; } body:not(.home) .custom-header .custom-header-image { padding-top: 25% !important; background-position: center bottom !important; }If you have additional questions on this, or on other customization, can I ask you to start a new thread in the CSS forum. Thanks in advance.
-
Thanks. I gather I have to purchase a premium plan in order to use code. I did not realize that. The templates (pardonnez-moi, the “themes”) are absurdly restrictive, obviously to get us to spend money.
Would there be any advantage to going over to WP.org?Weebly, not my fave, has an element in their site builder that allows you to change each header on subsequent pages. I don’t suppose the new drag and drop site builder in WP has anything like that???
Any advice?
Thanks,
Dr. M.
-
Hi, with a WordPress.org installation, you have full control over everything and can change anything you wish, but with a WordPress.org installation, you have to keep up with all the updates and if things go wrong, you have to troubleshoot and fix them. In general, they are much easier to administer than before, but they do come with additional responsibilities and sometimes you need to know a bit about web hosting software and some programming to get what you are looking for.
If you are talking about Components and the Theme Generator, I do not believe that is a part of it at this time. It would require the adding of PHP code to the template files in order to do that.
What you may want to do is to look into themes that support and show featured images on pages. That would give you the ability to have a different image on each page.
-
Hi, I use WP.com. Good support but constipated templates and no CSS until you buy their premium plan. YOu get a wider choice of colors and fonts, and CSS, audio or video; but after that it's back to square one. I hate CSS. I'm not a programmer; I'm a writer, and I'm sick of the hype about making it easy but, in effect, also making it stupid.
Thanks for you helpful answers though. Just wish I could apply them without having to twist my head or my pocketbook into a pretzel.
Dr. M. -
- The topic ‘CSS for different header photo’ is closed to new replies.
WordPress.com Forums 