Change Width of a Single Post

  • Resolved pat7047

    (@pat7047)


    14 years, 4 months ago

    Hello,

    I’ve been racking my brain about this for an hour or so. I’m trying to fix the width of single posts on my blog.

    Example: https://pinglio.com/2010/09/review-new-twitter-is-here/

    As you can see, I took away the sidebar in single posts. I want to extend the content of a single post to the right as much as possible. It’s just empty white space that I would like to use.

    Any suggestions? Thanks in advance.

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

  • This template is using the same post styles so you will have to code a another post style for this post.

    If you make any changes post in style.css it will mesh up other posts that are with sidebar.

    I think you could use the page ID element thing.
    Let me show you:

    <div class="post" id="post-<?php the_ID(); ?>">

    When you add that php code it automaticaly assigns an unique ID to each post… that you can find in the source code..

    Use that ID to style only that post with that same generated ID.

    Hope im making sense, im really not good with WP, just learned that yesterday lol

    Thread Starter pat7047

    (@pat7047)

    Thanks for your replies govpatel and Ramzii.

    I want each single post page (this, past, and future posts) to be formatted with a greater width. Not just that single post. Any other ideas?

    Yes, 2 actually:

    1. To make live easier for yourself start using Firebug, it is a tool webdesigners use to look up code parts of any website, just right click and press “inspect element” to see where its located and what its CSS settings are. FIREFOX + FIREBUG = REALLY EASY

    2. Your solution, if im not mistaken:

    #content {
    margin:0 200px 0 0 !important;

    Find this, and fiddle with the numbers.

    0 = top
    200 = right
    0 = bottom
    0 = left

    im guessing you do know what a margin is.
    good luck

    Thread Starter pat7047

    (@pat7047)

    Thanks Ramzii. Thanks for the suggestion about Firebug. That add-on is awesoeme!

    You were definitely on to something with the 

    #content {
margin:0 200px 0 0 !important;

    I tried messing with the margin numbers. I noticed that if I leave them all at 0 it’s exactly what I want. However, I only want to apply

    #content {
margin:0 0 0 0 !important;

    to single post pages. Not the index.php.

    Any suggestions for separating the code? One for single posts and one for the index.php ? Thanks again. You’ve been so helpful.

    dont mention it, this wordpress learning this has been keeping me up all night.. pff, the stuff that ive seen tonight. jeez :’)

    anyways.. im not a pro, so you might wanna consider backing things up before doing this. Real this below, try understand it for yourself.
    I am sure there are better ways, but im a newb.

    What I would do is:

    Try to give all the single posts a class, how?

    1. Open up single.php
    2. Locat the <body> tag
    3 Replace it with: <body <?php body_class(); ?>>

    4. Now look at your source code.
    5. Notice all your single pages have a UNIQUE CLASS.

    6. Use those ID’s in you .CSS file to give them a mark-up

    This:
    <body <?php body_class(); ?>>

    produces this on my front page:
    <body class=”home blog logged-in”>

    and this on another Page:
    <body class=”page page-id-228 page-template page-template-no-sidebar-php logged-in”>

    and this on a single post:
    <body class=”single postid-503 logged-in”>

    and this on a category archive:
    <body class=”archive category category-general-spew logged-in”>

    … I think you get the idea.

    7. Something like:

    #content.post-id-02 {your mark-up}

    Thread Starter pat7047

    (@pat7047)

    Thanks for the suggestion Ramzii. However, that would require me alter each single post manually. I want to create something in single.php that will automatically set the width in a single post to expand fully.

    I was thinking using a php If statement in my single.php file:

    <?php if ( is_single() ) { ?>

<?php } ?>

    However I don’t know what to put in between the If statement. I was thinking some kind of CSS that would say “set width to 0”.

    Any ideas?

    Thread Starter pat7047

    (@pat7047)

    Ah. I figured it out. For anyone else who cares to know, I added this to my single.php:

    <?php if ( is_single() ) { ?>

<style type="text/css" media="screen">
#content {
margin:0 0 0 0 !important;
padding:10px 20px 0px 0;
}
</style>

<?php } ?>

    Thanks for your help, Ramzii!

    Pat

    Sweet, that can actually help me out! No problem and thanks for posting your answer mate, peace

    good day!
    well i also was facing this problem my posts width
    anyway, solution is
    in your style.css

    search for .post-wrap {
    then under it you will see few code lines
    here is my code for my page i share

    .post-wrap {
    border: 1px solid #CDCDCD;
    margin-bottom: 15px;
    padding: 10px 10px 0 10px;
    background: #F6F3EF;
    }
    you should add after( margin-bottom ) and make it like this

    .post-wrap {
    border: 1px solid #CDCDCD;
    margin-bottom: 15px;
    margin-left: -70px;
    margin-right: -70px;
    padding: 10px 10px 0 10px;
    background: #F6F3EF;
    }
    I wish i could help
    Amir

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Change Width of a Single Post’ is closed to new replies.