Patricia asks…
“I found your Motif tips very helpful, but do you know how I could reduce the overall size of the white Front Page title box? The box covers an important section of the Featured Image that I want to use. Thanks if you can help! :-)”
Luckily, a chap called Richard from The Sacred Path has provided us with the answer, as well as how to remove it or shift it over to the left hand side. I’ll reproduce his code below.
You’ll need the Custom Design upgrade if you haven’t already got it, but you can try out the code and see the effect, before purchasing. To do this, go to Appearance > Custom Design. On the CSS panel click on “Preview for free”. Click on Try It and then click on CSS. Delete all the informational text and add your code…
How to remove the white box entirely
.front-page-content-area .with-featured-image .hentry {
display: none;
}
How to move the white box to the left hand side
.front-page-content-area .with-featured-image .hentry {
margin-left: 0;
margin-bottom: 0;
}
The problem with the code above is that the white box appears tightly against the left and bottom edges of the featured image. I recommend removing the margin-bottom code and then defining the left margin in pixels, like this. Just change “50” to whatever you think looks good…
.front-page-content-area .with-featured-image .hentry {
margin-left: 50px;
}
How to increase or reduce the size of the white box
First of all, let me cover the obvious :-) The more you type, and the more paragraphs you use, the taller the white box. So keeping it brief is the first way to keep the box small. However you can tighten up the padding around the title and content using some Custom CSS, which should in turn reduce the size of the box.
The first rule below is for the title/heading. The first number is the top padding, the second is the left/right padding, and the third is the bottom padding for the heading.
The second rule is the content. It has the same padding on all sides. The first is the top, the second is right, third is bottom and the fourth is left. So by trying slightly different numbers (for example, you could try changing 1.3334em to 1em) you can increase or reduce the padding as you see fit. Just play around with the numbers until it looks right :-)
.front-page-content-area .entry-header {
padding: 1.3334em 1.3334em 1em;
}
.front-page-content-area .entry-summary, .front-page-content-area .entry-content {
padding: 1.3334em 1.3334em 1.3334em 1.3334em;
}
Many thanks to Richard at The Sacred Path for the code. You can see the original WordPress.com support threads here and here.
Let me know how you get on.
All the best,
James
James Riddett 
Thanks a million James, I’ll give it a try!
I just installed this theme and I’m new in wordpress. Your tip look very helpful , can you consider adding before and after photos? Thank you !
Hi, I also want to change the size of the white text box. I have tried your suggestions and I also have changed the settings at
/* = Front Page Template
———————————————– */
But nothing happens. I really don’t know what to do next. Do you have any ideas?
Hi Margriet, do you have the Custom Design upgrade, and is your site a WordPress.com site? That’s what the advice above is for. I’m not sure what the code you pasted refers to. If you post a link to your site I may be able to help further.
Hi James,
Your information is invaluable and thank you for taking the time to share. I have tried repeatedly using the setting indicated above. I hit save and nothing happens. It says “changes published.” I have purchased the WordPress.com Premium package. It is a new blog, careenough.today. May have to type it in the actual URL window.
Help.
Thank you
Hi, can you clarify what you’re trying to do?
I’m trying to reduce the size of the front page title box. It’s blocking part of my background picture.
If you edit the page that’s set as your front page, and scroll down to the bottom, you’ll see a section called “Likes and Shares”. Uncheck both the Likes and Shares options. This will remove the Share and Like buttons from your front page, which take up valuable space.
Also, I suspect there may be a couple of blank paragraphs under your text. So scroll back up to the editor and click to place your cursor immediately after “…and inspiring pathways.” Then hit your Delete button a good few times (please note it’s Delete not Backspace). That should clear any blank paragraphs that have crept in at the end of your text. Don’t forget to hit “Update” in the sidebar after making any changes.
Have another look at your homepage to see if enough of your background image is now showing. You could now try reinstating either the Likes or Share options (or both) if you want them, and if they don’t use up too much vertical space.
Thanks James. I’ll try that.
No worries, let me know how you get on :-)
That helped. I am going to try to move the box now. I think, if I can move it, providing the editor works this time, that may give me enough room. If not, I’ll try to readjust my picture.
Thanks Again!
You’re welcome! Even if it doesn’t give you enough room, don’t adjust your picture just yet — I may be able to come up with an alternative, like removing the “Mission” header perhaps? That would reduce the height quite a bit.
True. Let me try this real quick and see what happens. Then maybe we can omit the “Mission Header.”
Sure thing, go for it :-)
Rats! It moved, but not the way I needed it to. Actually, I think you’re right. Just getting rid of “mission” might work.
However, if I don’t have my page titled, how will I indicate which page is static?
It’s ok, you can leave the page itself, and the front page setting. The page will still have that title, we’ll just set it to not display on the front page. This should do the trick, just paste this into your CSS section…
.entry-header {
display: none;
}
I have a great idea! I can also remove the box, go back into Corel Draw and insert a box with the mission wherever I want it, re-jpeg it and use that.
Let me see if I can remove it.
You could certainly do that! The only drawback is that the text then becomes part of the graphic. Currently, the text is in regular web text, which search engines like Google can read, and determine what your page is about. I’d recommend trying my code to remove the “Mission” header first and see what you think.
Good Point! Will do! I have to take a quick break here. Will try and let and then let you know. Thanks James!
Ok, I’ve hit a snag with that code to remove the “Mission” heading — it will also not display the headings on all your blog posts and pages. Not good! :-) Leave it with me and I’ll see what I can come up with.
Ok. Thanks James. Oh my gosh! I am so sorry. I just noticed the time on your post. It’s late for you. Thanks for your help.
Oh that’s ok! I wasn’t staying up especially, I’m just a bit of a night owl sometimes :-) Did you see the new code on the other comment? That should do it (hopefully).
No, I didn’t. Let me go back to your blog.
Right of course, just referring back to my original article, it’s just a case of defining it for the front page only, so this is the code you need…
.front-page-content-area .entry-header {
display: none;
}
That should do it — let me know how you get on.
Let me try…
We’re almost there!! That worked. I need to shave about an inch to 3/4 inch off the bottom.
James, thank you. I am going to try that original code again to move it. I’ve typed it in several times. I’ll let you know. Again, thanks.
Try this instead — it will hopefully move the whole box down a bit…
.front-page-content-area .with-featured-image .hentry {
margin-bottom: 20px;
}
Ok-
If you need to move it down further, just reduce the number 20 to a smaller number. To move it up, increase the number.
It’s not working. I’m looking real close to make sure I’ve entered it correctly.
That’s strange. The code works because I tried it on my front page. Try changing the figure to 0px — the box should move right down to the base of the area. Hopefully that will work and then we can tweak from there. So:
.front-page-content-area .with-featured-image .hentry {
margin-bottom: 0px;
}
Nope. Just to be sure, there is a space after area and image correct?
Yes that’s correct. I like your thinking about the disappearance of the header, but no the two styles can exist together. So just to clarify, your styles should now look like this:
.front-page-content-area .entry-header {
display: none;
}
.front-page-content-area .with-featured-image .hentry {
margin-bottom: 0px;
}
Ok-let me try again.
It just will not work. I’ve tried it several times to be absolutely sure I’m typing it in correctly. There has to be something different with mine.
James, thank you. It looks great. I hope I was not typing in wrong. Thank you for taking the time. It really means a lot!
I know very little about this, but do you think the hentry (I assume header entry) is throwing things off because there is no longer a header?
Just for anyone who reads these comments in future — my code did work, it was just that part of the code got wrapped to the next line in the editor, which made it invalid.