Sol Web Solutions Blog

Sol Web Solutions Blog is aimed to help, inform, educate and enable our site visitors.

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Login
    Login Login form
Subscribe to this list via RSS Blog posts tagged in CSS

Creating custom SharePoint 2013 templates could possibly render the page ribbon incorrectly.  

Why????

Custom styling can have a tendency to interfere with the default SharePoint 2013 styling...particularly the ribbon.  Box sizing has a lot to do with how dropdown lists and images are displayed in the ribbon.

Box-sizing allows us to specify how we want the browser to calculate the CSS box model. 

In particular, should the “width” of a box or container include padding and the border, or is the width just what is inside of the padding? 

Content-box means that the specified width and height do not include margins, borders, or padding. 

Border-box, on the other hand is similar to how Internet Explorer determines width and height when a document is rendered in Quirks mode

...meaning the width and height include the border and padding, but not the margin.

 The following CSS can help you with your ribbon displaying properly after using custom SharePoint design in your templates:

*, *:before, *:after {

   -webkit-box-sizing: content-box; /*border-box causes many issues with SP*/

   -moz-box-sizing: content-box; /*border-box causes many issues with SP*/

   box-sizing: content-box; /*border-box causes many issues with SP*/

}

* [class^="span"], * [class^="span"]:before, , * [class^="span"]:after {

   -webkit-box-sizing: border-box; /*re-enable border-box for framework spans*/

   -moz-box-sizing: border-box; /*re-enable border-box for framework spans*/

   box-sizing: border-box; /*re-enable border-box for framework spans*/

}

img {

   max-width: none;

   width: auto;

}

* [class^="span"] img {

   max-width: 100%; /*for images inside span grid*/

}

#scriptWPQ2 img, img.ms-webpart-menuArrowImg, #applist img {

   /*within a span may still need to have width of image not 100% for SP2013 OOTB features/imges*/

   width: auto;

   max-width: none;

}

.ms-siteactions-imgspan {

   float: none;

   margin: 0px;

}

 

 

/*Custom Styles to Fix Ribbon Layout Issues*/

 

#s4-ribbonrow [class*="span"] {

   float: none;

   margin-left: 0px;

   line-height: 1.2em;

}

input.ms-cui-cb-input {

   height: 21px; /*14 was from first try*/

   padding: 3px 7px 2px;

}

 

 

@media (min-width: 1200px) {

   header > .container-fluid, nav#topnav > .container-fluid, footer > .container-fluid,

   .footer-bottom  > .container-fluid  {

      max-width: 1160px;

      margin-left: auto;

      margin-right: auto;

   }

   #main {

      max-width: 1200px;

      margin-left: auto;

      margin-right: auto;

   }

}

 

/*Fix Absolutely Positioned divs in a Grid Framework*/

 

header > .container-fluid {

   position: relative;

}

header .searchbox {

   bottom: auto;

   right: auto;

   position: relative;

   float: right;

   margin-top: 60px;

   text-align: left;

   width: 260px;

}

header #searchInputBox input[type=text]{

   box-shadow: none;

   transition: none;

   -moz-transition: none;

   -webkit-transition: none;

}

Hits: 11497
0

In case you need to remove the SharePoint Library ribbon option of "Upload Document" to a library:

b2ap3_thumbnail_upload_document_link_ribbon.gif

...and have the following scenario presented to the user:

b2ap3_thumbnail_no_option_upload_ribbon.jpg

  1. Open the library in SharePoint designer
  2. Open the "All Documents" view (in our case)
  3. Find the ending tag for <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
  4. Just before </asp:Content> insert the following CSS as shown below:

</ZoneTemplate></WebPartPages:WebPartZone>

<style type="text/css">
/*
hide the New Document, Upload Document, New Folder on left side of ribbon, have to use the back slashes to escape the dots in the element ID
*/
#Ribbon\.Documents\.New {display:none;}
</style>

</asp:Content>

Hits: 31439
0

Help Today

Send an email here!

Sol Web Solutions will be glad to help you anytime with general or technical questions, suggestions or comments.

Website Hosting

Web Hosting

Sol News

We will not share, trade, or sell any of your information in any way. Your privacy is completely respected.