How can I change the Font size in the Title (linked to item with edit menu) of an Announcement Web App?

Question

_{Monday, June 13, 2011 8:22 PM}

I want to increase the font size of a Title (linked to item with edit menu) of an Announcement Web App.  I'm able to change the size of the header, but I can't find the correct command to change the linked tile.  If someone could point me in the correct direction I would appreciate it.

To change the header I used.

<style>
.ms-WPHeader
{background-color:#FFFFFF;}
.ms-WPTitle, .ExternalClassAAB9962D729E44E5B61D1C141F1344BA .ms-WPTitle a
{color:#A29062;font-size:14pt;}{font-family:tahoma;}
</style>

LL

All replies (7)

_{Monday, June 13, 2011 11:06 PM ✅Answered}

Did you try using firebug which can pull the CSS from the part of the page you want to change. 

Here is a link to firebugs web site, but this should help you find out.

http://getfirebug.com/css

Good luck,

Gary

Gary Newman MCSE, MCT, CCNA MCDBA, MCAD, MCSA MCTS SharePoint 2007 Dev & Admin MCPD SharePoint 2010 Development

_{Tuesday, June 14, 2011 6:55 AM}

Hi

Add the below class.

.ms-vb a{
 font-size:large;
}

This will increase the font size for the Title column across all the lists and libraries. Is that really what you want?

If you want this bahaviour only for a specific list,

1. open the list in SharePoint designer, go to AllItems.aspx page.

2. Select any hyperlink under the Title column. Go to the Code view.

3. To the <a> tag add the style element and specify the font size there.

_{Tuesday, June 14, 2011 2:12 PM}

Naveed,

You are correct.  I just want the larger font for a specific web app announcement.  I'm confussed as to where to add <a> tag in the code.  Thanks for the help.

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="ApplicationPages" Namespace="Microsoft.SharePoint.ApplicationPages.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
 <SharePoint:ListProperty Property="TitleOrFolder" runat="server"/> -
 <SharePoint:ListProperty Property="CurrentViewTitle" runat="server"/></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
 <SharePoint:ListProperty Property="TitleBreadcrumb" runat="server"/>
 <SharePoint:UIVersionedContent UIVersion="4" runat="server">
  <ContentTemplate>
   <span class="ms-ltviewselectormenuheader" runat="server">
    <SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
   </span>
  </ContentTemplate>
 </SharePoint:UIVersionedContent>
</asp:Content>
<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
 <SharePoint:RssLink runat="server"/>
</asp:content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
 <SharePoint:ViewIcon Width="145" Height="54" runat="server"/></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
<SharePoint:RecentChangesMenu runat="server" id="RecentChanges"/>
<SharePoint:ModifySettingsLink runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId ="PlaceHolderBodyLeftBorder" runat="server">
 <div height="100%" class="ms-pagemargin"><img src="/_layouts/images/blank.gif" width='6' height='1' alt="" /></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
  <WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main"><ZoneTemplate>
  <WebPartPages:XsltListViewWebPart runat="server" Description="Use this list to track upcoming events, status updates or other team news." ListDisplayName="" PartOrder="2" Default="TRUE" HelpLink="" AllowRemove="True" IsVisible="True" AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="False" IsIncludedFilter="" DataSourceID="" Title="Announcements" ViewFlag="25165829" NoDefaultStyle="" AllowConnect="True" DisplayName="All items" PageType="PAGE_DEFAULTVIEW" FrameState="Normal" PageSize="-1" PartImageLarge="" AsyncRefresh="False" Dir="Default" DetailLink="/Test/Lists/Announcements" ShowWithSampleData="False" ListId="858d3efd-ccc9-4e11-a510-490411feebbf" ListName="{858D3EFD-CCC9-4E11-A510-490411FEEBBF}" FrameType="Default" PartImageSmall="" IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ViewGuid="{81C70896-F8B6-46FF-9C3A-D3D0D135EAC9}" AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" WebId="00000000-0000-0000-0000-000000000000" ViewContentTypeId="0x" InitialAsyncDataFetch="False" GhostedXslLink="main.xsl" MissingAssembly="Cannot import this Web Part." HelpMode="Modeless" ListUrl="" ID="g_81c70896_f8b6_46ff_9c3a_d3d0d135eac9" ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True" TitleUrl="/Test/Lists/Announcements" ManualRefresh="False" __MarkupType="vsattributemarkup" __WebPartId="{81C70896-F8B6-46FF-9C3A-D3D0D135EAC9}" __AllowXSLTEditing="true" __designer:CustomXsl="fldtypes_Ratings.xsl" WebPart="true" Height="" Width=""><ParameterBindings>
   <ParameterBinding Name="dvt_sortdir" Location="Postback;Connection"/>
   <ParameterBinding Name="dvt_sortfield" Location="Postback;Connection"/>
   <ParameterBinding Name="dvt_startposition" Location="Postback" DefaultValue=""/>
   <ParameterBinding Name="dvt_firstrow" Location="Postback;Connection"/>
   <ParameterBinding Name="OpenMenuKeyAccessible" Location="Resource(wss,OpenMenuKeyAccessible)" />
   <ParameterBinding Name="open_menu" Location="Resource(wss,open_menu)" />
   <ParameterBinding Name="select_deselect_all" Location="Resource(wss,select_deselect_all)" />
   <ParameterBinding Name="idPresEnabled" Location="Resource(wss,idPresEnabled)" />
   <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
   <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" />
  </ParameterBindings>
<XmlDefinition>
   <View Name="{81C70896-F8B6-46FF-9C3A-D3D0D135EAC9}" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" Type="HTML" DisplayName="All items" Url="/Test/Lists/Announcements/AllItems.aspx" Level="1" BaseViewID="1" ContentTypeID="0x" ImageUrl="/_layouts/images/announce.png">
    <Query>
     <OrderBy>
      <FieldRef Name="Modified" Ascending="FALSE"/>
     </OrderBy>
    </Query>
    <ViewFields>
     <FieldRef Name="Attachments"/>
     <FieldRef Name="LinkTitle"/>
     <FieldRef Name="Modified"/>
     <FieldRef Name="Office_x0020_Locations"/>
    </ViewFields>
    <RowLimit Paged="TRUE">30</RowLimit>
    <Aggregations Value="Off"/>
    <Toolbar Type="Standard"/>
   </View>
  </XmlDefinition>
<DataFields>
</DataFields>
</WebPartPages:XsltListViewWebPart>

</ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyAreaClass" runat="server">
<style type="text/css">
.ms-bodyareaframe {
 padding: 0px;
}
</style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
<SharePoint:ListProperty CssClass="ms-listdescription" Property="Description" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderCalendarNavigator" runat="server">
 <SharePoint:SPCalendarNavigator id="CalendarNavigatorId" runat="server"/>
  <ApplicationPages:CalendarAggregationPanel id="AggregationPanel" runat="server"/>
</asp:Content>
 

LL

_{Wednesday, June 15, 2011 9:38 AM}

Hi

What exactly do you mean by web app Announcement. Please be more specific.

And please mention what you did step by step.

_{Wednesday, June 15, 2011 8:32 PM}

I specifically want to make the font size larger on the web part announcement title (which is hyperlinked).

1.    Create a new team site

2.    Edit Page | Insert Web Part

3.    Add Announcements Web part | ok

4.    Site Actions | Edit in SharePoint Designer

5.    Open List and Libraries under Site Objects

6.    Open Announcements

7.    Open All Items

8.    Select Get Started with Microsoft SharePoint Foundation td

9.    In Tag Properties “Attributes”  | Style  | …

10.  Select font-size xx-large

11.  Save

12.  Does not change the Font in either the Announcement List or the Announcement Web Part.

13.  Went to Web Part on Default.aspx

14.  Selected td.ms-vb tag

15.  In Tag Properties “Attributes”  | Style  | …

16.  Select font-size xx-large

17.  Save

18.  Font size changes in SharePoint Designer but not in IE

Thanks!

LL

_{Thursday, June 16, 2011 5:36 AM | 1 vote}

Now i understand what you are trying to do much better.

1. Open in SharePoint deisgner, the page where you added the Announcement Web part

2. Select the hyperlink under the Title column

3. On the ribbon, click on List View Tools -> Deisgn -> Customize XSLT -> Customize Item

4. Go the code view and you will see a xsl:stylesheet element for your Announcement Web part.

5. Search for <a onfocus="OnLink(this)"

6. Add style="font-size:large" for the <a> tag

7. Save it and you should see the changes now.

_{Monday, June 20, 2011 6:17 AM}

With tools such as Firebug, you can find the ID and Class for the menu item in the dropdown menu (the so called ECB menu, the linked to item with edit menu you mean).

Then, I can add CSS like what follows in a Content Edit Web Part to change the font-size of the menu item:

<Style>

#ID_ViewItem

{

font-size:20px;

}

</Style>

For how to put CSS in Content Edit Web Part, please read http://blog.drisgill.com/2010/09/sp2010-branding-tip-12-hiding-quick.html