locked
Change color of text in webpart RRS feed

  • Question

  • I'm trying to change the text color of the icons of this SP WebPart, and it's related web-parts.

    I'm unable to find anything relating to the icon's text or font.

    When hovering over the icon it moves the gray area up, covering the entire icon. It's like it's an image with an overlay on it.

    I don't believe they're images, and changing the overlay would not be an image function,.

    I've explored trying to change/design the page through the browser and have even downloaded SharePoint 2013 Designer. I've been unable to find a resolution for this seemingly simple problem.

    Looking at the web-part in SP Designer2013 the number of Items correlates with the number of links listed in the web-part, but I can't find a way to edit the items.

    Any help is appreciated. Thank you.

    Wednesday, October 7, 2015 10:20 PM

Answers

All replies

  • Hi AnthonyAnd,

    You can use F12 Developer Tools to debug your page and select this element by clicking to check if it is an image.

    If it is an image, we can edit it and replace it.

    If not, we can change its CSS.

    By the way, what are the web parts in your screenshot?

    Best regards,

    Linda Zhang


    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 tnmff@microsoft.com.

    Friday, October 9, 2015 7:29 AM
  • Thank you Linda,

    So the background is an image, I was able to locate their directory and I'm able to edit them if necessary. Howerver I didn't find any overlay image. It's the overlay's text color that needs to change.

    I inspected the webpart as suggested and found this element

    <div id="Tile_WPQ2_2_2" style="width: 150px; height: 150px;" aria-haspopup="true" class="ms-tileview-tile-content">
    

    Contains the STYLE for the text within the overlay. It's under Home.aspx:509

    I've edited the appropriate Home.aspx(from sharepoint designer 2013) and it doesn't have the 509 line, or even close but I can view line 509 in the brower's developer tools.

    I'm very close to finding the resolution and need a little more direction. Thank you very much.

    Friday, October 9, 2015 2:51 PM
  • After further exploration and editing I've found these lines:

    I was able to find and edit Website.css and modify the color to #FFF, what I need. But it appears the Home.aspx is overwriting the Website.css setting.

    If I uncheck the Home.aspx color style it works, or change the Home.aspx color.

    How can I either modify the Home.aspx line 524(there isn't more than 100 lines in the file and none reference the color). Or allow Website.css to supersede the Home.aspx setting?

    Friday, October 9, 2015 4:14 PM
  • Can anyone help me either modify the Home.aspx line 524(this line doesn't exist in the Home.aspx living within the web-folder's directory) or set Website.css to supersede the Home.aspx setting?
    Monday, October 12, 2015 2:32 PM
  • Hi Anthony,

    First you need to get the webpart ID by going  to view source of your page. Once you have webpart ID you can change the color, icon, Web Part header, Caption, Font Style and color using simple CSS. Like below.

    $(wpid).css('background-color', wpBGColor);

            $(wpid).css('font-family', wpFontName); 

           $(wpid).css('color', wpFontColor); 

           $(wpid).find("p").css('font-size',wpFontSize + 'px'); 

           $(wpid).find("a").css( 'color', wpTitleColor);

    Using JQuery, I created one drop down list that containing the WebPart Name and ID resides on my site Page.

    User can change the font, color, Header, Title color of selected webpart. Here is the code, you can copy this code and add Content Editor webpart on your Page and will able to see how it works after that as per your requirement you copy the code.

    Here is complete code. Of webpart.

    Select the WebPart  : &#160;&#160; &#160; &#160;  &#160; &#160; &#160; &#160; &#160; &#160; &#160;&#160;&#160;<select id="ddlWPName" style="width: 200px;"><option value="#ctl00_ctl35_g_9e38d79b_f965_478f_b6ef_35145b181dd2_ctl00_announcements">Announcements</option><option value="#ctl00_ctl35_g_38b3da62_8c6d_4824_92c5_5f37a5da758d_ctl00_hr_updates">HR Updates</option><option value="eventsId">Events</option><option value="Applauseid">Applause</option><option value="NewsFeedid">NewsFeed</option><option value="SubmitstorywpId">Submit Story</option> </select>

    <br/> Select Color for WP title bar&#160; : &#160; &#160;<select id="ddlWPTitleColor" style="width: 200px;"><option value="Green">Green</option><option value="Red">Red</option><option value="Purple">Purple</option><option value="Yellow">Yellow</option></select><br/> Select Color for WP Header : &#160;  &#160;&#160;&#160;<select id="ddlWPHeaderColor" style="width: 200px;"><option value="Green">Green</option><option value="Red">Red</option><option value="Yellow">Yellow</option><option value="Purple">Purple</option> </select> 

    <br/> Select Color for backgrouund: &#160;<select id="ddlWPBGColor" style="width: 200px;"><option value="Green">Green</option><option value="Red">Red</option><option value="Yellow">Yellow</option><option value="Purple">Purple</option> </select> 

    <br/> Select Font Style:  &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;&#160; 

    <select id="ddlWPFontName" style="width: 200px;">

       <option value="Arial">Arial</option><option value="Arial Black">Arial Black</option><option value="BookmanOldStyle">Bookman Old Style</option><option value="BellMT">Bell MT</option> </select> 

    <br/>Select Font Color:  &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; 

    <select id="ddlWPFontColor" style="width: 200px;">

       <option value="Green">Green</option><option value="Red">Red</option><option value="Yellow">Yellow</option><option value="Purple">Purple</option> </select> 

    <br/> Select Font Size:  &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160;&#160; 

    <select id="ddlWPFontSize" style="width: 200px;">

       <option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option> </select> 

    <br/>

    <input type="button" id="MyButton" value="Apply"/>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <script>

    $(document).ready(function(){

      $("#MyButton").click(function(){

           

          var wpid= $('#ddlWPName').val(); 

         var wpTitleColor = $('#ddlWPTitleColor').val(); 

         var wpHeadColor =   $('#ddlWPHeaderColor').val();

          var wpBGColor =   $('#ddlWPBGColor').val(); 

          var wpFontName = $('#ddlWPFontName').val();

           var wpFontColor = $('#ddlWPFontColor').val(); 

           var wpFontSize = $('#ddlWPFontSize').val(); 

           

           $(wpid).css('background-color', wpBGColor);

            $(wpid).css('font-family', wpFontName); 

           $(wpid).css('color', wpFontColor); 

           $(wpid).find("p").css('font-size',wpFontSize + 'px'); 

           $(wpid).find("a").css( 'color', wpTitleColor);

                     

        

        

      });

    });

    </script>


    Krishana Kumar http://www.mosstechnet-kk.com
    Please mark the replies and Proposed as answer if they help and solve your issue

    Monday, October 12, 2015 3:05 PM
  • I'm not trying to modify the webpart only the items listed within the webpart. The items listed within are <li> class.

    If modifying the webpart is what I need to do, where do I insert the mentioned code?
    Also, what webpart ID do i need? I see 'webpartid' and 'webpartid2'

    Below is a picture of the web-part and the items, the list items are pictures but the gray overlay and overlay text are done via code. I've modified the Website.css to the color value required, but the Home.aspx color value takes priority.

    I need to either modify the Home.aspx color value(the Home.aspx file in this site's directory doesn't have 524 lines) or allow Website.css values to superseded Home.aspx

    Monday, October 12, 2015 5:49 PM
  • Hi AnthonyAnd,

    Did you mean you want to edit the text on the overlay in the ”Get started with your site” web part on the home page?

    If yes, you can create a custom .css file and link to the home.aspx instead editing the original file.

    And you should point to the class of this text on overlay, not “body,div,dl…” to modify all the font color.

    On my home.aspx, I find the classes affected the color are “.ms-tileview-tile-titleMedium” and “.ms-tileview-tile-detailsBox”.

    Then I add the script below to the custom .css file and upload the file to the style library:

    .ms-tileview-tile-titleMedium{

    color:#000;

    }

    .ms-tileview-tile-detailsBox{

    color:#000;

    }

    Then attach this file to the home.aspx.

    Refresh the page, here is my effect after revision:

    Best regards,

    Linda Zhang


    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 tnmff@microsoft.com.

    Tuesday, October 13, 2015 3:04 AM
  • That's EXACTLY what I'm looking for! Thank you Linda!

    However, I am unable to get your solution working:
    I've created a Custom.css within the Style Library/Theme... directory with this code:

    .ms-tileview-tile-titleMedium{
    color:#fff;
    }
    .ms-tileview-tile-detailsBox{
    color:#fff;
    }


    I am unable to attach the file to any home.aspx with SPD2013, I can't find the option.

    I've added the line 

    <link href="Style Library/Theme0902/Custom.css" rel="stylesheet" type="text/css" />
    

    To the <head> of the Master Page. This doesn't work.

    You know exactly what I'm looking for, I just need a way to execute it.

    Thank you for the assistance.

    Tuesday, October 13, 2015 8:03 PM
  • I was able to attach my Custom.css to the sub-site's Home.aspx but the font still isn't applying. When I remove the font styles applied by the lines that contain:

    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, th, td

    Then the applied Custom.css seems to take effect.

    See Pictures below:

    1. Default view with custom.css applied

    *************************************************************************************************************************************************************************

    1. Style settings unchecked/removed:

    *************************************************************************************************************************************************************************

    this picture shows the utilization of the custom.css
    when the other styles are unchecked                                                                                 the right picture shows the applied style to Home.aspx

    • Edited by AnthonyAnd Wednesday, October 14, 2015 1:09 AM
    Wednesday, October 14, 2015 12:43 AM
  • Hi AnthonyAnd,

    Here is an article about how to add css to the page:

    http://techtrainingnotes.blogspot.com/2012/05/adding-javascript-and-css-to-sharepoint.html

    Best regards,

    Linda Zhang


    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 tnmff@microsoft.com.


    Thursday, October 15, 2015 1:56 AM