Home > Work > #CSS Change the style of the View Selector in lists/libraries breadcrumb

#CSS Change the style of the View Selector in lists/libraries breadcrumb

As part of a site branding exercise the breadcrumbs that is displayed when a list or library is open on a view was causing issue. When hovering the current view name its font was bigger and the CSS was not obvious to target.

not good hover:

view_notgood2

(font is larger and little down arrow is moving to the left 2 pixels)

good hover: 

view_good2

Having spent a good hour on that single issue and Googled for solution, here is my finding for later reference.

/* keep same font and position when hovering on view name  */
.ms-ltviewselectormenuheader .ms-viewselector{
 padding-bottom:0px;
 padding-left:5px;
 padding-right:3px;
 padding-top:2px;
 margin-right:0px;
}
.ms-ltviewselectormenuheader .ms-viewselectorhover A{
 border:0px !important;
 font-family: Verdana, Helvetica ;
 color: #0060ad;
 font-weight: normal;
 background-color: transparent;
 font-size: 9px;
 text-decoration: underline !important;
 background-image: none;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:3px;
 padding-top:2px;
 margin-right:0px;
}
/* down arrow to select view */
.ms-ltviewselectormenuheader .ms-viewselector-arrow{
margin:0px 5px 2px 0px !important;
}

References:

via François on Sharepoint http://sharepointfrancois.wordpress.com/2013/06/06/css-change-the-style-of-the-view-selector-in-listslibraries-breadcrumb/

François Souyri
French native Sharepoint Consultant living in London. A crossway between a designer, developer and system architect. Prefers stretching the limit of out-of-the-box features rather than breaking them into code. When not working with Microsoft Sharepoint François is often found on Web2.0 News sites and related social networking tools.

This article has been cross posted from sharepointfrancois.wordpress.com/ (original article)

Advertisements
Categories: Work Tags: ,
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: