Feature Image customization/Splash page option?
-
Hi,
I am using the Untitled theme on my website hosted at wordpress.com. I think I have a simple problem, but I don’t know how to fix it.
I want to have the featured image fill the entire window on my “home” page, almost to act as a splash page. My site is intentionally meant to be incredibly minimal, so I want the graphic that I have created to be the entire homepage without anything else on it.
I think there must be some simple fix here. I have purchased the CSS plugin add on.
Thank you for your help!
The blog I need help with is: (visible only to logged in users)
-
Hi Zoe,
After looking into your site, I see that your Featured Image is taking up the entire width of the page.
If you want the rest of the page to be black you can add this to your CSS:
#page { background-color: #000000; } .entry-content, .entry-summary { color: #999999 }Feel free to reach out if you have any questions!
-
Thank you so much for reaching out!
I was able to figure out the featured image, and it is full bleed across, but I’d like to have greater height. Right now, it is set for 1440 x 400.
What is the code to change the featured image height?
Also, in your code above, can I specify that the home page (Page #1) has background color #000000, but the Contact page (Page #2) has a background color #ffffff? Would I just change the entry directive where you have written #page?
Thank you again!!!
-
Hi Zoe,
With the image we can make the height bigger, but please note that it will stretch the image longer. I’m pretty sure that’s not what you would want. It would be best to keep it as is.
Also, in your code above, can I specify that the home page (Page #1) has background color #000000, but the Contact page (Page #2) has a background color #ffffff? Would I just change the entry directive where you have written #page?
Will you be changing the background color for additional pages or is the Contact page the only page with the background color #FFFFFF?
-
Hi,
I can create the image in Adobe Illustrator to be whatever proportions I want, I just need to know how to get it to show up on the featured image in that size. Right now, I have created it in Illustrator in the proportion that is the standard for the Untitled theme (1440×400).
So, if I create the image in AI to be 1440 x 800, how do I get it to show up that way in WordPress?
Re: background.
The website will only have two pages – the home page, and a contact page. I would like the background on the home page to be black, and on the contact page to be white.This raises another question that I have. I’ve inserted a custom header that is just a black box so as to not see the Title, “Zoe Anetakis” on the header. To do so more elegantly, I would just remove the title “Zoe Anetakis” from the CSS so I don’t have to use a dummy image to hide it.
So, how do I remove the Title in the header so that I don’t have to use a dummy custom image to hide it?
I’m sorry for these beginner questions. I’m trying to learn CSS using your resources at the same time.
Thank you!!!
-
Hi Zoe,
Thank you for the clarification! I think we should go about this in a different way. What would be a better idea is to set your background image as your Home page image instead. I played around with my test blog and I think I created a site similar to what you are looking for:
My Home page: https://cloudup.com/ccDEo8fSsl1
My About page: https://cloudup.com/cagx55Yqar4As you can see my Home page is just the image (size: 1988 × 1300 pixels) and then I removed the image with CSS for my About page (which could be similar to your Contact page).
If this is what you are looking for, please remove the black box you set as your custom header and remove the featured image from your Home page. Please leave that page empty. Go to Appearance > Background in your Dashboard and set your image there. My image was pretty large, so you can use one about that size as well.
As for removing the title you can do that by going to Appearance > Customize in your Dashboard. Go to the Site Title tab and remove both the title and the tagline.
Once that is done erase everything we put in your CSS editor and add this:
#colophon-wrap { display: none; } .entry-header { display: none; } #masthead-wrap { background-color: transparent; } body.page-id-15 { background-image: none; } .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a { color: #000000; }Let me know how this works out!
-
I think we are close! Yours looks great on CloudUp! But I can’t seem to get mine to look like that.
Two things I like about your page/where mine goes wrong:
1) Your background image goes all the way up to the top of the page such that “home” and “about” are within the image. I like that! I think I followed your instructions, but on my page, the background image doesn’t seem to extend all the way up like yours does. It’s almost as if there is a page there in which you could put content. And, the WordPress Smile thing is at the top of my page.
2) Your about page has the grey/white box that is a nice size, consistent with the size of the image on the home page. Mine is almost like a banner size, and it is at the top of the page, whereas yours seems more balanced on the page.
Also, I tried the same image size as you and it was WAY too big, almost as if I’ve done some wrong there too. So, what I have now is just a placeholder while I figure these issues out.
Is there a way for you to look at my page and know what I did wrong?
Thank you again for your help – you have been so generous!
-
Hi Zoe,
Thanks for the heads up! I have edited your CSS to make the necessary changes. Take a look!
- The topic ‘Feature Image customization/Splash page option?’ is closed to new replies.
WordPress.com Forums 