The SharePoint 2010 Ribbon contains default styles and elements in their Styles and Markup Styles sections. Using CSS, you can add styles or elements as well as hide OOTB styles and elements.
To create new items, use the ms-rteElement or ms-rteStyle prefixes in your CSS file.
H2.ms-rteElement-H2Custom
{
-ms-name:Title;
color:#008C99;
background-color:transparent;
}
.ms-rteStyle-Normal
{
-ms-name:"Normal";
font-size:10pt;
font-weight:normal;
background-color:transparent;
}
To remove the Styles button entirely:
#Ribbon\.EditingTools\.CPEditTab\.Styles
{
display:none;
}
To remove a single element from the Markup Styles list (Change the ElementWithStyle index number to hide the element based on its order in the list.):
li.ms-cui-menusection-items a#ElementWithStyle0-Menu
{
display:none;
}
li.ms-cui-menusection-items a#ElementWithStyle1-Menu
{
display:none;
}
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts
Thursday, February 20, 2014
Monday, April 22, 2013
Using CSS Direct Descendant Selector with Tables
Recently I was attempting to use a CSS 'direct descendant' selector (>) to set a bottom border on rows in a table. Because there were rows buried deeper in nested tables, I didn't want those to have the border. When I used the following CSS selector, it didn't work.
Turns out, I needed to add a TBODY between the TABLE and TR, even though a TBODY was not showing in the page source because the TBODY is implictly added.
table.employee > tr
Turns out, I needed to add a TBODY between the TABLE and TR, even though a TBODY was not showing in the page source because the TBODY is implictly added.
table.employee > tbody > tr
Thursday, March 28, 2013
Using word-wrap for an AspMenu SharePoint web control with long menu items
I have an AspMenu SharePoint web control with long menu items that do not respect the width of the table cell that I've set even though I have the property 'ItemWrap' set to 'True'. The biggest culprit is users wanting to use a series of underscores to separate one group od links from another. To keep an extra long series of underscores from pushing the table cell wider, I'm using the stylesheet rule 'word-wrap' as shown below.
The ASPMenu control creates this hierarchy of tables.
div#s4-leftpanel table tr td table
{
table-layout:fixed;
}
div#s4-leftpanel table tr td table tr td
{
word-wrap:break-word;
}
The ASPMenu control creates this hierarchy of tables.
div#s4-leftpanel table tr td table
{
table-layout:fixed;
}
div#s4-leftpanel table tr td table tr td
{
word-wrap:break-word;
}
Saturday, April 21, 2012
Breadcrumb added to SharePoint Masterpage
The publishing masterpage for the new website design now includes a readcrumb
trail leading back to the Home site. The text in the breadcrumbs shows the Site
titles as well as the current page title.
<asp:SiteMapPath ID="SiteMapPath" runat="server" CssClass="cgcc-breadcrumb" RenderCurrentNodeAsLink="true" skiplinktext="skip breadcrumb"/>
CGCC-v4.css is where the style is set so it's easy to change the color or font.
.cgcc-breadcrumb span a
{
color:#404040;
text-decoration:none;
}
<asp:SiteMapPath ID="SiteMapPath" runat="server" CssClass="cgcc-breadcrumb" RenderCurrentNodeAsLink="true" skiplinktext="skip breadcrumb"/>
CGCC-v4.css is where the style is set so it's easy to change the color or font.
.cgcc-breadcrumb span a
{
color:#404040;
text-decoration:none;
}
Tuesday, February 7, 2012
Changing the SP Ribbon background color using CSS
To change the background color of SharePoint's ribbon, override the following
styles from the corev4.css file.
.ms-SpLinkButtonActive
{
background-color:orange !important;
}
.ms-welcomeMenu a:hover
{
background-color: orange !important;
}
.ms-siteactionsmenu .ms-siteactionsmenuhover
{
background-color: orange !important;
color:#000000 !important;
}
.ms-cui-ribbonTopBars
{
background: orange url() repeat-x !important;
padding-top:0px;
}
.ms-SpLinkButtonActive
{
background-color:orange !important;
}
.ms-welcomeMenu a:hover
{
background-color: orange !important;
}
.ms-siteactionsmenu .ms-siteactionsmenuhover
{
background-color: orange !important;
color:#000000 !important;
}
.ms-cui-ribbonTopBars
{
background: orange url() repeat-x !important;
padding-top:0px;
}
Tuesday, April 26, 2011
Adding a stylesheet to a SharePoint masterpage using the CSSRegistration control
Sharepoint has a .NET control for registering CSS files in a SharePoint
masterpage called SharePoint:CSSRegistration. Use the ~Site token to specify the
current site. This control goes in the head section of the
masterpage.
<SharePoint:CssRegistration name="<% $SPUrl:~Site/CSS/gilariver.css%>" runat="server"/>
New to SharePoint 2010
You can specify the order using the After property. The After property contains the name of the CSS that you want to place the CSS after. The ConditionalExpression parameter will tell the CssLink to render the Conditional-CSS code as well as the CSS link.
<SharePoint:CssRegistration name="<% $SPUrl:~Site/CSS/gilariver.css%>" runat="server"/>
New to SharePoint 2010
You can specify the order using the After property. The After property contains the name of the CSS that you want to place the CSS after. The ConditionalExpression parameter will tell the CssLink to render the Conditional-CSS code as well as the CSS link.
Wednesday, October 6, 2010
Adding scripts or styles to SharePoint master pages
There are times you may need to add a script or a style to the <head> tag
of a CGCC public or Inside webpage. In each SharePoint Master page (except
CGCC-Parent.master) there is a content placeholder named
'PlaceHolderAdditionalPageHead' that looks like
this.
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" >
</asp:ContentPlaceHolder>
In your aspx layout page, add the following asp:Content control:
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server" >
</asp:Content>
Place the script or style in between the opening and closing tag. After saving and publishing, go to the website and verify.
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" >
</asp:ContentPlaceHolder>
In your aspx layout page, add the following asp:Content control:
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server" >
</asp:Content>
Place the script or style in between the opening and closing tag. After saving and publishing, go to the website and verify.
Subscribe to:
Posts (Atom)