先日、cocoonからswellに移行しました。

その際、cocoonでは存在した「（c）最近のコメント」ウィジェットがswellにはありません。

様々なサイトを見て、function.phpやCSSを追記してウィジェットを追加する方法などを試しましたが、うまく表示されません。

デフォルトのコメント一覧ウィジェをCSSでカスタマイズしようとしたのですが、反映されませんでした。

記述したCSSは以下のとおりです。

/* 最近のコメントウィジェットのスタイル */
.widget_recent_comments {
    padding: 20px; /* ウィジェットの内側の余白 */
}

/* コメントボックスのスタイル */
.widget_recent_comments li {
    margin-bottom: 15px; /* コメントの間隔 */
    list-style: none; /* 箇条書きのマーカーを非表示 */
    background-color: #fff; /* コメントボックスの背景色 */
    border: 1px solid #ddd; /* コメントボックスのボーダー */
    padding: 15px; /* コメントボックスの内側の余白 */
    border-radius: 8px; /* コメントボックスの角を丸くする */
}

/* アバターのスタイル */
.widget_recent_comments li img.avatar {
    border-radius: 50%; /* アバターを丸くする */
    float: left; /* アバターを左に寄せる */
    margin-right: 10px; /* アバターとテキストの間隔 */
}

/* コメント者の名前のスタイル */
.widget_recent_comments li a {
    font-weight: bold; /* コメント者の名前の太さ */
    color: #333; /* コメント者の名前の色 */
    text-decoration: none; /* 下線を非表示 */
}

.widget_recent_comments li a:hover {
    color: #0073e5; /* コメント者の名前のホバー時の色 */
}

/* コメント内容のスタイル */
.widget_recent_comments li .comment-content {
    color: #555; /* コメントの本文の色 */
    margin-top: 5px; /* コメント者の名前とコメント内容の間隔 */
}

/* コメントのリンクのスタイル */
.widget_recent_comments li .comment-link {
    display: block; /* リンクをブロック要素にする */
    color: #0073e5; /* リンクの色 */
    margin-top: 5px; /* コメント内容とリンクの間隔 */
    text-decoration: none; /* 下線を非表示 */
}

もし以上のCSSが間違えているのであれば、正しいものを教えてください。

swellでも以下のようなコメント一覧を表示させたいです。