WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Thirteen
Decrease margin between posts (11 posts)

  1. ringmar
    Member
    Posted 8 months ago #

    I'm trying to decrease the space between the posts on the first page.
    There is "huge" amount of empty space before next post appears.
    How do i decrease it?

    If there's a solution to change the setting on the different categories that would be the best since I'd like to make different adjustments on different categories.

    Thank you for your help!

    Nils

  2. ringmar
    Member
    Posted 8 months ago #

    Sorry, I meant formats, I'd like to adjust the space on different formats.

    N

  3. esmi
    Forum Moderator
    Posted 8 months ago #

    Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

  4. CrouchingBruin
    Member
    Posted 8 months ago #

    ringmar, can you please post a link to your site? It is always easier to offer suggestions when we can examine the site directly.

  5. ringmar
    Member
    Posted 8 months ago #

    hi!

    http://www.djurdansen.com

    @esmi. How do I convert my changed parent theme into a child theme?

    Thanks!

    Nils

  6. CrouchingBruin
    Member
    Posted 8 months ago #

    How do I convert my changed parent theme into a child theme?

    I believe that you would first create your child theme and then copy over any files which you've changed from the parent theme into the child theme's folder. esmi will correct me if I'm wrong. And then you would activate your child theme.

    To change the spacing between sections (actually, between posts), you just change the padding property for the hentry class. Currently, the rule is this:

    .hentry {
    	padding: 40px 0;
    }

    Which means 40px padding on the top and bottom (and no padding on the left & right). You can make the padding smaller by adding a rule like this to the end of your child theme's style.css file, or by using a CSS plugin:

    .hentry {
    	padding: 20px 0px;
    }

    This would give you padding on the top & bottom of 20px. Adjust the value the way you want.

  7. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    I believe that you would first create your child theme and then copy over any files which you've changed from the parent theme into the child theme's folder.

    That applies to .php files EXCEPT functions.php.

    The style.css file in the child theme should contain ONLY changes - not a copy of the entire file from the parent theme. You can use a file comparison program to find the changes you've made.

  8. CrouchingBruin
    Member
    Posted 8 months ago #

    Thanks for the correction, WPyogi, I should have remembered about style.css & functions.php.

  9. ringmar
    Member
    Posted 7 months ago #

    Hi!
    It works like a charm! Thank you so much.
    No when I've done a child theme of it (feels much more secure) The only thing that's changed is that the background is not 100% in width, and it was before. It like it to fill out to the width of the screen.

    Another problem I've experienced is that if I have a header picture with a background color I can't change the background color of the header area all the way out. Only the recommended header width.

    I'm so glad for you're help so far!

    /Nils

    Here is my css.

    /**
    * 3.0 Basic Structure
    * ----------------------------------------------------------------------------
    */

    .site {
    background-color: #ffffff;
    border-left: 0px solid #0096db;
    border-right: 0px solid #0096db;
    margin: 0 auto;
    width: 100%;
    }

    .site-main {
    position: relative;
    }

    .site-main .sidebar-container {
    height: 0;
    position: absolute;
    top: 40px;.site {
    background-color: #ffffff;
    border-left: 0px solid #0096db;
    border-right: 0px solid #0096db;
    margin: 0 auto;
    width: 100%;
    }

    .site-main {
    position: relative;
    }

    .site-main .sidebar-container {
    height: 0;
    position: absolute;
    top: 40px;
    z-index: 1;
    }

    .site-main .sidebar-inner {
    margin: 0 auto;
    }navbar
    z-index: 1;
    }

    .site-main .sidebar-inner {
    margin: 0 auto;
    }

    /**
    * 4.0 Header
    * ----------------------------------------------------------------------------
    */

    /**
    * 4.1 Site Header
    * ----------------------------------------------------------------------------
    */

    .site-header {
    position: relative;
    background-color: #0096db;
    }

    .site-header .home-link {
    color: #0096db;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;

    }

    .site-header .site-title:hover {
    text-decoration: underline;
    }

    .site-title {
    font-size: 60px;
    font-weight: bold;
    line-height: 1;
    margin: 0;
    padding: 58px 0 10px;
    }

    .site-description {
    font: 24px "Source Sans Pro", Helvetica, sans-serif;
    margin: 0;
    }

  10. ringmar
    Member
    Posted 7 months ago #

    now it works... Strange. But the width on the menu is still not wide enough.

    Thank you for your help!

    N

  11. CrouchingBruin
    Member
    Posted 7 months ago #

    But the width on the menu is still not wide enough.

    What exactly do you mean by not wide enough? All of the menu items appear at the top in a row. Do you want to space the menu items more evenly across the width?

    Try adding this CSS to the end of your child theme's style.css file:

    ul.nav-menu {
    	padding: 0;
    }
    .nav-menu li {
    	width: 19%;
    }

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.