How to: Disable the Infinity Scroll Footer by Jetpack in twentyfourteen theme

Hello there,

If you enabled Infinite Scroll on you WordPress blog, you may have noticed the footer that´s showing up when you´re scrolling down a bit. It usually says: „<Your Blog Name> Proudly powered by WordPress.com Theme: twentyfourteen.“

Now some people may find this quite cool, but I just think it´s annoying. That´s why I´m going to show you how to disable it.

Step 1: Go to the Plugin Editor

This is the easiest thing to do (Well, actually everything you have to do is quite easy… ^^). To get to the editor, just switch to admin view, then go to Plugins>Editor. That´s it!

Step 2: Locate the /infinity.css

First, you´ll need to select the Jetpack plugin in the top right corner.  Then all files contained in this plugin will show up in the bar next to the text editor.

The file we want to edit is named jetpack/modules/infinite-scroll/infinity.css  . To find it, just open your browser search (Ctrl+F) and type in the name. Then click on the highlighted text. The first line in the text editor should now be
„/* =Infinity Styles
————————————————————– */“.

Step 3: Edit the infinity.css

Note: I´m not a professional programmer (actually, I´m not a programmer at all :/). I found this solution out with logic and one piece of code. It will work fine, but there certainly is a better way to solve this problem!

In the file, scroll down to this line:

/**
* Footer
*/

Now you´ll see many code blocks similar to this:

#infinite-footer.something {
some arguments: some value;
}

To disable the footer, you´ll have to type „display: none;“ under every „some arguments: some value;“ you can find until this line:

/**
* Hooks to infinity-end body class to restore footer
*/

Now, your piece of code should look like this:

/**
 * Footer
 */
 #infinite-footer {
 position: fixed;
 bottom: -50px;
 left: 0;
 width: 100%;
 display: none;
 }
 #infinite-footer a {
 text-decoration: none;
  display: none;
 }
 #infinite-footer .blog-info a:hover,
 #infinite-footer .blog-credits a:hover {
 color: #444;
 text-decoration: underline;
 display: none;
 }
 #infinite-footer .container {
 background: rgba( 255, 255, 255, 0.8 );
 border-color: #ccc;
 border-color: rgba( 0, 0, 0, 0.1 );
 border-style: solid;
 border-width: 1px 0 0;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 margin: 0 auto;
 overflow: hidden;
 padding: 1px 20px;
 width: 640px;
 display: none;
 }
 #infinite-footer .blog-info,
 #infinite-footer .blog-credits {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 line-height: 25px;
 display: none;
 }
 #infinite-footer .blog-info {
 float: left;
 overflow: hidden;
 text-align: left;
 text-overflow: ellipsis;
 white-space: nowrap;
 width: 40%;
 display: none;
 }
 #infinite-footer .blog-credits {
 font-weight: normal;
 float: right;
 width: 60%;
 display: none;
 }
 #infinite-footer .blog-info a {
 color: #111;
 font-size: 14px;
 font-weight: bold;
 display: none;
 }
 #infinite-footer .blog-credits {
 color: #888;
 font-size: 12px;
 text-align: right;
 display: none;
 }
 #infinite-footer .blog-credits a {
 color: #666;
 display: none;
 }
/**
 * Hooks to infinity-end body class to restore footer
 */

If you´re done, just save the file and you´ll be rid of that footer forever (or until the next theme update ^^).

 


Kommentare

2 Antworten zu „How to: Disable the Infinity Scroll Footer by Jetpack in twentyfourteen theme“

  1. I edited the php file instead as wanted just to remove the credits so just open that up and remove the ·$credits variable references 3 of them.

    1. Thank you for this tip! If one only wants to remove the credits, this sounds like the way to go 🙂

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.