SharePoint Den: CSS

Showing posts with label CSS. Show all posts

7 Oct 2016

Hide Attachments from specific SharePoint Group

 <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js' type="text/javascript">  
 </script>  
 <script type="text/javascript">  
   $(function() {  
     $.ajax({  
       url: "/_api/web/currentUser?$select=Groups/Title&$expand=Groups",  
       method: "GET",  
       headers: {  
         "Accept": "application/json; odata=verbose"  
       },  
       success: function(data) {  
         for (var k = 0; k < data.d.Groups.results.length; k++) {  
           var groupName = data.d.Groups.results[k].Title;  
           if (groupName == 'OECTA EXEC GL') {  
             $("[scriptclass='SharePointFileAttachmentCollection'], [scriptclass='SharePointFileAttachmentContainer']").hide();  
           }  
         }  
       },  
       error: function(data) {  
         console.log(data);  
       }  
     });  
   });  
 </script>

17 Mar 2015

Hide SharePoint 2013 Controls on Full Screen Mode

How do I hide or Show custom controls in full scree mode?

When you click on "full screen mode" button ms-fullscreenmode class is added to the <Body> tag:

Solution:

A sample snippet of CSS that will hide your controls in full screen

/*hide controlID div only when full screen mode is enabled/

.ms-fullscreenmode #controlID {

display:none;

}

#controlID - id of an HTML element that should be hidden when "full screen" is clicked

10 Jan 2014

Increase the Width of the Lookup Control

If you need to increase the width of the lookup field on the edit form - add this piece of CSS to your master page:

.ms-formtable table.ms-long {
width:650px !important;
}

.ms-formtable table.ms-long .ms-input>select {
width:300px !important;
}

The result should look like so:

19 Dec 2013

List of Useful SharePoint CSS Classes

When developing custom SharePoint solutions you can save a lot of time by taking advantage of the built-in CSS classes inside corev4.css or corev15.css files.

For instance: you can use ms-error class in order to make your label red.
You can also use these:
.s4-floatleft
.s4-hide
.s4-clust - hides the element for the print view.

Here is a good list of ready-to-use CSS classes:
http://sharepointexperience.com/csschart/csschart.html

Unfortunately, this link does not contain the whole list of useful classes, but it's a good start anyway.

25 Jun 2013

Enabling HTML5 on SharePoint 2010 Master Page

This is the original article.

The steps are:

Open your custom Master Page replace the existing DOCTYPE tag with the following HTML5 doctype: <!DOCTYPE html>
Now look for the meta tag, X-UA-Compatible, found in the head section. It should look like: <meta http-equiv="X-UA-Compatible" content="IE=8" />
Update the “content” value to "IE=Edge"

That's it! now you can use lots of CSS 3.0 and HTML5 features.

19 Jun 2013

Using SVG Images with Modernizr.js

If you need to add an SVG to your HTML page here what you should do:

Install Inkscape (it's free to use).
Create SVG file
Export to PNG. This file will be used as a fallback in older browsers like IE 7 and IE 8

Create HML page and add .svg Image on it. Problem: IE8 does not support SVG. That's why you need modernizr.js
Include modernizr.js to the page. This will add "svg" or "no-svg" classes to the <HTML> tag.
Now you can use ".no-svg" and ".svg" classes in you CSS selectors to provide fallback to PNG images. In other words, you need to load .png images only when no-svg class exists in DOM.

Final HTML and CSS should be like following:

3 Apr 2013

SharePoint 2010 CSS Chart

On on the Marc's SharePoint Notes I've found a very informative table that looks like this:

.ms-cui-cg-gr .ms-cui-tt-a:hover{

border-color:#56c553;

border-top-color:#56c553;

background:red;
}

For the full table check the link above.

It's pretty self-explanatory, I think.

Total Pageviews