CODEWITHSUNDEEP
csssharepointdocumentbranding
SharePointGuy
SharePointGuy

Reputation: 19

Need to change the layout of a Sharepoint Document Library

So I have created a Custom library for a Sharepoint 2010 site. Changed the file look using css, Here is the hard part I can not change the positioning of the of the files(client wants a 4x4 grid) because they all have the same Class Name so when I change the positioning on the tag and open in Designer they are all stacked on top of eachother. Does anyone know any way other than hard coding it to change the layout of the folders in a Document library. I have removed everything from the out of the box Library through CSS just want the files positioned like below instead of the typical Column view. Hope this makes sense.

Where I am now http://img593.imageshack.us/img593/9226/foldernow.png

What I need it to look like http://img10.imageshack.us/img10/8097/folderpic.png

Upvotes: 1

Views: 2835

Answers (1)

Kimzter
Kimzter

Reputation: 46

I'm using the Yahoo User Interface library Grids http://yuilibrary.com/yui/docs/cssgrids/ for all my positioning needs. Takes half a minute to set up, and as long as you're familiar with elementary school fractions it takes two minutes to master. Seriously.

Basically what you want to achieve is something like this, and keep in mind you need to set a pixel width on your outermost container, ms-bodyareacell for instance, if you're using a vanilla v4.master.

 <div class="yui3-g"> //the yui3-g is a grid container
    <div class="yui3-1-4" id="doc1"> // yui3-1-4 fills 1/4 of the avaliable width
        //document 1 goes here
    </div>
    <div class="yui3-1-4" id="doc2">
        //document 2 goes here
    </div>
    <div class="yui3-1-4" id="doc3">
        //document 3 goes here
    </div>
    <div class="yui3-1-4" id="doc4">
        //document 4 goes here
    </div>
</div>

This way all the document instances can have the same class name (yui3-1-4), and will wrap if there's more than 4.

YUI grids have seriously taken a lot of pain out of gridding and positioning items on web pages in general, and for me SharePoint in particular. I've used it on several public facing web sites, as well as numerous intra- and extranet implementations. Hope it works out for you.

Upvotes: 1

Related Questions