Motif theme: reducing the size of the front page text box

  • Author
  • #1605471

    Hi everybody,
    I would like to make the front page text box smaller on my motif theme blog. Is it possible? What code should I use?

    The blog I need help with is: (visible only to logged in users)


    Hi there, The first thing I see is that you have an extra empty h2 tag in your front page content that is causing the extra white space below the body excerpt. If you open that page in the editor and click way down below the text, you will see the cursor on a blank line. Hit the delete or backspace key to get rid of that extra line.

    Here are three ways to make the box smaller.

    1, You can tighten up the padding around the title and content text, and above and below them. The first rule below is for the 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.

    .entry-header {
        padding: 1.3334em 1.3334em 1em;
    .entry-summary, .entry-content {
        padding: 1.3334em 1.3334em 1.3334em 1.3334em;

    2. You can make the text smaller by not using the h2 heading for the page content in the text editor. Perhaps use h3 or h4, or standard text set to bold. You can try them all and see what you think.

    3. A combination of the two.

    Original poster

    Great, thanks a lot!


    You are welcome.


    I assigned a page as my front page, but the content that it shows is like an embed box, not like a quote or excerpt box.

    How can I set that box up?


    Hi, @ebraelshaddai, the Theme Showcase page for Motif has some instructions on setting up the main page. Have a look at it and see if that helps.


    @thesacredpath, it’s the very first I do even before activating a theme. But the info page is not enough clear about these instructions on Front Page setup. Indeed, it helps only on assigning the Front Page, nothing else.


    For the large image at the top, you need to set a featured image on the page you set as the “Front Page” at Settings > Reading. You also have to have “Front Page” selected in the Attributes module in the page editor for that page. The “Title” on the large image overlay will be the Title of the page you set as your front page. If you include some text in that front page, that will be reflected in the overlay below the title.

    On the demo page for Motif, the Testimonials is a text widget put into the First Front Page Sidebar. Recent News is the Recent Posts widget places in the Second Front Page Sidebar.

    If you set up Testimonials at Testimonials in your dashboard, two of those will be shown below the above two widgets and also appear on the Testimonials archive page.

    Hopefully the above will get you started.


    Oh yeah, and the featured image on the main page should be about 1700px by 1200px or there abouts. The on on the demo site is 1697 × 1131.


    Thanx a lot, ;) Hugs!


    You are welcome, and if you have more questions, just let us know.


    Hi, is there a way to delete the white box? So that the only thing in my front page is a photo. Thanks


    @brooksfieldstore, yes with the Custom Design upgrade and some CSS, it is possible. You can try out the following code by going to Appearance > Customize > Custom Design, click on Try It and then click on CSS on lower right, delete the informational text and add the following code.

    .home .site-content {
    background-color: rgba(0, 0, 0, 0);
  • The topic ‘Motif theme: reducing the size of the front page text box’ is closed to new replies.