TextBook Theme – Header image too short
-
I just switched to the TextBook theme and I’m having some serious issues.
First, the header image: I made mine 1980x960px, just as the instructions say. The demo shows a tall picture with the top faded out. Mine shows a short picture with nothing but the faded part. I’d might as well not have a header. I can’t find any settings that affect the height or fade.
Here’s the demo:
Here’s my page:
I thought it may be an issue with the types of blocks I’m using. According to the TextBook instructions, it looks like I need a Featured Page block, a Featured Title & Description block, and a Featured Post block.
I’ve spent an hour going through the WordPress block editor, and none of those blocks seem to exist. The closest thing is the blog posts widget, but it shows full-width text instead of the nice side-by-side pictures — and I want to show specific pages instead of recent blog posts.
I picked this site because of how the demo looks, and I’ve put hours into reconfiguring things without getting anywhere close to the demo. What am I missing?
The blog I need help with is: (visible only to logged in users)
-
Hi.
According to the TextBook instructions, it looks like I need a Featured Page block, a Featured Title & Description block, and a Featured Post block.
No, construction of a homepage that resembles that of the Textbook demo does not require use such blocks. And you I’ll take your word for it that they don’t exist.
None of the features present on the demo must be included on your homepage, but how to add each of the features is described in the Textbook overview. You may use the overview as a guide for adding those features you’d like included.
How to add the header image is described in the Custom Header Image section of the overview. The header image is added and managed at Customize > Header Image. If you’ve added an image there, then please let us know, because I don’t understand why it wouldn’t be displaying correctly.
The Featured Content section of the overview describes how to set up this feature, and adding a Featured Content title (“Featured” is the default title) and description are options available with that feature, as is selecting a Featured Page to display as featured content. Let us know if you run into any further difficulties in following the guide, and applying it’s instructions to your homepage.
Note also that if you have the Premium plan or higher, then you have free access to Live Chat Support.
-
Hi! Your site looks a bit like the inside pages of the demo site:
https://textbookdemo.wordpress.com/a-parent-page/first-child/I found this on the guide:
The demo site for TextBook uses the option to display Your Latest Posts which can be configured by going to Customize → Homepage Settings. This will allow the additional Homepage features to work that are found under Theme Options in the Customizer.
If you display the latest posts on the home page instead, does that resolve the issue for you?
-
@musicdoc1, sorry I didn’t see your reply earlier — I’d had this tab loaded then had to run out and rescue some things from a storm.
You’re right that this theme doesn’t require blocks at all. Like most older themes, though, it has a specific look for specific pages. On this one, the larger header image will only show on the front page, and only if that’s set to show posts. One goal of blocks is to give site owners more flexibility on every page and post.
-
No worries.
@garyrobson saidI picked this site because of how the demo looks, and I’ve put hours into reconfiguring things without getting anywhere close to the demo. What am I missing?
I wasn’t trying to discourage the use of blocks (in this case). In my first post I’m responding to his questions regarding how the demo’s homepage was constructed, and how to build a homepage resembling it. It’s all in the overview, including the instruction to set the homepage to display posts. I do agree, though, that it would have been helpful for me to mention that particular instruction, especially since the site now has a static homepage. Thanks. : )
So the first thing to do, as suggested by @supernovia, is to set the homepage to display the latest posts at Customize > Homepage Settings. On the Textbook theme, its special homepage features don’t work otherwise.
-
Out of curiosity I just tested to see whether the “additional Homepage features…that are found under Theme Options in the Customizer” mentioned in the Homepage section of the Textbook overview work on the posts page on Textbook, if the posts page is set to display somewhere other than on the homepage. They do.
So, on Textbook, the Featured Content section, with it’s optional customized title, description, and featured page, will display on the posts page, regardless of whether the posts page is set to display on the homepage.
-
-
Thanks for the help. It appears that you just can’t get the look of the demo homepage if you have it set to a static page. You have to use the “latest posts” setting.
I have the site looking almost the way I want it, but there are still a few things I can’t figure out.
- What style (class or id) do I use to change the opacity of the header image on every page except the homepage?
- Is there any way to show specific pages or projects on the homepage instead of the five more recent blog posts?
- Is there a way to add custom icons for the social menu if you want to show sites that aren’t built in? Not a fan of the little chain icon.
- Is there a way to make links on the social menu open in a new tab?
-
Hi there,
What style (class or id) do I use to change the opacity of the header image on every page except the homepage?
The way this is coded into the theme it is tricky to override the default gradient that is overlayed on top of the image. This should do the trick:
.single.header-image .site-header:before, .page.header-image .site-header:before, .archive.header-image .site-header:before, .search.header-image .site-header:before { background: rgb(255 255 255 / 87%) !important; }Note I chose the opacity of 85% at random, but you can edit this value in your code. e.g. after you add the code, if you wish the image was easier to see, try 75%. If you want to make the image almost invisible, try 90-90%
Is there any way to show specific pages or projects on the homepage instead of the five more recent blog posts?
This is an older theme of our that was released before we had a block editor. Because of this the homepage template is ‘hard coded’ and it’s not possible to add custom content sections or blocks. If you wish however you can hide the blog so it does not appear on the homepage. To do that add this CSS code to your site
.home #primary { display: none; }Is there a way to add custom icons for the social menu if you want to show sites that aren’t built in? Not a fan of the little chain icon.
Can you upload a Quora icon (that you would like to use) in your media library? It may be possible to use it in place of the chainlink icon, thanks!
Is there a way to make links on the social menu open in a new tab?
Yes, if you click on each menu item to edit it, look for this option:
Thanks!
-
Thank you, Jerry!
That css got me to the right block, and I’m able to adjust the opacity of the image just fine now. I was having trouble with the rgb specification (it was coming up red), but I used rgba and it worked:
background: rgba(255, 255, 255, 0.3) !important;
Can you upload a Quora icon (that you would like to use) in your media library? It may be possible to use it in place of the chainlink icon, thanks!
Done. I called it
Quora icon 500x500.pngYes, if you click on each menu item to edit it, look for this option:
My menu items don’t look like that. Here’s what my menu shows:
-
Hello there,
Done. I called it Quora icon 500×500.png
Ok so the CSS you would need here is:
svg.icon.icon-chain { background: url(https://garyrobson.files.wordpress.com/2016/05/quora-icon-500x500-1.png); background-size: contain; color: transparent; }You may want to upload/use a grey version of the Q icon.
- The topic ‘TextBook Theme – Header image too short’ is closed to new replies.
WordPress.com Forums 