Need help? Check out our Support site, then


Relocate sticky on top of the Image-post

  1. 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 analollato.wordpress.com.

  2. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic