Design

At times, you want to hide something that’s rendered by default in SharePoint, for example some of the ribbon’s controls rendered right away with the page. I’ve seen some people going with the way of hiding the whole “New” group in a document library in order to prevent user from using the upload or new folder options.

For the new folder, everyone knows it can be easily disabled from the library’s settings, but for the Upload button in the ribbon, you can use pure CSS to do so, but you will need to find the right selector, and use it right. We all know how to use developer tools to pick the right css classes, so as can be seen below:

So you might be tempted to do something like this:

#Ribbon.Documents.New.AddDocument-Large{ display: none; }

1	#Ribbon.Documents.New.AddDocument-Large{ display: none; }

And.. that won’t work, you might be tempted as well to add !important to the end to force it to apply, but again.. it won’t work. It’s because CSS considers the dot character as part of the css itself to identify a class, and it won’t understand it’s part of the ID. In this case, you need to use escaping characters in CSS which is the backslash!

So your code should look like this:

#Ribbon\.Documents\.New\.AddDocument-Large{
display: none;
}

#Ribbon\.Documents\.New\.AddDocument-Large{

display: none;

}

Now you should end up with something similar to this:

Hope this will quickly help someone out there!

Hello Everyone, today’s article is going to have an intensive information about how to style the navigation menu for SharePoint Foundation 2013, in this case, we’ll have some common requirements, and we’ll go through how to achieve them to deliver a nice looking menu for the top navigation.

Problem:

The requirement that we have this time, is to create a menu which will include sub-items (dynamic items) that will appear when we hover over the static menu item.

We need all static menu items to have the following characteristics:

1- To be in uppercase format, meaning all letters in the sentence should be capitalized.

2- To have the white color, and a custom color: #f0b530 in case of anchor hover (Note that some of the static items maybe used only as containers for dynamic list items, and don’t act as hyperlinks).

The characteristics for the dynamic list that appears when we hover over a static item that contains sub-items:

1- To have the width of the maximum li that will appear inside the list, if you have a list item that will be 400px long, the ul should stretch to fit that size.

The characteristics for the dynamic items inside the list:

1- To have the “>” before each item

2- To have only the first letter in the sentence as capital letter, only the first letter in the sentence.. remember that!

3- On hover, to have a custom color, same one mentioned earlier: #f0b530

These are the requirements, so let’s get to the solution, shall we?!

Solution:

First things first, for my example, I use the following css to set the background color for my menu:

.ms-core-listMenu-horizontalBox {

background-color: rgb(163,160,143);

text-transform: uppercase;

}

Now we will need to style the static menu items that act as a container for my ul, to give them a white bold text, use the following css:

li.static span.dynamic-childrenspan {

color: white;

font-weight: bold;

}

As you see in the image below, the background color gave us a nearly grey background, and all letters in the static items are uppercase as required, note also that they are bold and white colored which what the second css snippet does.

Now, what if we hover over the “RESSOURCES HUMAINES” item, ul should be displayed with all items inside, and we should have the ul width to equal the longest item inside, also all items should have the first letter capitalized, and prefixed with > character, so use the following css for that:

li.dynamic {

height: 25px;

width: 100%;

white-space: nowrap;

}

The style above, gives a height for each item inside the list for 25px, and a maximum width it can get, which is 100%, also the white-space: nowrap, it prevents the item from breaking to a second line when it gets to a specific width, this is a MUST USE.

Now we’ll add > before each link as follows:

a.dynamic:before{

width: 100%;

content: ” > “;

}

In this case we are using a pseudo class for the anchor to prefix it using the content property.

We need the anchor tag to have the white color by default, not the blue color:

a.dynamic{

font-weight: bold;

color: white!important;

}

And when hovering, to have the custom color:

li.dynamic:hover a {

color: #f0b530!important;

}

But what about having it all in small letters, and the first letter in the sentence to be capital letter? You might think you would get a way with Text-Transform: Capitalize, but wait a minute, this property will capitalize the first letter of EACH WORD, remember we want only the first letter of the first word, we’ll use the following snippet:

li.dynamic span {

display: inline-block;

text-transform: lowercase;

}

li.dynamic span:first-letter {

text-transform: capitalize;

}

The first style, will change the display for the span to inline-block, this is because in the second style we want to use the :first-letter, and this pseudo selector works on block elements only (span by default is not block), and we also transform all text to lowercase, in the second style, we get the first letter of the span, and capitalize it, nice ha?

To the last part, to style the ul itself to make it stretch, convert the display to inline-table, and give it a large z-index so it’s always shown when hovering:

ul.dynamic{

display: inline-table;

z-index: 10000;

}

That’s it, now you should have something that will be similar to this:

Enjoy your SharePoint designing now!

M . D

SharePoint Thoughts

By Mohamed Derhalli

Hide Upload Button + CSS Tip!

Why can’t you hide web part on a wiki page?

Creating Dynamic List Menu For SharePoint Foundation 2013 Navigation