Web Part Title Style

 How do we change style of Web part title

Hi Jugnu,
You can use the IE developer tool (by pressing F12 key) to get the HTML source of particular selection and get the class name / DIV ID or any other unique value to identify that portion. Use that unique identity to change the style of Web part title or any
other design and you can write the code snippet in Content editor Web Part on that page.
<style type="text/css">
#WebPartTitleWPQ3 h2
background:red !important;
color:gray !important;
</style>
Vivek Jagga - MCTS SharePoint 2010
My Blog

Similar Messages

  • Web Part Title Bar image

    I can't believe no one has asked about this, but my search
    came up empty.
    How does one change the tiny (16x16) image on the Web Part
    Title Bar? I see where to set the title, but not the image.

    .oO(Michael Palmer Photo)
    >
    quote:
    Originally posted by:
    Newsgroup User
    > .oO
    >
    > But even without knowing the proper name finding it
    should have been
    > quite easy. Just throw something like title bar icon or
    address bar icon
    > at any search engine you like ...
    >
    > Micha
    >
    >
    > Actually I did and did get anything I understood and
    certainly not in terms of
    >what Dreamweaver can do for me automatically. I found out
    from an MS page that
    >it was in fact called a "Web Part Title Bar image", but
    even knowing that
    >didn't get me any further.
    Strange term ... must be MS-speak. ;)
    > Dreamweaver has a place for the title, but nowhere does
    it mention the image
    >that is next to it on web sites. On this forum the terms
    "title image" came
    >up with nothing.
    Most people refer to it as the "address bar icon", which
    returns a lot
    of useful results on Google.
    > I apologize if I asked a question that had been answered
    before, but sometimes
    >knowing how to phrase the question to find the answers
    can be tricky.
    No reason to apologize. I know that sometimes finding the
    right words
    can be difficult if you don't actually know what to search
    for. In this
    case it just seemed quite easy and straightforward to me ...
    but anyway.
    Micha

  • Localize web part titles using Display template in O365

    Hi,
    I have requirement to localize web part titles in my projects using Display template.
    Can anyone please tell me how can be this done .
    Thanks in advance for your great help.
    Regards,
    Avinash Kumar

    Hi Avinash,
    According to your description, my understanding is that you want to localize web part titles using Display template.
    Here is a detailed article for your reference:
    http://msdn.microsoft.com/en-us/library/office/gg491702(v=office.14).aspx
    Best Regards
    Zhengyu Guo
    TechNet Community Support

  • SharePoint Content Query Web Part Title Field

    SharePoint 2013
    I have a custom list on another site within SharePoint. How do I bring in all the columns? I see the title field on the Edit Web Part, but no matter how hard I try, I can't get multiple columns to show up.  Some of the Columns I am looking for from
    the Custom List:
    City
    Vendor
    Circuit ID
    Thanks,
    Chris

    Amit,
    Thanks for the links, but I am still missing something with the coding.  I am following the first link you gave me. 
    These are the instructions from the page
    In ContentQueryMain.xsl
    Locate “ <xsl:template name=”OuterTemplate.CallItemTemplate”> “
    Add:
    <xsl:template name="OuterTemplate.CallItemTemplate">
    <xsl:param name="CurPosition" />
    <xsl:param name="LastRow" />
    and add:
    <xsl:when test="@Style='MyTask'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="CurPos" select="$CurPosition" />
    <xsl:with-param name="Last" select="$LastRow" />
    </xsl:apply-templates>
    </xsl:when>
    Search:
    <xsl:template name=”OuterTemplate.Body”>
    And scroll down to add this line:
    <xsl:call-template name="OuterTemplate.CallItemTemplate">
    <xsl:with-param name="CurPosition" select="$CurPosition" />
    <xsl:with-param name="LastRow" select="$LastRow"/>
    </xsl:call-template>
    What I don't know is where exactly to add the middle section in my xsl document.  Here is what I think I should have.  And the Circuit list below is another attempt at this too that has been unsuccessful.
    <xsl:template name="OuterTemplate.CallItemTemplate">
    <xsl:param name="CurPosition" />
    <xsl:param name="LastRow" />
    <xsl:value-of disable-output-escaping="yes" select="$BeginListItem" />
    <xsl:choose>
    <xsl:when test="@Style='NewsRollUpItem'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="EditMode" select="$cbq_iseditmode" />
    </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="@Style='NewsBigItem'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="CurPos" select="$CurPosition" />
    </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="@Style='NewsCategoryItem'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="CurPos" select="$CurPosition" />
    </xsl:apply-templates>
    </xsl:when>
    <xsl:when test="@Style='MyTask'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="CurPos" select="$CurPosition" />
    <xsl:with-param name="Last" select="$LastRow" />
    </xsl:apply-templates>
    </xsl:when>
    <xsl:otherwise>
    <xsl:apply-templates select="." mode="itemstyle">
    </xsl:apply-templates>
    <xsl:when test="@Style='CircuitList'">
    <xsl:apply-templates select="." mode="itemstyle">
    <xsl:with-param name="CurPos" select="$CurPosition" />
    <xsl:with-param name="Last" select="$LastRow" />
    <xsl:with-param name="StartNewGrp" select="$StartNewGroup" />
    </xsl:apply-templates>
    </xsl:when>
    </xsl:otherwise>
    </xsl:choose>
    <xsl:value-of disable-output-escaping="yes" select="$EndListItem" />
    </xsl:template>
    I think I am getting close and your help is much appreciated.

  • Web Part Error: A Web Part or Web Form Control on this Page cannot be displayed or imported.

    SharePoint 2007 custom (VS 2008) solution is upgraded to SharePoint 2013 using (VS 2012). I followed this approach.
    I had created new empty project (solution) in SharePoint 2013 using (VS 2012) compiled and deployed successfully. All safe controls are registered in the web.config file. After deploying solution i Restarted IIS also, still getting this error. How to resolve
    Error
    Web Part Error: A Web Part or Web Form Control on this Page cannot be displayed or imported. The type could not be found or it is not registered as safe. Correlation ID: 5d217c9c-1827-7083-80cd-e095a30befee.
    Show Error Details
    Hide Error Details
    [UnsafeControlException: A Web Part or Web Form Control on this Page cannot be displayed or imported. The type could not be found or it is not registered as safe.]
      at Microsoft.SharePoint.ApplicationRuntime.SafeControls.GetTypeFromGuid(Boolean isAppWeb, Guid guid, Guid solutionId, Nullable`1 solutionWebId, String assemblyFullName, String typeFullName, Boolean throwIfNotSafe)
      at Microsoft.SharePoint.WebPartPages.SPWebPartManager.CreateWebPartsFromRowSetData(Boolean onlyInitializeClosedWebParts)
    <menu class="ms-hide" id="MSOMenu_WebPartMenu"><ie:menuitem id="MSOMenu_Minimize" text="Minimize" title="Collapse this web part." type="option"></ie:menuitem><ie:menuitem
    id="MSOMenu_Restore" text="Restore" title="Expand this web part." type="option"></ie:menuitem><ie:menuitem id="MSOMenu_Close" text="Close" title="Close this Web Part. You can still
    find it under closed Web Parts section in the insert ribbon. These changes will apply to all users." type="option"></ie:menuitem><ie:menuitem iconsrc="/_layouts/15/images/DelItem.gif" id="MSOMenu_Delete" text="Delete"
    title="Delete this Web Part from the page. These changes will apply to all users." type="option"></ie:menuitem><ie:menuitem type="separator"></ie:menuitem><ie:menuitem iconsrc="/_layouts/15/images/EditItem.gif"
    id="MSOMenu_Edit" text="Edit Web Part" title="Change properties of this shared Web Part. These changes will apply to all users." type="option"></ie:menuitem><ie:menuitem id="MSOMenu_Connections"
    text="Connections" title="Show connections options for this Web Part. These changes will apply to all users." type="option"></ie:menuitem><ie:menuitem type="separator"></ie:menuitem><ie:menuitem
    id="MSOMenu_Export" text="Export..." title="Export this Web Part. These changes will apply to all users." type="option"></ie:menuitem><ie:menuitem iconsrc="/_layouts/15/images/HelpIcon.gif" id="MSOMenu_Help"
    style="display:none;" text="Help" type="option"></ie:menuitem> </menu>        

    Hi Ashok,
    According to your description, my understanding is that you got an error after you re-built a SharePoint 2007 solution with VS2012, and deployed it.
    Make sure the Namespace and Type Name are consistent across all files where indicated. Also with matching case sensitivity. Verify web.config file and assembly in GAC or virtual directory bin folder in post deployment.
    More information, please refer to the link below:
    http://roykimsharepoint.wordpress.com/2013/04/27/classic-web-part-errors/
    Here is a similar post for you to take a look at:
    http://stackoverflow.com/questions/1689707/sharepoint-web-part-type-could-not-be-found-registered-as-safe
    I hope this helps.
    Thanks,
    Wendy
    Wendy Li
    TechNet Community Support

  • Custom SharePoint Master Page with Content Editor Web Part.

    Hi All,
    I have created a custom SharePoint Master Page to apply within my SharePoint Site and it was a success.
    When I want to add the content I have to use the script editor web part and add HTML snippets. Then the styles will reflect correctly. But when I use content editor web part some of the styles do not reflect. Lets assume that if I want to add a H2 with the
    custom color, the color do not show in the ribbon. And how SharePoint know that this is an <h2> and reflect the other styles like padding, margin and so on.
    Please can someone help me to solve this.
    Thanks and regards,
    Chiranthaka

    Hi,
    From your description, my understanding is that you want to add CSS code in your customized Master Page with content editor web part.
    I tested your issue in SharePoint Designer, and I added CSS code successfully.
    I accomplish your requirement with steps below:
    Add a content editor web part in a list and add some CSS code in the web part.
    Open SharePoint Designer, enter the master page.
    Insert a content editor web part under INSERT tab in the Ribbon.
    Open the list that have edited in step1 in the SharePoint Designer.
    Copy code from the list to the Master Page as the screenshot below.
    The screenshot below is my result:
    In addition, why do not you add CSS code just with <style> tag in your page? Just add CSS code as below(in this method, you do not need any web part.):
    <style>
    h2{
    background-color:green;
    </style>
    Best Regards,
    Vincent Han
    TechNet Community Support
    Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
    [email protected]

  • How can I fix the image size in a "Picture Library Slideshow Web Part"

    When I upload images to be used in the Slideshow Web Part they become skewed because they are different sizes. Is there a way to fix this besides uploading images that are all the same size? 
    Thanks,
    Kathleen

    http://webcache.googleusercontent.com/search?q=cache:bfUcFkD_bxgJ:spcodes.blogspot.com/2012/08/display-slide-show-images-within-fixed.html+&cd=4&hl=en&ct=clnk&gl=in
     Display Slide Show Images within fixed size
    The Picture Library Slide Show Web Part show the images stored in a picture library with slide show effect.
    This slide show web part displays the images with it's original size. Due to this the web part changes its size according to the image size. If we want the slide show to run within the specific size on the page then we need to control the size of the images
    to the fixed length during runtime.
    To achieve this we need to add the CEWP above the picture Library Slide Show web part & insert the following script in that web part.
    <style type="text/css">
    .ms-WPBody TD {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- WIDTH: auto !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT:
    auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING- 0px
    .ms-WPBody TD DIV {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT:
    auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING- 0px
    .ms-WPBody TD IMG {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- WIDTH: 260px !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT:
    190px !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING- 0px; align: center
    .s4-wpcell-plain {
        PADDING-BOTTOM: 0px; BORDER-RIGHT-WIDTH: 0px; MARGIN: 0px; PADDING- WIDTH: 100% !important; PADDING-RIGHT: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT:
    auto !important; VERTICAL-ALIGN: middle; BORDER-LEFT-WIDTH: 0px; PADDING- 0px
    .ms-PartSpacingVertical {
        MARGIN-"color:#783f04;font-family:'Courier New',Courier,monospace;" />}
    .style1 {
        COLOR: #808080
    }</style>
    We can fix the height & width of the image in the .ms-WPBody TD IMG css.
    http://sharepoint.stackexchange.com/questions/66028/picture-slideshow-web-part-image-size-too-small
    How to display original images in SlideShow web part
    Step 1. Save below JavaScript code to file, for example in SlideshowObjectInitializer.txt and upload it to SiteAssets Library
    <script type="text/javascript">
    function SlideshowObjectInitializer() {
    ShowPic = (function(ShowPicOrig) {
    return function() {
    var ssObj = arguments[0]; //SlideShow object
    var curPicIdx=ssObj.index; //current picture index
    ShowPicOrig.apply(this, arguments); //call original ShowPic
    //apply some changes to display original picture in SlideShow control
    ssObj.image.src = ssObj.linkArray[curPicIdx]; //display original image instead of web image
    //change picture & container size to auto instead of fixed (by default web image size is used)
    ssObj.image.setAttribute('height','100%');
    ssObj.image.setAttribute('width','100%');
    var cell = ssObj.cell;
    cell.style.width = 'auto';
    cell.style.height = 'auto';
    cell.style.display = '';
    var pcell = ssObj.cell.parentNode;
    pcell.style.width = 'auto';
    pcell.style.height = 'auto';
    })(ShowPic);
    ExecuteOrDelayUntilScriptLoaded(SlideshowObjectInitializer, 'imglib.js');
    </script>
    Step 2. Add CEWP on page where Slideshow web part is located and in the Content Editor tool pane, under Content Link, type
    /SiteAssets/SlideshowObjectInitializer.txt. 
    If this helped you resolve your issue, please mark it Answered

  • Broken Web Part Issue

    Hi..
    We Restored Content Database backup from SharePoint 2010 to SharePoint 2013 environment and its restored correctly, but when we browsed the site, we are getting 
    Could not load file or assembly  or one of its dependencies. The system cannot find the file specified.
    But we don't have code for Custom Web Parts or wsp. so we tried by Web Part Maintenance Mode ( ?Contents=1), but didnot find the exact broken web Part Title..
    So how to resolve the above issue.
    Ravindranath

    try checking ULS logs woith corelation ID:
    C:\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\LOGS
    also try these links:
    http://stackoverflow.com/questions/1265505/sharepoint-could-not-load-file-or-assembly-the-system-cannot-find-the-file-sp
    http://sharepoint.stackexchange.com/questions/69897/could-not-load-file-or-assembly-or-one-of-its-dependencies-the-system-cannot-fi
    http://www.sharepointpals.com/post/Failed-to-load-receiver-assembly-SystemIOFileNotFoundException-Could-not-load-file-or-assembly-or-one-of-its-dependencies-on-Feature-Receiver-in-SharePoint-2013
    Please mark answer as correct if it is correct else vote for it if you find it useful Happy SharePointing

  • White Spacing between Web Parts

    .       How do we  increase or decrease the vertical and horizontal white spacing between SharePoint web parts.

    http://sharepointdeveloperblog.blogspot.in/2013/10/remove-space-between-web-parts.html
    <style
    type="text/css">
         .ms-webpartPage-root
             border-spacing:
    0px
    !important;
           .ms-webpartzone-cell
             margin:
    0px
    !important;
     </style>

  • Item title won't show in Content Search Web Part

    Hi,
    I am trying to show news items from one site on another site. I can show all attributes so far, except for the title.
    The field name of the title in the news item is 'title'.
    In crawled properties, I have linked the title to Title, RefinableString00 and RefinableString12.
    But the title either displays DispForm.aspx as a title (when I select title), or nothing (when I select the mapped property RefinableString00 or RefinableString12).
    What can/should I do to show the title field?

    Hi,
    According to your post, my understanding is that Item title did not show in Content Search Web Part.
    You need to open the webpart either in SP designer or visual studio or as matter of fact in Notepad and search for the special property. And then add your list columns which you wants to display.
    More information:
    How to: Display Custom Fields in a SharePoint Content By Query Web Part (ECM)
    SharePoint: Content Query Webpart - OOB, Custom Fields, Custom Style with Table format
    Best Regards,
    Linda Li
    Linda Li
    TechNet Community Support

  • How to hide title of the list on Content Query Web Part?

    I am trying to display the description on content query web part from a list. Even when I leave the Title field blank on "Presentation" section (editing the web part), the title shows up with the link along with the description. Is there any way
    to hide the title or leave it as blank? Any help is highly appreciated.
    Thanks,
    Evilar

    Hi Evilar,
    Thanks for posting your issue, Kindly use the below mentioned CSS Style in ID of table tag to fix this issue
    #hide-title .ms-viewheadertr {
    display: none;
    }OR
    For Content Query Web part (WebPartWPQX) Note; X is a number of your web part.#WebPartWPQX .ms-viewheadertr
      display: none;
      }So only titles of the webpart within the WebPartWPQX will be hided.
    Also, browse below mentioned URL for more details
    http://www.balestra.be/2013/08/hide-column-titles-from-sharepoint-lists-libraries.html
    I hope this is helpful to you, mark it as Helpful.
    If this works, Please mark it as Answered.
    Regards,
    Dharmendra Singh (MCPD-EA | MCTS)
    Blog : http://sharepoint-community.net/profile/DharmendraSingh

  • How to modify title and tooltip text in Content Editor web part

    I have inherited a site with a page that includes two Content Editor web parts. The web parts have been left with the default titles (Content Editor [1] and [2]) and mouse-over text.
    I want to set these to something more appropriate so I choose the option Edit Page (to edit the web parts on this page). I can move the web parts around (so definitely in Edit mode) but if I click the Edit Web Part Properties the page refreshes but no properties
    or options (or errors) appear.
    How do I modify these web parts?

    When you select the edit web part options, the page should reload with the configuration options on the right hand side. This will include several collapsed sections, namely: -
    Appearance
    Layout
    Advanced
    If you maximise the appearance one, you'll see a text field for "Title."  Edit this to what you want and you'll be able to rename these.
    If you can't see the options, make sure to scroll to the far right hand side of the screen.  Sometimes on larger resolution monitors, they can appear hidden.
    Steven Andrews
    SharePoint Business Analyst: LiveNation Entertainment
    Blog: baron72.wordpress.com
    Twitter: Follow @backpackerd00d
    My Wiki Articles:
    CodePlex Corner Series
    Please remember to mark your question as "answered" if this solves (or helps) your problem.

  • How to prevent RSS Viewer web part from overriding list-item CSS style?

    I am using SharePoint Online. I have a web part page with a number of web parts with links. Font size of the links is ~12px.
    If I add an RSS Viewer web part to the page, then it overrides the 'list-item' class CSS Style to something like 8px, which is unreadable.
    To correct this I have tried the following:
    1. Added the following code to a Script Editor Web Part on same page:
    <style type="text/css">
    .item link-item
    font-size:20px !important;
    .link-item
    font-size:20px !important;
    </style>
    2. Completely deleted all XSL from the RSS Viewer web part and replaced it with very simple formatting code which format the links within the RSS web part to 16px - but still the other links are set to 8px.
    3. Linked a custom style sheet to the relevant master page and set the link-item classes in there, ensuring that it is executed after the standard SharePoint css.
    ...but nothing works!
    It appears that, as soon as the RSS Viewer web part is added to the page it overrides the list-item style and then will not release it even if all the XSL within the web part is deleted!
    On deleting the RSS Viewer from the page and saving it, the links font size returns to normal.
    Does anyone have a fix/work around for this?
    Thanks in advance,
    Jimmy

    Hi Jimmy,
    I recommend to use “.link-item a” instead as the code below to change the font size of the links:
    <style>
    .link-item a
    font-size:20px !important;
    </style>
    And I tested the code above in my environment and it worked fine.
    Best regards,
    Thanks
    Victoria Xia
    TechNet Community Support

  • How to display user-editable title in control template (search web part)

    Hi all,
    SharePoint 2013. I've created a custom control template for a search box.  In the settings there is an option to display the chrome, which will display the Title above the web part as entered by the user in the settings for that web part.  
    However, I want to change where this title appears (without the chrome being visible) inside a specific div in my web part HTML - can I manually add a tag (similar to  _#= Title =#_ for example) that will render the title for me?  Or is there som
    js code that will allow me to get that title?
    Thanks in advance!

    Hi,
    According to your post, my understanding is that you want to change the position of the title of the search box.
    You can add the code below to Content Editor Web Part.
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">
    $(function(){
    $("h2[class='ms-webpart-titleText']").css("margin-left","90px");
    </script>
    If you want to hidden the Content Editor Web Part, you need to edit the web part to change the setting:
    The result is as below:
    Best Regards,
    Linda Li
    Linda Li
    TechNet Community Support

  • SQL Server Report services web part will cause lost page title

    Hello,
    I have a SSRS web part in my Sharepoint 2013 page, but I found the page title always lost after report load completed. I have checked the js code by debug, I found this is being caused by internal javascript executed by Sharepoint.
    The code as below:
    Sys$WebForms$PageRequestManager$_parseDelta(executor) {
    >var reply = executor.get_responseData();
    the code get pageTitle info is null, so cause page title lost.
    Can anyone help please?
    Thank you

    Hi Brysk,
    Is there any difference between the problemaitc page containing the webpart and other working wiki pages for showing the title name in IE tab?
    The IE tab should show the information in tag<title> of the page, please check if it is correct for that page (using F12).
    Also check if it is related to IE browser compatibility issue.
    Thanks
    Daniel Yang
    TechNet Community Support

Maybe you are looking for