This needs to go in a stylesheet in your theme. I simply used the color #333 as an example. The “!important” makes it more relevant and makes it work.
.item-title .fm{
color:#333 !important;
}
@leog371 – thanks for trying to help. Unfortunately that does not work.
Herewith the html being generated. I need the user names (John – Paris etc.) to be coloured as a visual hint. At present it only colours when you hover over it.
thanks
<ul id="members-list" class="item-list" aria-live="polite" aria-relevant="all" aria-atomic="true">
<li class="vcard">
<div class="item-avatar">
<a href="http://testsite.ovni-owners.org.uk/members/paris/" class="bp-tooltip" data-bp-tooltip="John - Paris"><img src="//www.gravatar.com/avatar/69299ce42f215930a2181c49f1eb4bef?s=50&r=g&d=mm" class="avatar user-119-avatar avatar-50 photo" width="50" height="50" alt="Profile picture of John - Paris"></a>
</div>
<div class="item">
<div class="item-title fn"><a href="http://testsite.ovni-owners.org.uk/members/paris/">John - Paris</a></div>
<div class="item-meta">
<span class="activity" data-livestamp="2017-12-17T23:51:09+0000">registered 1 week, 3 days ago</span>
</div>
</div>
</li>
<li class="vcard">
<div class="item-avatar">
<a href="http://testsite.ovni-owners.org.uk/members/peregrin/" class="bp-tooltip" data-bp-tooltip="Mike - Peregrine"><img src="//www.gravatar.com/avatar/0e516af4e69f0befa893934cbd29d023?s=50&r=g&d=mm" class="avatar user-118-avatar avatar-50 photo" width="50" height="50" alt="Profile picture of Mike - Peregrine"></a>
</div>
<div class="item">
<div class="item-title fn"><a href="http://testsite.ovni-owners.org.uk/members/peregrin/">Mike - Peregrine</a></div>
<div class="item-meta">
<span class="activity" data-livestamp="2017-12-02T18:55:20+0000">registered 3 weeks, 4 days ago</span>
</div>
</div>
</li>
</ul>
ok, i see. the css for this should be “without actually going to your site and seeing it live”
.item-title .fn a{
color: <-- Your Color Here --> !important;
}
If you want a different hover color add this just below that on your stylesheet
.item-title .fn a{
color: <-- Your Hover Color Here --> !important;
}
This should work according to what your telling me but without actually seeing it live Its hard to say. Give this a try and see what happens.
mmm.. no luck – but thank you very much for trying.
I have temporarily made the widget visible to non-logged in users. My test site is here.
The links are those to members displayed in the “Welcome to our new members’ widget bottom right.
Try this, just change the hex value to the color you want. Place it at the bottom of your style sheet. Css that loads last gets viewed onscreen You have this class “widget ul li a” messing with it. Its being called on lines 1751, 109, 109, and the a tag on line 347 of your main stylesheet. So if you put that at the bottom of that stylesheet, it should run. simply change the hex color to what you want. .
.item-title.fn > a {
color: #05a9c5 !important;
}
If that still wont work you can use this, but it will target all the links in the widgets sidebars
.widget ul li a {
color: #777;
}
Fyi, be aware that if you are using or creating a separate or custom stylesheet, It must load after all the other stylesheets that have this class on them. So if your enqueuing it, make sure that it is the last style enqueue in your enqueue list. or if your just calling it by script tag then make it last in line so your css overloads the themed css.
#05a9c5 is your theme’s link colour. For some reason, your theme is setting widget links to the colour #777. As @leog371 mentioned above, you can override that behaviour by adding this to your child theme’s style.css document:
.widget ul li a {
color: #05a9c5;
}
Thank you very much both for your help. After a lot of fiddling about I found the following worked for me:
/* make links in widgets visible */
.widget ul li a {
color: #05a9c5 ;
}
This did the trick… but I had to fiddle with the .css loading priorities to get it to actually work. In my child theme’s functions.php file I had to set a priority for the child-style enqueueing, viz.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style'),10
);
}
@leog371 – thanks for trying to help. That did not do it, however. I am copying below the html presently generated in the hope this might help.
My issue is that the two user names in the list of recent members (John – Paris & Mile Peregrine) are linked to their profiles, but the links only colour when hovering over the links. I need them to be coloured all the time, as my site uses the colouring as visual clue that it is clickable.
The colour required is: color: #05a9c5;
thanks
<aside id="bp_core_members_widget-4" class="widget widget_bp_core_members_widget buddypress widget"><h3 class="widget-title"><a href="http://testsite.xxx.org.uk/members/">Welcome to our new members</a></h3>
<div class="item-options" id="members-list-options">
<a href="http://testsite.xxx.org.uk/members/" id="newest-members" class="selected">Newest</a>
<span class="bp-separator" role="separator">|</span>
<a href="http://testsite.xxx.org.uk/members/" id="recently-active-members" >Active</a>
</div>
<ul id="members-list" class="item-list" aria-live="polite" aria-relevant="all" aria-atomic="true">
<li class="vcard">
<div class="item-avatar">
<a href="http://testsite.xxx.org.uk/members/paris/" class="bp-tooltip" data-bp-tooltip="John - Paris"><img src="//www.gravatar.com/avatar/69299ce42f215930a2181c49f1eb4bef?s=50&r=g&d=mm" class="avatar user-119-avatar avatar-50 photo" width="50" height="50" alt="Profile picture of John - Paris" /></a>
</div>
<div class="item">
<div class="item-title fn"><a href="http://testsite.xxx.org.uk/members/paris/">John - Paris</a></div>
<div class="item-meta">
<span class="activity" data-livestamp="2017-12-17T23:51:09+0000">registered 1 week, 3 days ago</span>
</div>
</div>
</li>
<li class="vcard">
<div class="item-avatar">
<a href="http://testsite.xxx.org.uk/members/peregrin/" class="bp-tooltip" data-bp-tooltip="Mike - Peregrine"><img src="//www.gravatar.com/avatar/0e516af4e69f0befa893934cbd29d023?s=50&r=g&d=mm" class="avatar user-118-avatar avatar-50 photo" width="50" height="50" alt="Profile picture of Mike - Peregrine" /></a>
</div>
<div class="item">
<div class="item-title fn"><a href="http://testsite.xxx.org.uk/members/peregrin/">Mike - Peregrine</a></div>
<div class="item-meta">
<span class="activity" data-livestamp="2017-12-02T18:55:20+0000">registered 3 weeks, 4 days ago</span>
</div>
</div>
</li>
</ul>
<input type="hidden" id="_wpnonce-members" name="_wpnonce-members" value="ab1b45abd0" />
<input type="hidden" name="members_widget_max" id="members_widget_max" value="2" />
</aside>
