This series of settings is a system to give you more control over how your Flex site looks and functions. Virtually anything you can do with CSS on a web page, you can do on your Flex site. This setting is ideal for in-house developers or those who know basic CSS and how to use Developer Tools.
Demonstration video example:
Step 1:
First, locate “Advanced Flex Settings” on your Flex site. From there add a new setting called AllowCustomPageStyles exactly as shown and set the value to true.
This is the master setting that allows for the creation of other predefined settings, and in those settings is where your custom CSS styles will go.
Step 2:
The second step is knowing what you want to style differently, finding it’s class/ID name which you will select to style it, and whether you want it to be styled the same on all pages in which the element appears, or only on specific pages.
If you want the selected element styled on all pages, you will create another new setting called style:allpages, and the value of that setting will be your CSS styles.
To style elements only on certain pages, you’ll need to add a new setting for each page and the naming syntax will be:
style:list title:page
So for example, if I only wanted to style something on the Display forms in the Tasks list, the setting I’d create would be named:
style:Tasks:DispForm2.aspx
Note: For page names, Display Form pages are named DispForm2.aspx,
Edit Form pages are EditForm2.aspx, and New Forms are NewForm2.aspx. You can target just the dashboard by adding the setting style:dashboard:default.aspx.
When you’re styling any of the Forms you’ll want them to look the same no matter which list they are from, so it will be smarter to use the style:allpages setting.
In the screenshot above I am on a Display form and I want to change the background color of the title cells. Use Developer Tools to find a viable class name or attribute selector. Be sure to avoid Microsoft’s classes and ID’s if possible, as they are often unreliable.
Step 3:
Head back to your Advanced Flex Settings and add the CSS selector and styles into the value of the setting. Click save and reset the application cache.
Note: many of Microsoft’s styles have !important already on them, so in many cases if your styles aren’t working, you may also need to use the !important flag to override them.
NEW (2017): Item Summary Specific Selectors
The CSS styles for Item Summary Display Pages aren’t inherited from the same source as the normal Display Page styles. For this reason, styles set for a typical Display Page in the style:allpages setting won’t change the styles for the Item Summary display page.
The following selectors can be used to style the Item Summary Display Pages specifically, and can be found via Developer Tools.
These classes select the main element. If you want to style the elements inside of the main element, you will need to make your selector more specific. For example, to target the value cells in the display form above, and change their text color to red, your selector and style declaration would be:
.disptablesummary [crmvaluecell]{
color: red;
}
NEW (2017): List View Specific Selectors
SharePoint’s default list view styles can be changed and customized putting the following CSS in the style:allpages setting. The values shown for each property can be changed to your preferred values. The !important flag is only necessary on the properties it is shown for in the example below.
/*styles list view column heading text*/
.ms-vh2 a, .ms-vh a, .ms-vh2,.ms-vh2-nofilter,.ms-vh{
color: black;
font-size: 12px;
font-weight: bold;
}
/*styles list view bars background color*/
.ms-vh2,.ms-vh-icon,.ms-viewheadertr,.ms-vh2-nofilter{
background-color: #d4ecfd !important;
border-right: 2px solid white;
}
.ms-core-listMenu-selected,.ms-core-listMenu-selected:link{
background-color: #d4ecfd !important;
}
Note: The code above will produce the following result for your list views.
If you have any questions contact support at support@lookout-software.com.