1

I have 2 query web parts that pull some of the latest information throughout the site into the front page. Currently I have a script editor with the following code to set the background color for these to red. My question is, how do I set the link color to white instead of blue for easier viewing?

<style>
li.dfwp-item div {
  background-color: cornflowerblue;
  margin-bottom: 2%;
  text-align: center;

}

li.dfwp-item div a {
  color: #fff;
}

</style>
1

1 Answer 1

4

You wanna target the specific webpart where you wanna change the link color, otherwise every link on the page will change font color.

Use F12 Developer tools to find the ID of the specific webpart you wanna change the link text for. Insert the name/ID instead of my example (#WebPartWPQ5) and then use the CSS i provided below (SP2013).

<style type="text/css">

#WebPartWPQ5 li.dfwp-item div {
    background-color: cornflowerblue;
    margin-bottom: 2%;
    text-align: center;
}

#WebPartWPQ5 a, .ms-link:visited {
    color: #FFFFFF !important;
}

</style>
7
  • Hardcoding webpart IDs.... be aware SharePoint controls those IDs.. Dec 21, 2015 at 15:51
  • If there are multiple editors on a page that lacks the skill of communication, then you have bigger problems. :) Dec 21, 2015 at 16:00
  • Even one person editing a page can change the order without being aware. And what if a MasterPage or PageTemplate adds webparts? Dec 21, 2015 at 16:06
  • Communication. If you only would target the link element with !important, every single link without a colored background would disappear. Friendly? No. Useful? Nope. Dec 21, 2015 at 16:10
  • 1
    This worked, thank you, I am fortunately the only editor of the page. Dec 21, 2015 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.