Wednesday, August 12, 2015

Making the SharePoint blog full width

The situation: I have a team site template with the publishing feature activated.  It has a custom design, which includes master page & page layouts.  It has to include a blog.

The problem: After creating the blog, I realized that the content of the page only goes about two-thirds of the way across, with no way to update that while editing the page.



The solution: After a little poking around, I found the three styles that had to be updated to extend the blog posts to expand the full width of the page.

I added the following styles to my COREV15.css:

.ms-blog-MainArea {max-width:none;}
.ms-blog-postList {max-width:none;}
.ms-blog-MainArea>tbody>tr>td{width:100%;}

The two max-width styles were already listed, with a setting of 860px and 670px, respectively.  I found those and replaced them with none instead of adding a second style.

I'm sure there are different and possibly better ways to do this, but it took care of what I needed.  The end result:



3 comments:

  1. Right style wrong place, in general you shouldn't change an oob file it can invalidate your support with MS or simply get overwritten on the next SP, in this case we could reference a new css file in a master page prehaps? Or quick and dirty for a single blog site simply add a content editor to the page.

    ReplyDelete
    Replies
    1. How would you do this with a Content Editor? Would you just paste those 3 lines into it?

      Delete
  2. Copy the script below and paste in a Script editor.

    .ms-blog-MainArea {max-width:none;}
    .ms-blog-postList {max-width:none;}
    .ms-blog-MainArea>tbody>tr>td{width:100%;}

    ReplyDelete