Relocate sticky on top of the Image-post

• 

  analollato · Member · Oct 21, 2012 at 9:22 pm

  • Copy link
  • Add topic to favorites

  Hi everyone, I’m brand new on WordPress and I would like to move my title and byline on top to the picture in my Origin Theme.
  At the moment is positioned on left-bottom.

  I would like to see exactly how appear in the post’s page.

  Here is the CSS code:

  /* Posts
  ————————————————————– */

  .hentry {
  border-bottom: 1px solid #e5e5e5;
  float: left;
  font-size: 1em;
  margin: 0 0 20px 0;
  padding: 0 0 5px 0;
  width: 100%;
  }

  .single .hentry {
  float: left;
  margin: 0 0 30px 0;
  position: relative;
  width: 100%;
  }
  .featured {
  margin-bottom: 20px;
  }
  .sticky .sticky-header {
  float: left;
  width: 30%
  }
  .sticky .byline {
  clear: left;
  }
  .sticky .entry-summary {
  border-left: 1px solid #e5e5e5;
  float: right;
  padding-left: 2.34375%;
  width: 65%;
  }
  .hentry .featured-thumbnail {
  margin-bottom: 25px;
  }
  .hentry .thumbnail {
  float: left;
  margin: 3px 3.90625% 20px 0;
  width: 100%;
  }

  /* Post titles
  ————————————————————– */

  .hentry .entry-title {
  border: none;
  color: #333;
  font-size: 1.230769230769231em; /* 16 / 13 = 1.230769230769231 */
  line-height: 1.3em;
  margin: 0 0 0.6em 0;
  padding: 0px;
  text-transform: uppercase;
  word-spacing: 2px;
  word-wrap: break-word;
  }
  .single .entry-title,
  .page .entry-title {
  font-size: 1.846153846153846em; /* 24 / 13 = 1.846153846153846 */
  margin-bottom: 0.625em;
  }
  .page .entry-title {
  color: #ccc;
  }
  .page .entry-title,
  .single-attachment .entry-title {
  margin-bottom: 1.2em;
  }
  .search .page .entry-title {
  font-size: 1.23077em;
  }
  .entry-title a,
  .entry-title a:visited {
  color: #222;
  }
  .entry-title a:hover {
  color: #dd5424;
  }
  h1.page-title {
  font-size: 180%;
  margin-bottom: 30px;
  }

  __________________________________________

  Anyone can help me?

  Thanks

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

• 

  designsimply · Member · Oct 26, 2012 at 4:47 pm

  • Copy link

  You can move the sticky post titles above the featured image on the Origin theme home page using absolute positioning. Here is an example to get you started:

  .sticky {
  	padding-top: 100px;
  	position: relative;
  }
  
  .sticky .sticky-header {
  	position: absolute;
  	top: 0;
  	width: 97%;
  	padding: 3%;
  }
  
  .sticky .entry-summary {
  	border-left: 0;
  	width: 97%;
  	float: none;
  }

  Adjust the numbers until it looks good to you.