How to style the Motion Theme for WordPress

I had a closer look at this theme the other day when I made some upgrades on Nadia’s website.

I really like the look and feel of Motion but I felt certain things were missing from this wonderful theme, such as drop down submenus.

Let’s take a look at some tweaks and how you can make Motion your own.

This article was written for Version 1.1.6 – these tweaks may not work in later revisions of the theme.

Removing default Navigation

This version of Motion includes two areas for navigation menus: one called “Top” is at the very top of the screen, and another is called “Primary” just below the header.

Even without a custom menu active these two menus show some default values: the Top Nav shows pages whereas the Primary Nav shows categories. This can be annoying when you only want one of these navigations to be visible.

To remedy this, head over to Appearance – Menus. Create a new menu here (let’s call it Empty) then place nothing inside. Now select the Empty menu as your Primary Menu and your “no categories problem” is gone.

Primary Navigation and Drop Down Menus

One of the surprising things is that subpages and sub categories do not appear as drop down menus as you’d expect. Let’s make it happen!

The good news is that the CSS has built in support for drop downs on the Primary Menu – all we have to do is make the sub pages show up. Have a look at your header.php file and find this piece of code:

The depth parameter (1) tells WordPress not to display sub items in the menu. Let’s change that to 2 and drop down menus now work like a charm below the header!

Please note that this does not work for the Top Navigation menu (where it would be annoying – so let’s not go there).

Bigger Nav Menus

To increase the size of the top navigation, hunt around for this code block in style.css:

Change the font-size element to 1.5em or similar. You can even add a line like font-weight: bold; to make the menu stand out.

To increase the size or the Primary Navigation (below the header) hunt around for this piece of code – same thing here, change the font-size value:

Removing default Footer Widgets

The footer shows “default widgets” which are often designed to show how a theme would display widgets. They show up when you don’t use widgets – which can be annoying.

To get rid of those just add an empty Text Widget into each widgetised area at the bottom you’d like to leave empty.

Bigger Site Title

In style.css have a look for this block of code:

Here you can change the font-size element to say 3em, that’ll be big – play around with it and see what suits you. The colour of the site title is changed by replacing the #fff with your preferred value. If you’d also like to change the hover colour look to this piece of code:

Amending the Welcome Box

The Welcome Box is the piece of text next to the Site Title, the one that reads “Hey there, thanks for dropping by…”. You may want to provide your own text here, perhaps an author picture even, or you just want to get rid of it.

The code for this is in header.php and looks like this:

Amend as you like, comment out or delete from opening to closing div tag. Alternatively, if you’re building a Child Theme and you don’t want to redefine the entire header file, you can add this piece of CSS to your style sheet to suppress the message:

Removing the Search Box

Even though the Search Box at the top of the screen is a nice touch, it can get in the way if you’re going for a much simpler look. We decided it would be better off in the sidebar as a standard widget.

In header.php you’ll find this call to to PHP script – simply delete or comment it out:

Footer Copyright

If you’d like to change the copyright message at the bottom of the page, take a look at the footer.php file and find this piece of code:

Amend this as you like – but please keep in mind that credits should be where credit is due. You’re already getting a free theme, why not link to the people who’ve given it to you.

How to remove Page Titles on full screen pages

Sadly Motion does not target the page titles via CSS so we can’t easily suppress them them. When you display a page without a sidebar you’ll still be left with a smallish page title as opposed to one that has the translucent border. If you want to get rid of this take a look at your page.php file and find the following block of code:

<?php if (!(the_title() == "")){ ?>
<divclass="posttop">
<h2><?php the_title(); ?></h2>
</div>
<?php } ?>

Delete the entire thing and your page titles will be gone. This will not affect pages with the sidebar, as these are targeted by a different fie.

That’s all folks – best of luck and Happy Hacking πŸ˜‰

Further Reading

About Jay Versluis

Jay is a medical miracle known as a Super Survivor. He runs two YouTube channels, five websites and several podcast feeds. To see what else he's up to, and to support him on his mission to make the world a better place, check out his Patreon Campaign.

67 thoughts on “How to style the Motion Theme for WordPress

  1. Hi there
    thanks for advices.
    Any idea to change background pic according to page?
    Actually I’d like to get a specific backround for the front page (which is a page choosen by myself) and leave a single color bg on the rest of site
    Thanks for your possible answer
    Cheers

    1. Hi Guy,

      the background image is set in style.css on line 45 in the body element, just underneath General Elements:

      /************************************************
      * General elements *
      ************************************************/
      body {
      background: #000 url(images/bodybg.jpg) top center no-repeat fixed;
      padding-bottom: 20px;
      font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif;
      text-align: center;
      }

      Replace the url (images/bodybg.jpg) with your own image URL (like http://yourwebsite.com/yourimage.jpg) and you’re ready to rock. Please note that the Appearance – Background dialogue does not work for this theme.

      Making this conditional is another story – you’d have to do the page check in PHP and then load the re-define the CSS. It means a lot of code rewriting and it’s beyond the scope of this article.

      Hope this helps πŸ˜‰

      1. Hi Jay
        Thanks a lot for your reply and please forgive my bad English… I’m French.
        Here’s the sit I’m making for an artist (tempo.)
        http://www.info-france.fr/christakiger-art
        As you can see there’s a pic on frront page with an armchair. This is a problem to read further post or shop post.
        That’s why I would like to keep the home page with this pic and get another one for the rest of site.
        I used the background theme function to upload the pic. I guess there’s a way to set a conditionnal to force this pic only on front-page but I’m very poor in css so I have to learn or to get a similary needs already solved! πŸ™‚ (No I’m not lazy!)
        Thanks again for your help… I go on searching.
        Regards from Cannes!!! Where it’s really hard to drive today!

        1. The only way to do it would be to have two identical stylesheets, one for the front page, and one for the rest of the site. The only difference is the background image. The stylesheet loads in the WordPress header.php file – see where that happens and add a PHP query to see which page this is (use the is_home() function for this). Then load the appropriate stylesheet.

          I’ve never done this myself, so that’s just the way I would do it. Hope it gets you on the right track (and I hope the Cannes traffic is going to calm down soon ;-))

    2. Hi Jay,

      Thanks for your quick response. It wasn’t the menu’s that I was asking assistance with (although I will probably edit those at some point using your notes above.

      On my site timclare.com there is the page title text “Home” that appears on the line just before “welcome to my homepage”. This is the text I would like to hide. And if this is easy enough to do I assume I would be able to change some other pages to hide the title (i.e. not in the menu but on the page itself) too?

      I assume I will need to change some of the motion themes code in he editor but can’t figure our which bit!

      Many thanks for your help,
      Tim

      1. Oh that – no problem Tim, it’s the Post Title for your page template. Looks like you’re using the defaut page template so we’ll modify that.

        Have a look at your page.php file and find this block of code:

        <?php if (!(the_title() == "")){ ?>
        <divclass="posttop">
        <h2 class="posttitle"><?php the_title(); ?></h2>
        </div>
        <?php } ?>

        Delete the entire thing (don’t comment it out), save your file and you’re good to go. Make sure you make a copy of the unmodofied file just in case.

        Note that this will remove page headers from all pages using the default template. If you change a page to use the Template with Sidebar your headings wll be back, so you still have some control.

        Hope this helps πŸ˜‰

  2. Hi Jay,

    First : thanks for your time writing these advices ! It helps me a lot !… my client too… πŸ™‚

    I’m trying to center the primary menu, without success so far… I’ve tryied several ways but only the sub menu’s texts seems cooperative πŸ™

    Any ideas ? πŸ™‚

    Again, big thanks !

    Mark

    1. Hi Mark,

      yes you’re right, it doesn’t like being centered as such automatically. You’ll have to shift it manually until it’s in the right position – have a look at this bit of code in style.css:

      .primary_menu li {
      float: left;
      background: url(images/blacktrans.png);
      line-height: 2em;
      margin: 5px 0 5px 5px;
      }

      See the last 5px in the margin CSS? If you tweak that to 50px or 100px it’ll shift the primary menu over to the right a bit. Play with that last value and see which way you like it best.

      Hope this helps πŸ˜‰

  3. Hi, I’m trying to invert the “Leave a comment”, meaning that the area for leaving a comment will be on top of the comments and not at the bottom of the page…
    I would really appreciate your help if possible.

    Thanks in advance,
    Saar.

    1. Hi Saar,

      no problem – have a look at the comments.php file. At the very bottom, you’ll find three small lines of code like this:

      <?php
      if (comments_open( $post->ID )){ comment_form(); }
      ?>

      This generates the “Leave a Reply” box. Cut it and paste it right underneath the following code in the same file:

      //WP 2.7 Comment Loop
      if ( have_comments() ) : ?>

      That should do the trick!

  4. Thanks for replying!
    It worked πŸ™‚

    If I may, I’m having another difficulty…I’m using a ‘page with sidebar’ in the website, and trying to show a different picture (than the one being used through out the site – using ‘simple image’ widget) in just one of the pages.
    Do you know of a right way to do it?

    Thanks very much

    1. That’s a bit of a custom coding job to be honest. It’s not difficult to do, but there’s no widget I can think of that does this. Basically you’d setup a PHP query that asks “which page am I displaying”, and then display a picture accordingly. I’d add this to the sidebar.php file. Not sure if I’ll get the time to write some code for it though – sorry.

  5. Hi,
    I’m trying to add a left sidebar to the motion theme. Can anybody help me?
    I’m trying to build a site for a very good friend of mine and I’ve been stuck for ages.
    Thanx.

    Joao

    1. In all honesty, and as nice as Motion is, it’ll probably take you longer to hack a second sidebar into this theme than to just pick another theme that is built for two sidebars. There are plenty, some of which you can actually specify through theme options how many sidebars you want and where they shall appear.

      TwentyEleven springs to mind, as well as Thesis or Pilcrow.

  6. Thanks for the post on this theme.
    I’m sooo frustrated–I only want to change the font in my posts to a larger size. I’ve downloaded Google Fonts and TinyMCE. Fonts doesn’t really tell me how to change the font size and TinyMCE isn’t working.

    I would TRULY appreciate some help–I’m a novice–only blogging a few weeks.

    Thanks.

    1. I feel your pain, Tracy πŸ˜‰ Tweaking a theme can be a long dark path, not necessarily with a happy ending. Which elements would you like to increase in size? The Body text for posts and pages? I always thought they were a bit small by default. Adding this to the bottom of your style.css file will take care of it:

      .postcontent p {font-size: 1.2em;}

      Change the 1.2em value to anything from 0.8 to 2 to change text size. Hope this helps!

  7. Hello!

    A truly wonderful post! I wonder if you could help me too, though. I would greatly appreciate it.

    I notice that the Motion theme’s code boxes ( tags) do not stretch as far across the screen as the text does. In addition, the horizontal side bars are only semi-working (I want no wordwrap, and huge horizontal sidebars, instead I get small horizontal sidebars and some wordwrap).

    Any ideas on how to fix this? (increase size of tags, and turn off wordwrap entirely) I would greatly appreciate it. Thanks again for your wonderful post.

    1. You’re very welcome, I’m glad you liked the post πŸ˜‰

      I’m not entirely sure what you mean by word-wrap, have you got a link to a site to show me the phenomenon? Same about the tags, do you mean the tags underneath each post? I’m looking at them and they seem to fit underneath each post. A link to the phenomenon in question would certainly help to clarify.

      1. Thank you so much for your reply πŸ™‚ In retrospect, my message was slightly cryptic!

        When I said tags, what I meant was “code boxes ( tags)”.

        However, I didn’t add a space, and it got parsed away! All I meant was that I was wrapping my code in tags to make it look like a code box.

        If you look at a code box in the TwentyEleven theme: http://niemiro.co.uk/FileShare/1.png

        you will see that the lines do not wrap. The long lines just continue and continue and continue, with a horizontal scroll bar. You can fiddle with this in Notepad: Notepad > Format > Wordwrap. See how it wraps long lines onto new lines, even without any new line characters?

        Anyway, if I put that into the Motion theme, it wordwraps: http://niemiro.co.uk/FileShare/2.png

        Curiously, it has a small horizontal scroll bar, unlike Notepad, but it still wordwraps. I want to disable Wordwrap (I want huge long lines) in my Motion theme. Any idea on how to do this?

        Finally, the code box does not extend the same distance as the text. Do you see how it falls far short of the end of the text in Motion? http://niemiro.co.uk/FileShare/3.png

        Ideally, I would like to make it level with the text.

        Any help you could offer would be very greatly appreciated.

        1. It has done it again! tags (without the underscores) is what I meant. I can’t stop them being parsed away! To make my code boxes, I wrap my text in p_r_e tags, like so:

          My code

          You are very patient and kind πŸ™‚

    1. I think I do, those screenshots cleared everything up for me. Looks like Motion isn’t wrapping your lines, it actually cuts them off. If you’re using the PRE tag the “code box” has a width of 600 pixels. I think the author did this so that it will fit nicely on post pages which include a sidebar. If you’re only using PRE tags on full-width pages without a sidebar, you can add this to the bottom of your style.css file:

      pre {width: 940px; overflow: scroll;}

      This will get rid of cutoffs and will make the box fit nicely underneath and above your text. Note however that this will now result in cutoffs on post pages with a sidebar. Let me know if this works for you.

      Code in comments is difficult – for security reasons WordPress strips most tags out. You can usually put them in backticks and then they won’t be executed. Here’s a screencast I did about the subject: https://wpguru.co.uk/2011/01/workshop-how-to-post-source-code-in-your-comments/

      1. Thank you so much! I would never have solved this without you! In the end, it still wasn’t quite working as I wanted (much better, but not perfect), so I compared the style.css files of TwentyEleven and Motion, and realised that the only significant change was the word-wrap property, and that was what was causing the problem. So in the end, I used

        pre {Width: 935px; white-space: pre;}

        (there was some minor clipping and 940, but nothing 935 couldn’t fix).

        I am so, so grateful for your help. I really would never have done this without you. Thank you so much again πŸ™‚

        Richard

  8. Is it possible to set the header of the theme to be fixed as well… and only have the content scroll?? I am not sure how he is getting the transparent scrolling to work in the first place so I am unsure if its even possible.

    Thanks

    Dave

    1. Hi Julian,

      you’re very welcome. I’ve never looked at how Motion deals with comments, so thank you for bringing up your problem. The text differences are indeed very ugly. The great news is all we need is a couple of lines at the bottom of style.css to rectify the issue:

      .postmetaauthor, .bypostauthor {
      font-size: 1.0em;
      }

      The original value is 0.8em which means comments by the post author get displayed smaller than comments by anybody else. This will also fix a problem with nested comments (replies to replies) which get smaller and smaller without it. Hope it works for you πŸ˜‰

Add your voice!