The instructions below will enable you to change certain styling aspects of the Automatic Widget. 


Any of these styles can be safely added to your existing stylesheet or in a <style> tag within your page.

They will not conflict with any of your existing page styling, as they specifically target the Agent Shield widgets only.




Learn More Button


To change the "Learn More" button background: 
.agent-shield-widget>div .projects-listing-item .learnMore {
    background-color: #DDD
}

 

To change the "Learn More" button text color:

.agent-shield-widget>div .projects-listing-item .learnMore span {
    color: #FFF
}

 


Widget Pagination


To change the pagination bar (both the page numbers and the summary info), you need the following 2 CSS classes added:

.wrapper.agent-shield-widget>div .panel-navigation .pagination li a {
    color: red
}
.wrapper.agent-shield-widget>div .panel-navigation .summary {
    color:red
}

 


Listing Information


To change the Listing Title:

.wrapper.agent-shield-widget>div .projects-listing-item .caption h3 a {
    color: red
}


To change the Listing Location:

.wrapper.agent-shield-widget>div .projects-listing-item .caption p {
    color: red
}

 


 Listing Container


To change the color of the border surrounding a listing:

.wrapper.agent-shield-widget>div .projects-listing-item .thumbnails {
    border-color: red
}

 



Note: If that doesn’t immediately take effect, they might need to add an "!important”  to the color & background-color to force it.