Bootstrap share point 2013

  • Published on
    20-Mar-2017

  • View
    65

  • Download
    3

Transcript

<ul><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>1 Monday, August 01, 2016 </p><p>Bootstrap SharePoint 2013 </p><p> + Contents </p><p>About............................................................................................................................................................. 1 </p><p>Author ........................................................................................................................................................... 1 </p><p>Prerequisites ................................................................................................................................................. 2 </p><p>Master page .................................................................................................................................................. 2 </p><p>Styling and Script reference .......................................................................................................................... 3 </p><p>Navigation ..................................................................................................................................................... 4 </p><p>Top navigation .......................................................................................................................................... 4 </p><p>Left side ..................................................................................................................................................... 4 </p><p>Page Layout ................................................................................................................................................... 5 </p><p>Footer ........................................................................................................................................................ 5 </p><p>Web part OOB customization ....................................................................................................................... 6 </p><p>Responsive SharePoint .................................................................................................................................. 6 </p><p>About The SharePoint 2013 provides the table less structure which gives flexibility for Responsive UI. The </p><p>Responsive UI can be experienced from a smaller device (tablet or smartphone) </p><p>Author </p><p>Author VINOD DANGUDUBIYYAPU </p><p>Guide Version 1.0 </p><p>Modified On 1 August 2016 </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>2 Monday, August 01, 2016 </p><p>Prerequisites To achieve the SharePoint Responsive a configuration need to be done, by default SharePoint has its </p><p>own Mobile version is activated. </p><p>Go to features of SharePoint and disable the "Mobile Browser View". </p><p>The Responsive UI supports three rendering models: </p><p>Desktop: screen width 768px and above </p><p>Tablet: screen width between 481px and 768px </p><p>Smart Phone: screen width lower than or equal to 480px </p><p>Reference: </p><p>Responsive Master Page: </p><p> http://dev.office.com/blogs/announcing-responsive-ui-package-for-sharepoint-on-premises-</p><p>2013-2016 </p><p>v5 Responsive Master Page : </p><p> http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/ </p><p>Master page </p><p>http://kyleschaeffer.com/sharepoint/v5-responsive-html5-master-page/</p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>3 Monday, August 01, 2016 </p><p>Styling and Script reference /*Global Styling*/ </p><p>img, a, a:hover, a:focus, a:visited, a:active, </p><p>button { </p><p> outline: 0; </p><p>} </p><p> a:focus, a:visited, a:active { </p><p> text-decoration: none; </p><p> color: inherit; </p><p> } </p><p>textarea { </p><p> resize: none; </p><p>} </p><p>/*Bootstrap overrides*/ </p><p>button { </p><p> min-width: inherit; </p><p>} </p><p>input[type="button"], </p><p>input[type="sumbit"], </p><p>input[type="reset"], button { </p><p> background-color: </p><p>rgba(255,255,255,0.7); </p><p> display: block; </p><p> padding: 10px 32px; </p><p> text-align: center; </p><p> color: #000; </p><p> display: inline-block; </p><p> text-decoration: none; </p><p> transition: all .4s; </p><p> border: 0; </p><p>} </p><p>input[type="button"], </p><p>input[type="sumbit"], </p><p>input[type="reset"], button { </p><p> margin-left: 5px; </p><p>} </p><p>input[type="button"]:hover, </p><p>input[type="sumbit"]:hover, </p><p>input[type="reset"]:hover, </p><p>button:hover{ </p><p> background-color: </p><p>rgba(227,3,124,0.9); </p><p> color: #fff; </p><p>} </p><p>/*SharePoint overrides*/ </p><p>body #s4-workspace { </p><p> background: </p><p>url("../AppImages/createevent.j</p><p>pg") no-repeat fixed center top; </p><p> background-size: cover; </p><p>} </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>4 Monday, August 01, 2016 </p><p>body #s4-titlerow { </p><p> background: #fff </p><p>url("../AppImages/ironpatern.p</p><p>ng") repeat-x left top; </p><p> padding: 0; </p><p> top: 64px; </p><p> z-index: 102; </p><p> height: 120px; </p><p> transition: all 0.4s; </p><p>} </p><p>#titleAreaBox { </p><p> margin: auto; </p><p>} </p><p>body #s4-titlerow .ms-siteicon-</p><p>a { </p><p> position: relative; </p><p> text-align: center; </p><p> vertical-align: middle; </p><p> height: 120px; </p><p> transition: all .4s; </p><p> max-height: none; </p><p> max-width: none; </p><p> display: table-cell; </p><p> transition: all 0.4s; </p><p>} </p><p> body #s4-titlerow .ms-</p><p>siteicon-a .ms-siteicon-img { </p><p> max-width: 100%; </p><p> max-height: 100%; </p><p> transition: all 0.4s; </p><p> } </p><p>#s4-bodyContainer { </p><p> padding: 0; </p><p> min-height: 100%; </p><p>} </p><p>#contentRow { </p><p> padding: 15px 0 50px; </p><p>} </p><p>#contentBox { </p><p> margin: 0; </p><p> min-width: 0; </p><p>} </p><p>Navigation </p><p>Top navigation .ms-breadcrumb-box { </p><p> height: auto; </p><p>} </p><p>.ms-core-listMenu-</p><p>horizontalBox li.static &gt; .ms-</p><p>core-listMenu-item { </p><p> color: #000; </p><p> padding: 0px 20px; </p><p> text-align: center; </p><p> font-size: 18px; </p><p> position: relative; </p><p> text-decoration: none; </p><p> transition: all .4s; </p><p>} </p><p> .ms-core-listMenu-</p><p>horizontalBox li.static &gt; .ms-</p><p>core-listMenu-item:first-child </p><p>{ </p><p> display: none; </p><p> } </p><p>.ms-core-listMenu-</p><p>horizontalBox li.static li.static </p><p>&gt; .ms-core-listMenu-item { </p><p> display: inherit; </p><p>} </p><p>.dynamic-children ul.dynamic </p><p>{ </p><p> text-align: left; </p><p> box-shadow: none; </p><p> background: #fff </p><p>url("../AppImages/ironpatern</p><p>.png") repeat left top; </p><p> border: 0px solid #ed037c; </p><p> border-top: 0; </p><p> margin-left: -30px; </p><p> margin-top: -1px; </p><p> padding: 0 5px; </p><p> width: auto!important; </p><p> min-width:200px; </p><p> max-width: 250px; </p><p>} </p><p>Left side .ms-core-listMenu-horizontalBox &gt; .ms-core-listMenu-root &gt; .ms-listMenu-editLink, </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>5 Monday, August 01, 2016 </p><p>body #s4-titlerow .ms-mpSearchBox, #sideNavBox { </p><p> display: none; </p><p>} </p><p>Page Layout Change Blankwebpart layout to Bootstrap col-xx-xx classes</p><p>Figure 1: Out Of the Box Code </p><p>Figure 2: Customized with Bootstrap Classes </p><p>Footer /* Footer styles starts here */ </p><p>footer { </p><p> background: #000 </p><p>/*url('/SiteAssets/Astro/AppIm</p><p>ages/c-p-btm.jpg') no-repeat </p><p>50% 0*/; </p><p> text-align: center; </p><p> clear: both; </p><p> display: block; </p><p> margin-top: -50px; </p><p>} </p><p> footer .footerWrapper { </p><p> padding: 15px 0; </p><p> } </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>6 Monday, August 01, 2016 </p><p> footer a { </p><p> color: #fff!important; </p><p> font-size: 12px; </p><p> font-family: 'LatoWeb'; </p><p> text-decoration: none; </p><p> padding: 0 5px; </p><p> border-right: 1px solid #fff; </p><p> } </p><p> footer a:hover, footer </p><p>a:active, footer a:focus, footer </p><p>a:visited { </p><p> color: #fff; </p><p> border-right: 1px solid </p><p>#fff; </p><p> text-decoration: none; </p><p> } </p><p> footer a:hover { </p><p> text-decoration: </p><p>underline; </p><p> } </p><p> footer span { </p><p> font-weight: bold; </p><p> font-family: 'LatoWeb'; </p><p> font-size: 12px; </p><p> color: #fff; </p><p> padding-left: 5px; </p><p> } </p><p>Web part OOB customization .ms-webpartzone-cell { </p><p> margin: 0; </p><p>} </p><p>.ms-webpart-zone, .ms-webpart-chrome-vertical, .ms-webpart-cell-vertical { </p><p> display: block; </p><p>} </p><p>Responsive SharePoint @media screen and (max-width:359px) { </p><p>} </p><p>@media screen and (max-width:480px) { </p><p> .ms-breadcrumb-box { </p><p> position: relative; </p><p> bottom: 18px; </p><p> height: auto; </p><p> } </p><p> .dynamic-children.hover ul.dynamic { </p><p> position: static; </p><p> width: 100%!important; </p><p> max-width: none; </p><p> border: 0; </p><p> background: inherit; </p><p> margin: 0; </p><p> display: block; </p><p> } </p><p> .dynamic-children.hover ul.dynamic a { </p><p> color:#fff; </p><p> } </p><p>} </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>7 Monday, August 01, 2016 </p><p>@media screen and (max-width:767px) { </p><p> .navbar-fixed-top .ms-breadcrumb-box { </p><p> background: #fff; </p><p> } </p><p> body #s4-titlerow .ms-siteicon-a { </p><p> height: 80px; </p><p> } </p><p> body #s4-titlerow .ms-siteicon-a .ms-</p><p>siteicon-img { </p><p> max-width: 60%; </p><p> } </p><p> .ms-core-listMenu-horizontalBox, </p><p> .ms-core-listMenu-horizontalBox ul.static, </p><p>.ms-core-listMenu-horizontalBox li.static, .ms-</p><p>core-listMenu-horizontalBox .ms-core-listMenu-</p><p>item, .ms-core-listMenu-horizontalBox &gt; </p><p>ul.static &gt; li.static &gt; table { </p><p> display: block; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static { </p><p> border-bottom: 1px solid #ed037c; </p><p> background: #000; </p><p> text-align: center; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static &gt; </p><p>.ms-core-listMenu-item { </p><p> color: #f1f1f1; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static </p><p>li.static { </p><p> border-left: 0px solid #ed037c; </p><p> border-top: 1px solid #ed037c; </p><p> border-bottom: 0; </p><p> } </p><p>} </p><p>@media screen and (min-width:768px) { </p><p> .navbar-fixed-top .ms-breadcrumb-box { </p><p> background: transparent none; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static &gt; </p><p>.ms-core-listMenu-item { </p><p> min-width: 0; </p><p> margin-right: 0; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static </p><p>li.static:first-child { </p><p> border-left: 0 none; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.static </p><p>li.static { </p><p> border-left: 1px solid #ed037c; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.dynamic &gt; </p><p>.menu-item { </p><p> padding: 5px 2px; </p><p> font-size: inherit; </p><p> color: #333; </p><p> } </p><p> .ms-core-listMenu-horizontalBox li.dynamic </p><p>&gt; .menu-item .additional-background { </p><p> padding-left: 0!important; </p><p> border: 0!important; </p><p> } </p></li><li><p>Vinod Dangudubiyyapu Bootstrap SharePoint </p><p>8 Monday, August 01, 2016 </p><p> .ms-core-listMenu-horizontalBox li.dynamic &gt; </p><p>a:hover { </p><p> text-decoration: none; </p><p> color: #000; </p><p> background: #fafafa; </p><p> } </p><p> .ms-breadcrumb-title { </p><p> display: none; </p><p> } </p><p>} </p><p>@media screen and (max-width:768px) { </p><p> .ms-core-listMenu-horizontalBox li.static &gt; .ms-</p><p>core-listMenu-item { </p><p> padding: 0 10px; </p><p> } </p><p> .ms-breadcrumb-title { display: none; } </p><p> .ms-siteicon-a { </p><p> height: 85px; </p><p> } </p><p>} </p><p>@media (min-width:992px) { </p><p> .ms-core-listMenu-horizontalBox li.static &gt; .ms-</p><p>core-listMenu-item { </p><p> padding: 0 40px; </p><p> min-width: 0; </p><p> margin-right: 0; </p><p> } </p><p> .ms-core-listMenu-horizontalBox { </p><p> margin-right: 45px; </p><p> } </p><p> .ms-breadcrumb-top { </p><p> padding-top: 35px!important; </p><p> position: absolute; </p><p> right: 0; </p><p> } </p><p> .navbar-fixed-top .ms-breadcrumb-box { </p><p> background: transparent; </p><p> } </p><p> .navbar-fixed-top .ReferencePane { </p><p> margin-top: 10px; </p><p> } </p><p>} </p></li></ul>