Ok. That’s quite a lot of changes, but all of this can be done with CSS. You can add that CSS to the bottom of your theme’s style.css, or under Appearance > Customize > Additional CSS in your dashboard.
To get started, you can check this post to learn more about how to use your browser to try and preview CSS changes on your site:
https://dailypost.wordpress.com/2013/07/25/css-selectors/
Then, you can play with selectors to get to something you like. Here is some code to get you started:
/*
Style the author's name.
We use > to only target the first level list items, and not the second level ones (the author's posts.)
*/
.sidebar > .widget_authors > ul > li > a {
color: red;
}
/* Style the author's posts. */
.sidebar .widget_authors ul li ul li a {
/* Change the color. */
color: blue;
}
/* Remove bullet points from author's posts. */
.sidebar .widget_authors ul li ul {
list-style-type: none;
}
/* Alternative colors for each author. */
.sidebar > .widget_authors > ul > li:nth-child(odd) {
background-color: #ccc;
}
.sidebar > .widget_authors > ul > li:nth-child(even) {
background-color: #000;
}
/* Move the text to the right. */
.sidebar > .widget_authors > ul > li {
height: 120px;
padding: 10px 10px 0 0;
}
.sidebar .widget_authors ul li a img {
float: left;
width: 106px;
margin: 0 10px;
height: 106px;
}
Jeremy that’s great. Thank you very much.
I’ve tried changing the colour codes and padding but the changes are not appearing when I refresh. I also clear the cache but that doesn’t help.
I suppose this is an issue for the template designer?
Also, is there a way I can only show certain authors in the list? I don;t want all authors appearing.
Thanks.
I’ve tried changing the colour codes and padding but the changes are not appearing when I refresh. I also clear the cache but that doesn’t help.
I suppose this is an issue for the template designer?
Looking at your site, it seems you’ve managed to make it work by adding the CSS to your theme’s CSS editor.
is there a way I can only show certain authors in the list? I don;t want all authors appearing.
You can use the jetpack_widget_authors_exclude filter to exclude specific authors from appearing in the widgets. You can find an example in our documentation here:
https://developer.jetpack.com/hooks/jetpack_widget_authors_exclude/
You’ll need to add that code snippet to a functionality plugin like this one:
https://wordpress.org/plugins/code-snippets/
To find out the ID of each author you’d like to exclude, you can go to the Users menu in your dashboard, and click on an author’s name to edit their profile: their profile editing page URL will include the author ID.
I hope this helps.
So I install one of the plugins mentioned in the link and paste the function there?
Or does the function code go into CSS?
SO I have activated the plugin but now I don;t know where to add the ID’s. The two samples I have been shown aren’t very good. This is how I have it at the moment but it isn’t working:
apply_filters ( ‘jetpack_widget_authors_exclude’, array $default_excluded_authors 12,15,10,5,7,8,13,9,16,11,6,14 )
You can use the same snippet that’s available here:
https://developer.jetpack.com/hooks/jetpack_widget_authors_exclude/
To exclude multiple authors, you can duplicate line 7 and change the author ID, like so:
/**
* Exclude specific authors from ever appearing in the Authors Widget.
*
* @param array $default_excluded_authors Array of user ID's that will be excluded.
*/
function jeherve_exclude_authors_widget( $default_excluded_authors ) {
$default_excluded_authors[] = 5;
$default_excluded_authors[] = 6;
$default_excluded_authors[] = 7;
return $default_excluded_authors;
}
add_filter( 'jetpack_widget_authors_exclude', 'jeherve_exclude_authors_widget' );
That’s great Jeremy. Thank you very much for help. Looks just how I want it to.
