WordPress.org

Forums

Twenty Fourteen
padding margins between posts. how can i reduce the spcae between posts? (11 posts)

  1. PeaceNetLive.com
    Member
    Posted 11 months ago #

    Hello & thank you. I am new to css & know nothing. I have a june 20th deadline to migrate & design a new site before that date.

    i need some help with this pleas.... i am completly lost.

    i am using twenty fourteen default the default template.

    instead of a child's template, I have installed, Custom CSS Manager Version 1.5.2 | By MyWebsiteAdvisor
    is this sufficient?

    and if so now how can i make the posts closer together & the background a different color other than white?

    Also when clicking on categories, the old blog indexes the blog roll post's as link's instead of opening up a page where the videos' show? is there a plug in that will categorize the posts' as link's Page instead of video page?

    trying to make the new site http://peacenet1.com

    look similar too the Old site
    http://peacenetlive.com

  2. CrouchingBruin
    Member
    Posted 11 months ago #

    So you have about three weeks to finish the migration. That should be plenty of time, as long as you can devote a certain number of hours each day. What you should do, though, is learn some basic HTML and CSS. It won't take too long to learn HTML & CSS, you can probably bust through a couple of tutorials in one day. I like the ones at W3Schools. The HTML tutorial is here and the CSS tutorial is here.

    Then you should learn how to use a web debugging tool like Firebug (a free extension for Firefox) or Chrome Developer Tools, which comes built-in with Chrome. What a web debugging tool will allow you to do is see immediately what CSS rules are being applied to a particular web element so you can modify it.

    OK, let's get to your questions.

    instead of a child's template, I have installed, Custom CSS Manager Version 1.5.2 | By MyWebsiteAdvisor. is this sufficient?

    Yes, Custom CSS Manager is perfect, I use it on my sites as well for custom CSS.

    how can i make the posts closer together

    Each post has a padding-top property that adds spacing at the top, and a margin property which adds space at the bottom. Add this rule to Custom CSS Manager (Appearance > Custom CSS Manager):

    .list-view .site-content .hentry {
       padding-top: 48px;
       margin-bottom: 44px;
    }

    The values in the rule above are what is currently being used, so adjust the numbers downwards to whatever values you think makes the spacing look good.

    the background a different color other than white?

    Add this CSS rule:
    .site,
    .site-content .entry-content,
    .site-content .entry-summary,
    .page-content,
    .site-content .entry-header,
    .site-content .entry-meta
    {
       background-color: #27C625;
    }

    This changes all the white to the same green color as the original site.

    is there a plug in that will categorize the posts' as link's Page instead of video page?

    You can hide the videos from the category page with some CSS. The titles will then be the links to the actual post:
    body.category .entry-content {
       display: none;
    }
  3. PeaceNetLive.com
    Member
    Posted 11 months ago #

    thank you for the tutorial's. i will have a look at them.
    well it looks awsome. The codes worked except

    body.category .entry-content {
    display: none;
    }

    ma by it didn't work yet cause i haven't exported the categories or tag's yet from the old blog???

    i need the archives, tag's & the categories page to load up as link posts.
    when clicking on archives for example April 2014

    http://ipodcast.peacenetworklive.com/2014/04.aspx

    April 2014
    http://peacenet1.com/?m=201404

    1. how can i make the post title & meta link's, the links under the tittle bold or not bold, black or white and when hovering over link red?

    2. how do i take out word press link's?

    thank you and then i will be fine for awhile . while i study the tutorials.

    peace.

  4. @PeaceNetLive.com? Unless there's spam, abusive behavior or something that needs adjusting such as bad code formatting please do not tag your topic modlook again.

    That tag is not to be used that way.

    http://codex.wordpress.org/Forum_Welcome#Contacting_the_Moderators

  5. CrouchingBruin
    Member
    Posted 11 months ago #

    i need the archives, tag's & the categories page to load up as link posts.

    Change the last rule to this (don't add an 's' to the end of the word archive):

    body.archive .entry-content {
       display: none;
    }

    1. how can i make the post title & meta link's, the links under the tittle bold or not bold, black or white and when hovering over link red?

    Add these rules:

    body.archive .entry-title a {
       color: #000;
       font-size: 14px;
       font-weight: bold;
    }
    
    body.archive .entry-title a:hover {
       color: #fff;
    }
    
    body.archive .entry-meta a {
       color: #000;
       font-size: 16px;
       font-weight: normal;
    }
    
    body.archive .entry-date a:visited {
       color: #f00;
    }

    The first rule sets three properties for the entry titles, the color (black), the font size, and font weight. The values for size & weight I set to the same values as the original site, but of course feel free to change them to other values that you think might look better.

    The second rule sets the properties of the entry title when the mouse is hovered over it. In this case, the only thing that changes is that the font color is set to white (#fff).

    The third rule sets the properties of the meta links under the entry title. Again, the values were copied from the original site.

    The last rule sets the color of the entry date for links that were previously visited to red.

    2. how do i take out word press link's?

    Are you referring to the links in the Meta section of the left sidebar or the link down at the very bottom that says Proudly powered by WordPress?

    If you want to take out all of the links in the Meta section of the sidebar, you can go to your widgets area (Appearance > Widgets from the admin dashboard) and delete the Meta widget. You just have to remember that if you want to login to the admin dashboard, you want to go to either of these addresses:
    http://peacenet1.com/wp-admin
    http://peacenet1.com/wp-login.php

    If you want to hide the Proudly powered by WordPress at the bottom, add this CSS:

    .site-info {
       display: none;
    }
  6. PeaceNetLive.com
    Member
    Posted 10 months ago #

    i added these rules to the custom css manager.
    again

    1. i am trying to get the page to load up as link's in the categories, archives & tag's. etc trying to get it too lookk like this
    http://ipodcast.peacenetworklive.com/2014/05.aspx
    instead of a video page?
    http://peacenet1.com/?m=201405
    but it's loading up as a video page still?

    2. The WordPress links are still on the bottom of the page?

    3. Can i reduce the size & padding or margin, change the color, underneath the video's?

    This is what i have added so far

    .list-view .site-content .hentry {
      padding-top: 0px;
      margin-bottom: 0px;
    }
    .site,
    .site-content .entry-content,
    .site-content .entry-summary,
    .page-content,
    .site-content .entry-header,
    .site-content .entry-meta
    {
      background-color: #27C625;
    }
    body.archive .entry-title a {
      color: #FFFFFF
      font-size: 14px;
      font-weight: bold;
    }
    
    body.archive .entry-title a:hover {
      color: #FF0000
    }
    
    body.archive .entry-meta a {
      color: #000;
      font-size: 16px;
      font-weight: normal;
    }
    
    body.archive .entry-date a:visited {
      color: #f00;
    }
    .site-info {
       display: none;
    }
  7. CrouchingBruin
    Member
    Posted 10 months ago #

    When I look at your custom CSS, this is what I see:

    .list-view .site-content .hentry {
      padding-top: 0px;
      margin-bottom: 0px;
    }
    .site,
    .site-content .entry-content,
    .site-content .entry-summary,
    .page-content,
    .site-content .entry-header,
    .site-content .entry-meta
    {
      background-color: #27C625;
    }
    body.archive .entry-title a {
      color: #FFFFFF
      font-size: 14px;
      font-weight: bold;
    }
    
    body.archive .entry-title a:hover {
      color: #FF0000
    }
    
    body.archive .entry-meta a {
      color: #000;
      font-size: 16px;
      font-weight: normal;
    }
    
    body.archive .entry-date a:visited {
      color: #f00;
    }
    body.category .entry-content {
    display: none;
    }
    }

    There is an extra right brace at the very end that needs to be removed.
    It's missing the following rules. Add these to the end:

    body.archive .entry-content {
       display: none;
    }
    .site-info {
       display: none;
    }
  8. PeaceNetLive.com
    Member
    Posted 10 months ago #

    Thank you so much. you are Awsome!!!

    Now i need to reduce the meta tag link's underneath the video post's. & the size of the text link's on the Archives, categories & meta tag link's page's ?

    http://peacenet1.com/?p=10167

    1. How can i Reduce the size of the text link's on the Archives, categories & meta tag link's page's, but still keep the text size larger on the title posts?
    2. is there a way to make 100 text link's display instead of only 10 at a time on the Archives, categories & meta tag link's page's ?
    3. How can i reduce the size of the meta tag link's?(Audioslave) (i am the Highway)
    4. How can i reduce the space, padding & margin's? under the video posts between the video & meta tag link's? (audioslave) (i am the Highway)
    5. also how to make the meta tag links another color.
    6. is there a way to change the author from chronicat420 to PeacNet1.com?

  9. CrouchingBruin
    Member
    Posted 10 months ago #

    1. How can i Reduce the size of the text link's on the Archives, categories & meta tag link's page's?

    There is already a rule in place for that, but you have a syntax error:

    body.archive .entry-title a {
      color: #FFFFFF
      font-size: 14px;
      font-weight: bold;
    }

    You need to add a semi-colon after the color value so it looks like this:
    color: #FFFFFF;
    That's the reason why this rule isn't having any effect and the font size isn't changing.

    2. How can i reduce the size of the meta tag link's?(Audioslave) (i am the Highway)

    This rule should allow you to modify the appearance of the tag links:

    .entry-meta .tag-links a {
      color: #FFFFFF;
      font-size: 11px;
      font-weight: 700;
    }

    The values listed are what's currently in effect. You'll want to change the value of font-size to make them smaller.

    3. How can i reduce the space under the video posts between the video & meta tag link's? (audioslave) (i am the Highway)

    There are a couple of different properties which affect the spacing. Add these (values are what's currently in effect) and change either or both values:
    .site-content footer.entry-meta {
      margin-top: 12px;
    }
    .site-content .entry-content p {
      margin-bottom: 24px;
    }

    If you need to push them up even higher, you can change the value for the footer to a negative number.

    4. also how to make the meata tag links another color.

    See answer to #2 above. Current value (#FFFFFF) is white.

  10. PeaceNetLive.com
    Member
    Posted 9 months ago #

    1. Now i need the Categories, Archives and Tags to come up in increments of 100 link post's per page instead of 10 link post's to a page?

    http://peacenet1.com/?m=201406
    http://peacenet1.com/?cat=418

    2. Now the meta tag links have been reduced on the main parent page but they are still the same size on the Archive, Category & meta tag link's page's how do i reduce the font size on the other page's accordingly?

    here they are small
    http://peacenet1.com/
    here they are huge
    http://peacenet1.com/?cat=418

    3, how do i take out all the links except for the tittle link on the
    Categories, Archives and Tags page so that when clicking on Categories, Archives and Tags page, the only thing that loads are the tittle links?? its repetitive & just makes the page load slower.
    thank you so much.

  11. CrouchingBruin
    Member
    Posted 9 months ago #

    1. Go to Settings > Reading and change Blog pages show at most from 10 to 100.
    2. Take this rule, which is already in your custom CSS:
      .entry-meta .tag-links a {
        color: #FFFFFF;
        font-size: 8px;
        font-weight: 700;
      }

      And add an additional selector at the beginning so it looks like this:

      body.archive .entry-meta .tag-links a,
      .entry-meta .tag-links a {
        color: #FFFFFF;
        font-size: 8px;
        font-weight: 700;
      }

      This should make the meta tags on all pages look the same.

    3. It's not the links that are making the pages load slowly, it's the hidden content. That is, the CSS that I gave you previously for hiding the videos on the archive-type pages (which includes category & tag pages) only hides the embedded videos from view; they still get loaded behind the scenes. And the load times will only get worse if you increase the number of posts per page from 10 to 100 (about 10 times worse, of course).

      The only way to prevent the videos from actually being loaded is to:
      1. Create a child theme.
      2. Make a copy of content.php into your child theme folder.
      3. Edit content.php to only display the entry content if the page isn't an archive.

Reply

You must log in to post.

About this Theme

About this Topic