How to customize the white text box on the Motif theme’s front page template

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

Advertisements

38 thoughts on “How to customize the white text box on the Motif theme’s front page template

  1. 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 !

  2. 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.

  3. 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

      • 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.

  4. 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.

  5. 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.

  6. 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.

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s