How can i boxed the posts

Hi,

Is there a way to add the post conntent into a box. (On the front page and if you click read more)
I would like to have evry post in a single box because at the first sight you didint see where the posts beginn and where it ends.

Thanks

Comments

  • Hi,

    what kind of boxes you mean? Please show us on screenshot what you mean and also please provide url to page where you want to do this.

    Thanks!
  • edited November 2015
    OK
    my test side .........
    i mean a box like this
    ..........
    The white box is for the whole post and the balck box is only for the thumbnail.
    But with a smaler border.
    And the is a little space between to posts

    Thanks
  • Ok. This is really weird what you want to do but if you really want, you can do it with below css:
    .post-item {
        background: #fff none repeat scroll 0 0 !important;
        padding: 10px;
    }

    .post-item .image_frame {
        border: 2px solid #000 !important;
        border-radius: 10px;
    }

    .post-item .image_frame .image_wrapper .mask { box-shadow: 0 0 0 0 !important; }
    .post-item .image_frame img { border-radius: 10px !important; }
  • Fantastic thank you very very much :)

    But i have two more question.

    1. Now i see that the read more area is in a grey box. Can i delete it?

    2.Is it possible to make an uniform size for the picture for example all pictures in 200x200.
    And change the position of the picture and the text.
    I mean the Picture is over read more and the text is on the left side.
    Or better delete the read more button and change [....] at the end of the text into the read more button.

    Thanks for the great Support
  • 1. Do you mean to remove grey background or remove background with "Read more" button? Because if you mean background color, then you can remove it with below css:
    .post-footer { background: transparent !important; }
    2. Images can be moved from the top with below css:
    .post-item .image_frame { margin-top: 30px !important; }
    There is unfortunately no other way to change their position.
  • edited November 2015
    Thanks
    The problem with the grey background is solved and the position is ok if its not possible to change it.

    But how i get the same size for all pictures on the thumbnail?

    And it was my fault i forgot to say that i would like to have the wihte background also on the posts site.

    For example when you click on read more and go to the site for example this ............. that the backgriound of the text is also white.
  • To get the same size for all thumbs, you must update images that are the same size. For thumbs we use WP feature image option which comes with wordpress itself.

    But to change background color for single post pages, please use below css:
    .single-post #Content { background-color: #FFF !important; }
  • edited October 2015
    Is this ok? Or can i destroy something?

    http://stackoverflow.com/questions/18910027/how-to-create-thumbnails-of-the-same-size

    I dont know how to copy the code here in the comment
  • Solution looks fine but it depends on your skills if you will be able to do this. Also please remember that after any file size change, you must use Force Regenerate Thumbnail plugin.
  • edited November 2015
    Ok i try it.

    I forgot one thing how can i make the space smaler between the posts and how can in undisplay or remove this.
    Here is a picture ...........

    And one more question.
    The background at the posts is white now Thanks :)
    But how can creat a border around the post area and let the space on the left grey.

    Something like withe the thumbnails.

    I try this code but it didint work:

    .single-post #Content { background-color: #f4f4f4 !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
     border: 1px solid #b5b5b7 !important; }

    .single-post #Content .image_frame .image_wrapper .mask { box-shadow: 0 0 0 0 !important; }
  • edited November 2015
    Sorry i forgot thta i crashed my page yesterday here is the new link  .............
  • Ok. So to make the margin between posts smaller, please use below css:
    .post-item { margin-bottom: 10px !important; }
Sign In or Register to comment.