SharePoint på ren svenska

Skuggor på kanterna av centrerad design

Ibland bara händer det, ibland får man till något man tycker att man jobbat med i evigheter. Man tycker att man vridit och vänt på problemet för att få till det men så en dag så bara fungerar det. Idag är en sådan dag!

Det är ju väldigt inne med skuggningar, gärna på kanterna av en centrerad design. Så för att ni ska slippa söka och labba med att få till det berättar jag här hur man enkelt kan få till det:

I masterpage:

precis innan <div id=”s4-workspace”> lägger ni till:

<div class="container">
<div class="shadowLeft"><!-- Start Shadow Left -->
<div class="shadowRight"><!-- Start Shadow Right -->

i slutet av masterpagen precis innan </body> och </html> stänger ni divarna:

</div><!-- End Shadow Right -->
</div><!-- End Shadow Left -->
</div><!-- End Container -->

I CSS för sida/sidor som detta ska gälla:

form{
margin: auto;
}
body #s4-workspace{
height: 100%;
overflow: visible;
background-repeat:repeat;
background-color:white;
}
.s4-ca{
max-height:700px;
max-width: 990px;
}
.container{
width:1046px;
margin:0 auto; 
padding:0;
}
.shadowLeft {
background:url("../../Style%20Library/images/shadow-left.png") 0 0 repeat-y;
padding:0 0 0 28px;
height:900px;
}
.shadowRight {
background:url("../../Style%20Library/images/shadow-right.png") 100% 0 repeat-y;
padding:0 28px 0 0;
height:900px;
position:relative;
}

Där bredden 1046px under .Container är bredden på sidan (990px) plus skuggbilderna på sidorna (28px). Paddingen på skuggorna under .shadowLeft och .shadowRight är bredden på skuggbilden.

Och här har ni resultatet:

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut /  Ändra )

Google-foto

Du kommenterar med ditt Google-konto. Logga ut /  Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut /  Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut /  Ändra )

Ansluter till %s