Hello. I love the theme. But I have a question about the headers of single posts. My post titles are long and the text is huge, so it takes up too much space. How do I control the font and font size of the title/header text in the header area? Also, I would like to use a global header background image for ALL blog posts. How can I add a header background image globally instead of needing to manually add it to every post? Thanks!
Andrew, Thank you for the quick reply. However, neither solution worked. The typography settings are only for Page Heading Font. Changing the header font size only affects my pages, NOT posts. There is no option for POST heading font. I think this may require a custom CSS solution.
For the post header background, I am only able to create a header background image for blog ARCHIVE pages, but not for single posts. Is there a custom CSS solution for adding a global background image for all posts?
FYI, I just updated to the latest version of Salient 11.0.4 and am running WordPress 5.3.2 using PHP 7.2.
The fist snippet worked. I am now able to control the font size. Thank you. However, the second snippet did not work. I replaced the URL with an image from my media library and the background is still gray. I checked the code several times to make sure no errors. Also, now that the text is smaller, the overall height of the title area is too large. How can I globally control the height of all single blog post headers? Thank you.
Thanks. We're getting close! The image works using the first snippet, but the second snippet did not work. The height of the post header is still huge. I'm surprised these options are not available in the Salient settings. I would think most people would not want huge text and image at the top of every blog post.
Hello. I love the theme. But I have a question about the headers of single posts. My post titles are long and the text is huge, so it takes up too much space. How do I control the font and font size of the title/header text in the header area? Also, I would like to use a global header background image for ALL blog posts. How can I add a header background image globally instead of needing to manually add it to every post? Thanks!
Andrew,
Thank you for the quick reply. However, neither solution worked. The typography settings are only for Page Heading Font. Changing the header font size only affects my pages, NOT posts. There is no option for POST heading font. I think this may require a custom CSS solution.
For the post header background, I am only able to create a header background image for blog ARCHIVE pages, but not for single posts. Is there a custom CSS solution for adding a global background image for all posts?
FYI, I just updated to the latest version of Salient 11.0.4 and am running WordPress 5.3.2 using PHP 7.2.
Hi there,
Sorry for delay in response.
- Use the following custom css:
#page-header-wrap .entry-title { font-size: 30px !important; }-Try the following custom css to add page header and remember to change url to link to your image:
.single .page-header-bg-image { background-image: url(http://example/salient/wp-content/uploads/2020/01/logo-1.jpg) !important; }Hope this helps.
The fist snippet worked. I am now able to control the font size. Thank you. However, the second snippet did not work. I replaced the URL with an image from my media library and the background is still gray. I checked the code several times to make sure no errors. Also, now that the text is smaller, the overall height of the title area is too large. How can I globally control the height of all single blog post headers? Thank you.
Hi there,
Use the following:
.default-blog-title.fullscreen-header, .single-post #page-header-bg.default-blog-title.fullscreen-header, .single-post.ascend #page-header-bg.default-blog-title.fullscreen-header { background-image: url(https://cdn.pixabay.com/photo/2018/02/11/16/12/woman-3146093_1280.jpg) !important; }Try the following to control the height:
@media only screen and (min-width: 1000px) { #page-header-wrap.fullscreen-header, #page-header-wrap.fullscreen-header #page-header-bg, html:not(.nectar-box-roll-loaded) .nectar-box-roll > #page-header-bg.fullscreen-header, .nectar_fullscreen_zoom_recent_projects, #nectar_fullscreen_rows:not(.afterLoaded) > div { height: 180px; } }Kind regards.
Thanks. We're getting close! The image works using the first snippet, but the second snippet did not work. The height of the post header is still huge. I'm surprised these options are not available in the Salient settings. I would think most people would not want huge text and image at the top of every blog post.
Hi there,
Try the following:
.single #page-header-bg { height: 80px !important; }The options are available on post header setting while editing individual post.
Kind regards.
Hi there,
Use the following:
.single #page-header-wrap { height: 80px !important; }Kind regards.
Ok. Good. That worked, but now the text in the header area is not visible. It's probably hidden lower. Is there a way to bring that text up?
You can ignore my last reply. By using BOTH code snippets, the problem is resolved. Thank you for working through this with me!!