SELA/Home Page: Header, Hero Box
-
<<I tried to figure this out on my own by using the inspector but my understanding of managing CSS just isn’t there yet. >>
I was wondering if someone could help me with these things:
HEADER
On my homepage, I added a background image to the header. It fits and looks fine until I upload the logo graphic (under “site identity” in the Customizer). For some reason the background header image is stretched out and the ends get cut off with the logo graphic on top.HERO PICTURE
– I would like to reduce the padding/space around the title and text in the white box on the hero picture.
– can I change the opacity of the white box?
– if I wanted to remove the title in the white box altogether, could I get the CSS to do that?
– could I make the white box wider and not as tall?
– And move it down into the bottom third of the photo?Thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi there, It looks like you may have gotten the header image/logo issue straightened out. Let me know if there are still issues with this.
I see you have hidden the .hero-container-inner div with CSS. Does this work for you or would you like to have that content and change the styling, width and padding?
-
Hi! Thanks for checking out my question. I think I have the header/background image straightened out. Don’t know if I did it the right way, but it looks ok my chrome/mac and my iphone/safari.
I’m still trying to work out the here-container box. I would like to see what it would look like moved down, but I never could figure out how to move it closer to the bottom but not all the way.
A FEW MORE HELP QUESTIONS:
1. Grid Pages/Page Titles: I’d like to have the parent page titles on grid pages be larger than the child page titles; and be bold and all upper case. I have tried every way I can think of but when I make the change it also increases the size of the child page titles (both have a H1 label).
2. Navigation: The child page names listed under the parent page in the main nav seem really small to me. Is there a way I can increase the font size just a bit?
3. Widgets: I’d like for the content in the text widgets to be centered within their column (images and text), but can’t figure that out. I’d like this change to apply to both the web version and the mobile version.
4. Homepage: There’s more white space than I’d like below the homepage (not footer) widget on the right. Can I take that extra space/padding out?
5. Homepage/Blog Post Titles: On the homepage I’d like to bold the titles to the “News & updates” listed (the blog posts’ titles). And/or italicize the dates for the posts.
6. Child Pages/Feature Image: I would like to have the feature image, for child pages, displayed only on the grid page, not in the feature image spot on the child pages. I don’t like how the feature image space cuts the picture off. So, I’d like the image hidden and I can manually add the image to the top of the page which means it won’t go all the way across, but that’s better than it being cut off. OR, instead, if it’s possible, I’d like to have the feature image height increased on the child pages so more of the picture is viewable.
Thank you so much for your help. I hope that’s not too much to ask at once. If it’s easier, we can only address one question at a time.
-
-
On the text overlay on the hero, give the following a try and see what you think.
.front-page-content-area .with-featured-image .entry-header { margin-top: 0; } .front-page-content-area .with-featured-image .entry-meta { display: none; } .front-page-content-area .with-featured-image { opacity: 0.8; padding: 1em; margin-bottom: 1em; } .front-page-content-area .with-featured-image .entry-content { margin-bottom: 0; } .hero-container-inner { vertical-align: bottom; }1. Grid Pages/Page Titles: I’d like to have the parent page titles on grid pages be larger than the child page titles; and be bold and all upper case. I have tried every way I can think of but when I make the change it also increases the size of the child page titles (both have a H1 label).
I’m including the CSS rules to change both the page title and the child page titles (second rule). You will notice they are both the same. That is due to the fact they are in “em” units, which is relative, so in one place 2.4em may look larger than in other places.
.page-template-grid-page .entry-header > h1.entry-title { font-size: 2.4em; } .page-template-grid-page .child-page .entry-header > h1.entry-title { font-size: 2.4em; }2. Navigation: The child page names listed under the parent page in the main nav seem really small to me. Is there a way I can increase the font size just a bit?
Let’s try this, which forces the submenu font size to be the same as the top level parent menu item.
.main-navigation a { font-size: 1.4em !important; }3. Widgets: I’d like for the content in the text widgets to be centered within their column (images and text), but can’t figure that out. I’d like this change to apply to both the web version and the mobile version.
Here you go.
.widget_text, .widget_image { text-align: center; }4. Homepage: There’s more white space than I’d like below the homepage (not footer) widget on the right. Can I take that extra space/padding out?
You seem to have made a change to the footer widgets and I’m not seeing that space now. Let me know if you still need help on this one.
5. Homepage/Blog Post Titles: On the homepage I’d like to bold the titles to the “News & updates” listed (the blog posts’ titles). And/or italicize the dates for the posts.
The top level menu items are already bold, so we can’t make News & Updates any bolder. There are a couple options, one is to make all the top level menu items normal and then bold only News & Updates with this.
.main-navigation a { font-weight: normal; } #menu-item-596 a { font-weight: bold; font-style: italic; }You will notice that with this particular font, there isn’t much of a difference between bold and normal.
Another thought is that you could change the color of that menu item, such as like this.#menu-item-596 a { color: #fff; }6. Child Pages/Feature Image: I would like to have the feature image, for child pages, displayed only on the grid page, not in the feature image spot on the child pages. I don’t like how the feature image space cuts the picture off. So, I’d like the image hidden and I can manually add the image to the top of the page which means it won’t go all the way across, but that’s better than it being cut off. OR, instead, if it’s possible, I’d like to have the feature image height increased on the child pages so more of the picture is viewable.
.page-child .entry-thumbnail { display: none; } .page-child .content-wrapper.with-featured-image { margin-top: 0; }
- The topic ‘SELA/Home Page: Header, Hero Box’ is closed to new replies.
WordPress.com Forums 