1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Change margin's width in WordPress.

Discussion in 'CSS' started by nisarg_kolhe, Nov 1, 2011.

  1. #1
    My theme's margin's width is very less and that's why there is very less space for text and every pictures I add shrink :( due to margins. I tried editing style.css but whatever I found didn't match my theme :( Help me guys! BTW the theme is "Retreat" and I'm not able to post the link to my blog here b'coz of restrictions. I tried asking this in Wordpress's forum but they gave me unhelpful responses...If you want I can give you my style.css
     
    Last edited: Nov 1, 2011
    nisarg_kolhe, Nov 1, 2011 IP
  2. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #2
    Hi, can you post the style.css file and also the source code for the page you want to change? Also are there any more .css files as some themes may have more than one .css file.
     
    benny306, Nov 1, 2011 IP
  3. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here it is(Its very big so I was not able to post.) - https://docs.google.com/document/pub?id=1tjBQCaIEwoAcFyui1bJcWKlqb9v1zjBlLqs6BVrg3UM
     
    nisarg_kolhe, Nov 1, 2011 IP
  4. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Guys please post...its urgent!
     
    nisarg_kolhe, Nov 2, 2011 IP
  5. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #5
    It's difficult to see what needs to be changed without seeing your site, as I'm not sure what you want to do. I think you might want change the post.middle width to 440px and then margin-right to 10px. This will increase the size of the post and decrease the margin between the .meta on the right. You could also change .meta size to something smaller and keep increasing your post.middle div.
     
    benny306, Nov 2, 2011 IP
  6. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #6
    **Correction post.middle to 430px and margin-right to 10px.
     
    benny306, Nov 2, 2011 IP
  7. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Where to write it? can pls tell the specific line? I'm new...and b'coz of less comments I am not able to add my site btw still here it is - dev2dayx10mx ,Put (.) between x10 and so it would be ---.x10.mx
     
    nisarg_kolhe, Nov 3, 2011 IP
  8. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #8
    find this line in your css file and change the margin-right and width. Make sure to have a backup of your css file saved before you start playing around, as I'm still not sure exactly what you want to achieve.

    .post .middle { float: left; width: 410px; padding: 30px 0 0 0; border-top: 1px dashed #d3d3d3; margin-right: 30px; overflow: hidden; }
     
    benny306, Nov 3, 2011 IP
  9. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #9
    also find this line and change margin-right to 10px or something smaller:

    .post .icon { float: left; padding-top: 30px; border-top: 2px solid #d3d3d3; margin-right: 30px; }
     
    benny306, Nov 3, 2011 IP
  10. kishanterry

    kishanterry Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #10
    Hi nisrag,

    The following (as benny306 suggested) seems to work:
    I didn't find any difference editing the margin, but change the width: to about 670px.
    (I tried it on your site using FireBug. You should try it too. Great CSS debugging tool).
     
    kishanterry, Nov 3, 2011 IP
  11. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #11
    @benny306 & @Kiashanterry I did what you both said but the problem is not solved! It still the same plus now the "Leave a Comment" comes on top and right of the post! And then when I tried kishanterry's method now the "Older Entries" come at the top besides the posts! Pls help me!
     
    nisarg_kolhe, Nov 4, 2011 IP
  12. kishanterry

    kishanterry Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #12
    Hi nisrag,

    Sorry for the previous solution. I didn't look-up you website properly. If I understand you correctly, you want to increase space for post content and images. Here is the situation: the space you want for the post content to fill up is already "booked" by the "meta" div (<div id="meta">, where all those Dates, Comments, Tweets, Tags appears). So there are two things you can do (there could be more complex solutions):

    1. Either remove the <div id="meta"> ... </div>, and make ".post . middle" CSS Class wider (i.e. increase the width:) to make more room for the content.
    2. Or increase the width: of wrapper, main, post .middle in your style.css file. You might also need to adjust with margin: to get a nice spacing. Just play around with the width: and margin: of wrapper, main, post .middle until you find the sweet spots.

    Cheers
     
    kishanterry, Nov 4, 2011 IP
  13. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    I tried changing everything as you said...but it didn't worked! :( And I was unable to find <div id="meta"> !
     
    nisarg_kolhe, Nov 5, 2011 IP
  14. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #14
    Hi Nisarg,

    It's not <div id='meta'> but rather <div class="meta">. If you want you can delete <div class="meta"> </div><!-- /.post-meta --> and everything in between. But as always be sure to save the code so you can paste back in if you don't like it.

    Just a quick question - why did you choose this theme if you don't like the <meta> div running along the side of the post. There are plenty of other themes with <meta> info across the top and full width posts.

    By the way, I've been to the site and I think it looks great the way it is.
     
    benny306, Nov 9, 2011 IP
  15. kishanterry

    kishanterry Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    0
    #15
    Thanks for the correction benny306

    and

    Sorry Nisrag for giving the wrong information/solution. benny306 is right you could remove the <div class="meta">...</div> (keeping a back-up before hand of course) and see how that fits your purposes.
     
    kishanterry, Nov 9, 2011 IP
  16. nisarg_kolhe

    nisarg_kolhe Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Is searched it and was not able to find <div id='meta> :/ In which file it is? As it wasn't in style.css and many other files I looked up :/
    And its not so I don't like it, Just I want more space for my text.
     
    nisarg_kolhe, Nov 10, 2011 IP
  17. benny306

    benny306 Active Member

    Messages:
    65
    Likes Received:
    0
    Best Answers:
    1
    Trophy Points:
    51
    #17
    Hi Nisarg,

    The <div class='meta'> will be on your index page and your singlepost page in wordpress, and may be on a few others. Alot of themes are different.

    It's definitely in their because I just looked up the source code for both your home page and your Call of Duty post.
     
    benny306, Nov 10, 2011 IP
  18. Toycel

    Toycel Peon

    Messages:
    243
    Likes Received:
    11
    Best Answers:
    4
    Trophy Points:
    0
    #18
    PM Sent regarding this. Edit the custom.css as it overrides the style.css sheet and it works.
     
    Toycel, Nov 10, 2011 IP