Re-design posts
-
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.
-
Probably, though you’d likely have to know some CSS and HTML coding. Specifics would depend on the theme you are using.
Do you know the file locations where the current posts are styled?
Depends on the theme.
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?
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 🙁 .
The topic ‘Re-design posts’ is closed to new replies.