2014 theme 'categories'

• 

  frankchurch2015 · Member · Mar 28, 2016 at 8:10 pm

  • Copy link
  • Add topic to favorites

  moving categories wordpress blog 2014 theme from the ‘top’ (beginning) to the bottom. Would like to lead with title of post, thanks, Frank

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

• 

  thesacredpath · Member · Mar 30, 2016 at 3:38 am

  • Copy link

  @frankchurch2015, the title, date and categories are inside of a separate div from the post content, and there isn’t an immediate overall container div around all the post related items. What this means, is that the way the HTML and CSS are structured means it isn’t really possible to do this and have acceptable results with CSS alone.

• 

  frankchurch2015 · Member · Mar 30, 2016 at 5:34 am

  • Copy link

  Thank you both for your thoughtful replies/comments. I’m neither skilled in html or CSS, so I turned to Google searches. Found 2 conversations here about moving/deleting the categories from the top of the 2014 theme. This was one response using CSS:

  header.entry-header {
  position: static;
  }
  span.cat-links {
  position: absolute;
  bottom: 100px;
  right: 270px;
  }

  It did the trick BUT 2 issues arose: (1) using featured image setting, the Title is too far up, the image partially blocks it (w/o using featured images, thee Title is perfect; and (2) the Categories are not visible.

  Any advice on modifying the CSS code to rectify these problems would be most helpful and it would solve my query…close, so very close, thanks again.

• 

  thesacredpath · Member · Mar 30, 2016 at 6:18 am

  • Copy link

  This is one of the reasons I don’t recommend this on Twenty Fourteen due to the way the theme is designed, there is no way to do this cleanly without resorting to many lines of code and Media Queries to adjust things at different widths, and with about 100 different widths for phones/tablets alone, this is a daunting thing. About the best we can do is the following.

  header.entry-header {
    position: static !important;
    margin-top: 0 !important;
  }
  span.cat-links {
    position: absolute;
    bottom: 0;
    left: 28%;
    max-width: 474px;
  }
  .full-width .hentry {
    position: relative;
    padding-bottom: 50px;
  }

• 

  frankchurch2015 · Member · Mar 31, 2016 at 7:46 am

  • Copy link

  This worked! Thank you, have seen the expected result on desktop/laptop, tablet and cell phone. Appreciate the help.

• 

  thesacredpath · Member · Mar 31, 2016 at 7:51 am

  • Copy link

  Hooray, and you are welcome.