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>
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>
  • Hardcoding webpart IDs.... be aware SharePoint controls those IDs.. – Danny '365CSI' Engelman Dec 21 '15 at 15:51
  • If there are multiple editors on a page that lacks the skill of communication, then you have bigger problems. :) – Christoffer Dec 21 '15 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? – Danny '365CSI' Engelman Dec 21 '15 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. – Christoffer Dec 21 '15 at 16:10
  • 1
    This worked, thank you, I am fortunately the only editor of the page. – Travis Easton Dec 21 '15 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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