• Hello,
    Is it possible to change the look of posts?
    What I would like to do is make the posts look like books (on the post page, category page etc.) So rather than the posts showing as a square with the title and excerpt I would like the posts look like books on a bookshelf.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Probably, though you’d likely have to know some CSS and HTML coding. Specifics would depend on the theme you are using.

    Thread Starter eVersatile

    (@eversatile)

    Do you know the file locations where the current posts are styled?

    Depends on the theme.

    Thread Starter eVersatile

    (@eversatile)

    I am using the Xphoria theme. Would this section of script be what I’m looking for?

    .blog-post { padding-bottom:60px; margin-bottom:10px; display:table; width:100%; border-bottom:1px solid #262626; }
    .single-post .blog-post { padding-bottom:50px; }
    .post-title { margin-bottom:50px; position:relative; border-bottom:1px solid #262626; }
    .post-title h1 { line-height:58px; margin:0px; padding:20px 0px; }
    .post-title a { color:#feff89; font-size:48px; font-family:Dosis; }
    .comments-number { position:absolute; right:0px; bottom:20px; height:35px; text-align:right; font-size:30px; line-height:1.0em; padding-left:38px; background-image: url( "images/comment.png" ); background-repeat: no-repeat; background-position:0px 4px; }
    .post-category { position:absolute; left:0px; bottom:-12px; padding-right:3px; background:#1c1919; text-transform:uppercase; }
    .post-category a { font-size:12px; font-weight:bold; color:#ffffff; line-height:1.0em; padding:1px 4px 1px 4px; background:#d12020; }
    .more-link { float:right; margin-top:30px; }
    .single-post .blog-post { margin-bottom:50px; }
    .subtitle { margin-bottom:5px; font-size:22px; font-weight:500; margin-bottom:50px; }
    .text img, .text .wp-caption { max-width:750px!important; height:auto!important; }
    .text .entry p { margin-bottom: 25px; }
    .text .entry ul { list-style-type:circle; margin:0 0 20px 30px; }
    .text .entry ol { list-style-type: decimal; margin:0 0 20px 30px; }
    .text .entry p a, .comment-entry p a { text-decoration:underline; transition: all 300ms ease-in; }
    .text .entry p a:hover, .comment-entry p a:hover { color:#f98536;}
    div.thumbnail { margin:7px 27px 0px 0; float:left; text-align:center; }
    .no-thumbnail { width:90px; height:110px; float:left; position:relative; overflow:hidden; margin:8px 0px 0px 0; }
    div.thumbnail span { padding:3px 5px; background:#d12020; font-size:11px; text-align:left; float:left; line-height:1.0em; }
    div.thumbnail img { border:14px solid #131111; display:block; }
    .blog-post-left { width:65px; text-align:center; position:absolute; background:#1c1919; padding-right:12px; padding-bottom:12px; border-right:14px solid #131111; border-bottom:14px solid #131111; }
    .no-thumbnail .blog-post-left { border-right:none; border-bottom:none; width:95px; background:none; }
    .blog-post-left-date { width:65px; padding:8px 0; background:#232323; border-top:1px solid #333232; border-left:1px solid #333232; border-right:1px solid #333232; }
    .blog-post-left-month { font-size:18px; line-height:1.1em; text-transform:uppercase; }
    .blog-post-left-day { font-size:36px; line-height:1.1em; }
    .blog-post-left-author { background:#6c2b9d; font-size:13px; border:1px solid #934cc8; width:65px; }
    .prev-post a, .next-post a { display:block; padding:7px 11px; margin-top:40px; margin-bottom:20px; border-radius:6px; font-size:11px; background:#e8e8e8;  }
    .post-details-tags a { font-size:16px; padding:5px 9px; background:#202020; border:1px solid #2c2b2b; }

    Found within /wp-content/themes/Xphoria/style.css

    I would not recommend modifying any theme files directly as your changes will be lost when the the theme is updated – instead see:

    http://codex.wordpress.org/Child_Themes

    As to the specifics, no idea – it depends on what you are trying to do. Just looking at CSS code doesn’t show anything very useful – as it’s the combination of CSS and the HTML of your theme(and WP core and any plugins) that determines how it looks.

    Since that’s a commercial theme, it’s next to impossible for people here to provide specific help. Have you asked the developers of the theme?

    Thread Starter eVersatile

    (@eversatile)

    I usually would do that but I don’t really plan on updating this theme. The developer of the theme has been absolutely no help, so I’ve just been changing the code to make it how I’d like it

    I don’t really plan on updating this theme.

    You will likely eventually run into compatibility problems with WP and/or plugins so probably not a good plan 🙁 .

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Re-design posts’ is closed to new replies.